Ws 1837 service worker changes to render offline page #13520
Conversation
…bc/simorgh into ws-1837-service-worker-changes
| if (hasOfflinePageFunctionality) await cache.add(OFFLINE_PAGE); | ||
| }); | ||
| }); | ||
| console.log(`[SW v${version}] Service Worker loaded.`); |
There was a problem hiding this comment.
Is it OK if we log these for everyone? I think it's useful for debugging, but maybe there should be an option/flag? e.g. query parameter that enabled console.log)? E.g. https://github.com/bbc/simorgh/blob/latest/docs/Rendering-Ads.mdx?plain=1#L46
There was a problem hiding this comment.
I thought we could keep these logs for a couple of days after the first release to ensure everything is on track or to help with debugging if something breaks. After that, we can remove them.
But if its not advisable , we can have a look into other ways
andrewscfc
left a comment
There was a problem hiding this comment.
Nice work here, some of my questions likely stem from misunderstandings as this seems pretty complicated to me! Please DM me or we can do a call if any of my queries are unclear
Resolves JIRA:
PArent ticket : https://bbc.atlassian.net/browse/WS-1464
https://bbc.atlassian.net/browse/WS-1837
Summary
Service worker changes to render offline page only in PWA app
Code changes
Changes in _app.page.tsx (nextjs) and serviceWorkerComponet index.tsx(express) - to initiate the service worker registration
Changes in SW.js - to accomodate offline page rendering only for PWA installed app
Added 2 custom hooks for service worker registration and to send PWA_STATUS
Testing:
It’s better to test in the preview environment, as localhost testing won’t provide accurate results.
Launch any page in the installed PWA app.
Reload the page or navigate to another page to ensure caching happens properly.
(The PWA requires an initial reload/navigation so caching starts, the PWA_STATUS becomes true, and the app is identified as running in standalone mode.)
Turn off Wi-Fi and then reload the page or navigate to any page to verify that the offline page is displayed.
Note this offline page will be only seen for installed pWA app not for canonical sites
SOme edge cases related to service worker on rendering offline page|:
We need a second reload or any navigation request after the PWA app launch to ensure that:
Right now , if we are getting launched directly to homepage rendered in Express(i.e -/mundo ), then that page doesn't render offline page when user goes offline.
Useful Links
https://web.dev/articles/offline-cookbook#on-install-not
https://web.dev/articles/service-worker-lifecycle#updates
https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html