cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
DFEA-Easi
Regular Visitor

Offline availability Power Pages with PCF

Hi,

 

I'm using a Power component to display a list of items loaded from the Power Portals API and stored inside an IndexedDB.

I PWA enabled my Power page and enabled "offline pages" to be able to use the website/application offline.

 

The first time you open the PWA all the data is loaded and saved in an IndexedDB.

Once the data has been loaded, I would like the user to be able to CRUD items from the list.

Once network is available, all changes would be synced with Dataverse.

This is all working correctly, the only issue is when starting the PWA offline.

Sometimes I get a default Chrome error "This site can't be reached".

  • If I open the application with network connection, everything is working fine.
  • If I go offline, close and reopen the app, everything is working fine.
  • If I go offline, close the app and reopen after some time (5min), I get the "Site can't be reached" error.

DFEAEasi_0-1671722352194.png

 

Any ideas how to resolve this ?

 

 

Thanks in advance for your help!

 

8 REPLIES 8
ragavanrajan
Super User
Super User

Hi @DFEA-Easi 

 

From your post, I gather you are trying to handle Dynamic data offline 

 

Few things to check 

 

1. Check the power pages site in different browsers. There is a high chance it may be due to the browser ( please check in Chrome, edge and firefox) 

2. Use the chrome lighthouse tool to check the PWA functionality. 

2.1. Open chrome dev tools 

2.2. Click the Lighthouse tab. 

2.3. Click Analyze and run audit 

2.4. Use the below link to test the PWA functionality 

   

     

Adding reference below 

 

https://developer.chrome.com/en/docs/lighthouse/pwa/ 

 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

 

DFEA-Easi
Regular Visitor

Hi @ragavanrajan ,

 

Thank you for your reply.

I tested the PWA in Lighthouse and all is looking good.

Also for offline availability, my "start_page" is correctly returning a HTTP 200 when offline.

 

I gathered more info from the console when I get the "This site can't be reached" error.

It looks like the PWA is fetching the pages that should be available offline, which of course doesn't work...

DFEAEasi_0-1671784194945.png

DFEAEasi_1-1671784204890.png

 

DFEA-Easi
Regular Visitor

I opened a ticket for support @ microsoft, turns out it's a product issue. No ETA for fix yet.

Did you ever find a solution to this? Im faced with the same issue where it fails to fetch in the getOfflineModeUrls() function.

saveri
Advocate II
Advocate II

Hii @DFEA-Easi 

  • Check the power pages site in different browsers. There is a high chance it may be due to the browser ( please check in Chrome, edge and firefox)
  • 2. Use the chrome lighthouse tool to check the PWA functionality.

Hi pompousROB,

 

I opened a ticket @microsoft and this is a product bug.

I now have an ETA for the fix release, this issue should be fixed with release 9.5.2.xx which is planned for deploy on the Weekend of 25th March.

Any update on your progress? Mine appears to be working on Android now as of last week, iOS it is installable, but opening offline initially implies that it doesnt work. Clicking the refresh button on iOS then loads the cached website. 

DFEA-Easi
Regular Visitor

For me it is indeed also working on PC.
In our use case we are only using the website on PC, so I'm not testing this on iOS or Android

Helpful resources

Announcements

Announcing the MPPC's Got Power Talent Show at #MPPC23

Are you attending the Microsoft Power Platform Conference 2023 in Las Vegas? If so, we invite you to join us for the MPPC's Got Power Talent Show!      Our talent show is more than a show—it's a grand celebration of connection, inspiration, and shared journeys. Through stories, skills, and collective experiences, we come together to uplift, inspire, and revel in the magic of our community's diverse talents. This year, our talent event promises to be an unforgettable experience, echoing louder and brighter than anything you've seen before.    We're casting a wider net with three captivating categories:  Demo Technical Solutions: Show us your Power Platform innovations, be it apps, flows, chatbots, websites or dashboards... Storytelling: Share tales of your journey with Power Platform. Hidden Talents: Unveil your creative side—be it dancing, singing, rapping, poetry, or comedy. Let your talent shine!    Got That Special Spark? A Story That Demands to Be Heard? Your moment is now!  Sign up to Showcase Your Brilliance: https://aka.ms/MPPCGotPowerSignUp  Deadline for submissions: Thursday, Sept 28th    How It Works:  Submit this form to sign up: https://aka.ms/MPPCGotPowerSignUp  We'll contact you if you're selected. Get ready to be onstage!  The Spotlight is Yours: Each participant has 3-5 minutes to shine, with insightful commentary from our panel of judges. We’re not just giving you a stage; we’re handing you the platform to make your mark.     Be the Story We Tell: Your talents and narratives will not just entertain but inspire, serving as the bedrock for our community’s future stories and successes.    Celebration, Surprises, and Connections: As the curtain falls, the excitement continues! Await surprise awards and seize the chance to mingle with industry experts, Microsoft Power Platform leaders, and community luminaries. It's not just a show; it's an opportunity to forge connections and celebrate shared successes.    Event Details:  Date and Time: Wed Oct 4th, 6:30-9:00PM   Location: MPPC23 at the MGM Grand, Las Vegas, NV, USA  

