Offline availability Power Pages with PCF

[DFEA-Easi]

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.

Any ideas how to resolve this ?

Thanks in advance for your help!

[ragavanrajan]

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]

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...

[DFEA-Easi]

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

[pompousROB]

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

[saveri]

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.

[DFEA-Easi]

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.

[pompousROB]

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]

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