WS-1837: Service worker changes to render offline page

[jinidev]

Resolves JIRA:
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

How the Caching System Works

Step 1: PWA Identification

1. When a PWA app loads , through "message" event, a PWA_STATUS message as true, is being sent from the client to distinguish PWA users from canonical site users after getting the client ID.

Step 2: Offline Page Caching (cacheOfflinePageAndResources)

1. During "message" event , If offline page isn't cached yet, fetch /:service/offline page
2. Parse the fetched HTML and extract script and link resources
3. Fetch all offline-page related resources and store them in cache

Step 3: Offline Detection (fetchEventHandler)

1. When navigation fails, the SW intercepts the request
2. If the user is a PWA user AND offline page is cached:
   i. Return cached offline page HTML
   ii. Set flag isPWADeviceOffline=true
3. When offline page loads, additional resource requests are served from cache (intercepted due to isPWADeviceOffline flag)
4. On successful navigation event, set isPWADeviceOffline=false

Step 4: Track offline page visits

1. When user is back online (e.g., opens any page), usePWAOfflineTracking checks if user has visited the offline page in the past
2. Fires custom event (pwa-offline-page-view) to indicate that offline page has been visited.

Testing:

It’s better to test in the preview environment, as localhost testing won’t provide accurate results (or run the built app instead of the dev server)
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 or navigation for caching to begin, the PWA_STATUS to become true, and for the app to be identified as running in standalone mode.)
Turn off Wi-Fi, then reload the page or navigate to any page to verify that the offline page is displayed.

Some edge cases related to service worker on rendering offline page :

1. We need a second reload or any navigation request after the PWA app launch to ensure that:

      -       The offline page gets cached if it isn’t already, or
      -       The offline page works correctly even if it is already available in the cache.
   

2. The service worker does not register on the homepage due to a scope issue (which is an exisiting issue). As a result, rendering the offline page from the homepage will not work at the moment. We will create follow-up tickets to address this.(https://bbc.atlassian.net/browse/WS-2004)

   Note : As part of latest discussions, we are going to release offline page and service worker functionality with these edge cases

Useful Links

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
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

[elvinasv]

Note: We will disable logging or delete this before merging

[andrewscfc]

Nice work everyone 🚀

[amoore108]

Looks good, thanks for all the efforts on this.

Just wondering if the service worker gets transpiled by the browser like the other JS on the page? Probably not an issue as I imagine the browsers that support SWs also support the syntax used within it here.