September User Group Success Story: Reading Dynamics 365 & Power Platform User Group

The Reading Dynamics 365 and Power Platform User Group is a community-driven initiative that started in September 2022. It has quickly earned recognition for its enthusiastic leadership and resilience in the face of challenges. With a focus on promoting learning and networking among professionals in the Dynamics 365 and Power Platform ecosystem, the group has grown steadily and gained a reputation for its commitment to its members!   The group, which had its inaugural event in January 2023 at the Microsoft UK Headquarters in Reading, has since organized three successful gatherings, including a recent social lunch. They maintain a regular schedule of four events per year, each attended by an average of 20-25 enthusiastic participants who enjoy engaging talks and, of course, pizza.     The Reading User Group's presence is primarily spread through LinkedIn and Meetup, with the support of the wider community. This thriving community is managed by a dedicated team consisting of Fraser Dear, Tim Leung, and Andrew Bibby, who serves as the main point of contact for the UK Dynamics 365 and Power Platform User Groups.   Andrew Bibby, an active figure in the Dynamics 365 and Power Platform community, nominated this group due to his admiration for the Reading UK User Group's efforts. He emphasized their remarkable enthusiasm and success in running the group, noting that they navigated challenges such as finding venues with resilience and smiles on their faces. Despite being a relatively new group with 20-30 members, they have managed to achieve high attendance at their meetings.   The group's journey began when Fraser Dear moved to the Reading area and realized the absence of a user group catering to professionals in the Dynamics 365 and Power Platform space. He reached out to Andrew, who provided valuable guidance and support, allowing the Reading User Group to officially join the UK Dynamics 365 and Power Platform User Groups community.   One of the group's notable achievements was overcoming the challenge of finding a suitable venue. Initially, their "home" was the Microsoft UK HQ in Reading. However, due to office closures, they had to seek a new location with limited time. Fortunately, a connection with Stephanie Stacey from Microsoft led them to Reading College and its Institute of Technology. The college generously offered them event space and support, forging a mutually beneficial partnership where the group promotes the Institute and encourages its members to support the next generation of IT professionals.   With the dedication of its leadership team, the Reading Dynamics 365 and Power Platform User Group is poised to continue growing and thriving! Their story exemplifies the power of community-driven initiatives and the positive impact they can have on professional development and networking in the tech industry. As they move forward with their upcoming events and collaborations with Reading College, the group is likely to remain a valuable resource for professionals in the Reading area and beyond.

A Celebration of What We've Achieved--And Announcing Our Winners

