Ws 1837 service worker changes to render offline page #13520
+816
−32
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
elvinasv
reviewed
Dec 15, 2025
andrewscfc
reviewed
Dec 17, 2025
| ); | ||
| const resources = [...scriptSrcs, ...linkHrefs] | ||
| .filter(url => url.startsWith('/') || url.startsWith(self.location.origin)) | ||
| .map(url => new URL(url, self.location.origin).href); |
Contributor
There was a problem hiding this comment.
Could this have been achieved using the queryselector api rather than regex? You could parse the doc as html using https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
Then found the link element using query selector
Might be a bit less error prone/cleaner?
Contributor
Author
There was a problem hiding this comment.
Tried to use DOMParser , but it is incompatible with service worker as it is a browser DOM API available in window contexts only and it was throwing error
andrewscfc
reviewed
Dec 18, 2025
Contributor
andrewscfc
left a comment
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
…nstall event changes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Sometimes navigating to express rendered pages (eg :any topics page) , wont show offline page
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