As the sun sets on the #SummerofSolutions Challenge, it's time to reflect and celebrate! The journey we embarked upon together was not just about providing answers – it was about fostering a sense of community, encouraging collaboration, and unlocking the true potential of the Power Platform tools.   From the initial announcement to the final week's push, the Summer of Solutions Challenge has been a whirlwind of engagement and growth. It was a call to action for every member of our Power Platform community, urging them to contribute their expertise, engage in discussions, and elevate collective knowledge across the community as part of the low-code revolution.   Reflecting on the Impact As the challenge ends, it's essential to reflect on the impact it’s had across our Power Platform communities: Community Resilience: The challenge demonstrated the resilience of our community. Despite geographical distances and diverse backgrounds, we came together to contribute, learn, and collaborate. This resilience is the cornerstone of our collective strength.Diverse Expertise: The solutions shared during the challenge underscore the incredible expertise within our community. From intricate technical insights to creative problem-solving, our members showcased their diverse skill sets, enhancing our community's depth.Shared Learning: Solutions spurred shared learning. They provided opportunities for members to grasp new concepts, expand their horizons, and uncover the Power Platform tools' untapped potential. This learning ripple effect will continue to shape our growth. Empowerment: Solutions empowered community members. They validated their knowledge, boosted their confidence, and highlighted their contributions. Each solution shared was a step towards personal and communal empowerment. We are proud and thankful as we conclude the Summer of Solutions Challenge. The challenge showed the potential of teamwork, the benefit of knowledge-sharing, and the resilience of our Power Platform community. The solutions offered by each member are more than just answers; they are the expression of our shared commitment to innovation, growth, and progress!   Drum roll, Please... And now, without further ado, it's time to announce the winners who have risen above the rest in the Summer of Solutions Challenge!   These are the top community users and Super Users who have not only earned recognition but have become beacons of inspiration for us all.   Power Apps Community:  Community User Winner: @SpongYe Super User Winner: Pending Acceptance Power Automate Community:  Community User Winner: @trice602 Super User Winner: @Expiscornovus  Power Virtual Agents Community: Community User Winner: Pending AcceptanceSuper User: Pending Acceptance Power Pages Community: Community User Winner: @OOlashyn Super User Winner: @ChristianAbata   We are also pleased to announced two additional tickets that we are awarding to the Overall Top Solution providers in the following communities:    Power Apps: @LaurensM   Power Automate: @ManishSolanki    Thank you for making this challenge a resounding success. Your participation has reaffirmed the strength of our community and the boundless potential that lies within each of us. Let's keep the spirit of collaboration alive as we continue on this incredible journey in Power Platform together.Winners, we will see you in Vegas! Every other amazing solutions superstar, we will see you in the Community!Congratulations, everyone!

September Featured user group leader

 Ayonija Shatakshi, a seasoned senior consultant at Improving, Ohio,is a passionate advocate for M365, SharePoint, Power Platform, and Azure, recognizing how they synergize to deliver top-notch solutions. Recently, we asked Ayonija to share her journey as a user group leader, shedding light on her motivations and the benefits she's reaped from her community involvement.      Ayonija embarked on her role as a user group leader in December 2022, driven by a desire to explore how the community leveraged various Power Platform components. When she couldn't find a suitable local group, she decided to create one herself!     Speaking about the impact of the community on her professional and personal growth, Ayonija says, "It's fascinating to witness how everyone navigates the world of Power Platform, dealing with license constraints and keeping up with new features. There's so much to learn from their experiences.    Her favorite aspect of being a user group leader is the opportunity to network and engage in face-to-face discussions with fellow enthusiasts, fostering deeper connections within the community. Offering advice to budding user group leaders, Ayonija emphasized the importance of communication and consistency, two pillars that sustain any successful community initiative.      When asked why she encourages others to become user group leaders, Ayonija said, "Being part of a user group is one of the best ways to connect with experienced professionals in the same field and glean knowledge from them. If there isn't a local group, consider starting one; you'll soon find like-minded individuals."      Her highlight from the past year as a user group leader was witnessing consistent growth within the group, a testament to the thriving community she has nurtured. Advocating for user group participation, Ayonija stated, "It's the fastest route to learning from the community, gaining insights, and staying updated on industry trends."   Check out her group: Cleveland Power Platform User Group

Get coding assistance with Copilot while editing site code in Visual Studio Code desktop

We are excited to announce a new preview feature: Copilot in Power Pages for Visual Studio Code desktop. This feature provides you with coding assistance while you edit your site code in Visual Studio Code desktop using natural language chat interaction. You can use Copilot in Power Pages to describe your expected code behavior and get AI-generated code snippets that you can refine and use for various aspects of your site development.   Note: To use this feature, you need to sign into your environment, and it is only available in the US region in English language.   Feature capabilities With Copilot, you can get coding assistance for: Form and List customization: allow custom validation for forms and add interactive experience to form and list using JavaScript.Webpage customizations: generate HTML components and add styles to your pages.Web Template: generate HTML templates.Liquid: generate liquid code to add dynamic content in Webpages or Web Templates.FetchXML: Get help with writing FetchXML to query data from Dataverse.Web API: Generate code for Power Pages Web APIs to Create/Read/Update/Delete Dataverse records.Content Snippets: Get help with writing reusable content blocks across multiple pages.Provide feedback:Use feedback option to share your input and suggestions. 1. Form and List customization Form and List customization is a feature that allows you to customize the appearance and behavior of your forms and lists on your site pages. You can use Form and List customization to change the layout, style, validation, and actions of your Forms and Lists. With Copilot, you can chat with the AI assistant and get code snippets for adding custom validation and interactivity to your Forms and Lists in your site code. Sample prompt for form validation Generate JavaScript code for form field validation to ensure age is greater than 18. Sample prompt for list customization Write JavaScript code to highlight the row where loan status is approved in table list. To learn more about Form and List customization, visit form link and list link. 2. Webpage customizations Webpage customizations is a feature that allows you to customize various aspects of your webpages such as HTML components, styles, and more. You can use Webpage customizations to enhance the look and feel of your site pages. With Copilot, you can chat with the AI assistant and get code snippets for generating HTML components and adding styles to your pages in your site code. Sample prompt Write HTML code for the webpage to show loan registration form FAQ as a list group. To learn more about Webpage customizations, visit this link. 3. Web Template Web Template is a feature that allows you to create HTML templates for your site pages. You can use Web Template to define the layout, style, and content of your pages. With Copilot, you can chat with the AI assistant and get code snippets for creating and using Web Templates in your site code. Sample prompt Create a web template with breadcrumb and page title. To learn more about Web Template, visit this link. 4. Liquid Liquid is a feature that allows you to add dynamic content to your Webpages or Web Templates. You can use Liquid to access data from Dataverse or other sources and display it on your pages. With Copilot, you can chat with the AI assistant and get code snippets for writing Liquid expressions in your site code. Sample prompt Generate liquid code to check if user has admin role. To learn more about Liquid, visit this link. 5. FetchXML FetchXML is a feature that allows you to query data from Dataverse using XML syntax. You can use FetchXML to filter, sort, aggregate, or join data from different entities. With Copilot, you can chat with the AI assistant and get code snippets for writing FetchXML queries in your site code. Sample prompt Generate a fetchxml liquid query to retrieve the list of contacts who are having credit score more than 500 and are active. To learn more about FetchXML, visit this link. 6. Web API Web API is a feature that allows you to interact with Dataverse records using HTTP requests. You can use Web API to create, read, update, or delete records from different entities. With Copilot, you can chat with the AI assistant and get code snippets for writing Web API requests in your site code. Sample prompt Generate Web API code to query active contact records. To learn more about Web API, visit this link. 7. Content Snippets Content Snippets is a feature that allows you to write reusable content blocks that can be used across multiple pages. You can use Content Snippets to store common HTML, CSS, or JavaScript code that you want to reuse on different pages. With Copilot, you can chat with the AI assistant and get code snippets for creating and using Content Snippets in your site code. Sample prompt Generate content snippets to display copyright, current date and "All rights reserved." message. To learn more about Content Snippets, visit this link. 8. Provide feedback In every response of the Copilot chat, select the feedback options, a thumb up () if you like the response or thumb down () if you didn’t like it. Your feedback greatly helps improve the capabilities of this feature. How to use Copilot Install Power Platform Extension: Ensure you have the Power Platform Tools extension (version 2.0.3 or higher) installed within Visual Studio Code .Access Copilot: Download and open your Power Pages site root folder in Visual Studio Code and activate the Copilot feature from left navigation by selecting “Power Platform”.Engage in Natural Language Interaction: Describe the expected behavior of your code using natural language. Copilot will generate code snippets based on your descriptions.Insert or copy AI generated code to your site: If you are happy with the generated code, you can easily copy and paste the code snippet or insert the code to Power Pages site.Refine and Implement: Review the AI-generated code snippets, refining them as needed to match your exact requirements.Provide feedback: Select the feedback options, a thumb up ( ) if you like the response or thumb down () if you didn’t like it and provide your feedback. We are looking forward to your feedback Copilot in Power Pages is designed to streamline your coding journey and amplify your creativity. Your feedback is crucial in shaping the future of this feature. We want to  hear from you! See documentation here for a detailed overview.  Full product blog here:  Get coding assistance with Copilot while editing site code in Visual Studio Code desktop| Microsoft Power Page   Thank you,  Neeraj Nandwana   

An MPPC23 Invitation from Charles Lamanna, CVP of Microsoft Business Applications & Platform

Hear from Corporate Vice President for Microsoft Business Applications & Platform, Charles Lamanna, as he looks ahead to the second annual Microsoft Power Platform Conference from October 3rd-5th 2023 at the MGM Grand in Las Vegas.Have you got your tickets yet? Register today at www.powerplatformconf.com  

Top Solution Authors
Top Kudoed Authors
Users online (3,476)