WS-1837: Service worker changes to render offline page #13520
+1,357
−45
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
andrewscfc
reviewed
Dec 17, 2025
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
| const isPWA = client && pwaClients.get(client.id); | ||
| if (isPWA) { | ||
| const service = getServiceFromUrl(url); | ||
| cacheOfflinePageAndResources(service).catch(err => |
Contributor
There was a problem hiding this comment.
This wasn't immediately clear to me but am I right in saying this caching behaviour updates the offline page if it has changed since the message event here: https://github.com/bbc/simorgh/pull/13520/changes#diff-98fd1d4c44ad3934ee242b1f070d235cc39f11e46738f28de66c6740182c4706R131
Contributor
Author
There was a problem hiding this comment.
We can remove this from here. Based on your previous comment, the install event may take precedence over the message event, so caching at this point may not be useful.
Contributor
There was a problem hiding this comment.
No change has been made here, was the this cache call still necessary?
Contributor
Author
There was a problem hiding this comment.
Sorry, I think I missed replying to this comment earlier.
Actually, we could say this isn’t strictly necessary if we’re already caching during the message event. However, I added it as an extra step to ensure we don’t miss any offline page–dependent resources that could block offline rendering or PWA offline tracking.
I don’t think this call will increase the cache size, as the resources will only be overwritten if they’re the same.
But we are in the way of optimizing code - so may be we will remove it
…nstall event changes
* WS-1838 adding tracking flag * WS-1838 adding tracking flag * updating due to comments * small update for offline hooks * updating hooks offline tracking * update offline flag to work properly * removing nextjs static assets to avoid loop reloadand some other fixes * WS-1826-collapsible-nav-for-seo * Updating unit tests * Updating unit tests nr2 * Updating unit tests nr3 * Removing right line in top nav * Fix onload condition for promo images & add blurred bg * Add isPortraitImage condition back * Move css into separate component, apply changes to MAPs * Add changes to hierarchical grid & billboard, update selectors * Make blurred background image src smaller * Fix invalid ichef image size * Prevent any fetching on lite site pages * Add stories, add isLite condition to LatestMediaSection * Add aria-hidden to BlurredBackground * Remove onLoad fix * Linting * Add fallback if ichef url fails * Update curations test * Update integration test snapshots * Revert mundo fixture * Remove isLite prop drilling, add RequestContext to BlurredBackround component * Linting * Fix stories * Fix src url * Fix LatestMediaSection styles * Add dark filter over background to make image stand out more * WS-1882 - Remove hover/focus colour on TopicTags (#13553) * WS-NA: Removes trailing comma if final contibutor has no role or location * added route for homepages as well as condition for page type header * added unit tests * updated structure of data fetch * called Homepage component to render it * renamed folder to homepage and homepage return in derived page type * removed toggles * added variant support to derivePageType utility [copilot] * added unit tests for homepage derived type * removed unneccessary keys * moved shouldRender function into utilites folder and updated imports * removed redundant props * updated shouldRender imports * fixed imports again * updated imports again * removed unused props * reinstated required props * updated cache control * updated unit tests * removed amp as it is not supported in home pages * Add test * updated readme * WS-1175: Removes optimizely dependency from article readtime * WS-1175: Refactor ReadTime component * WS-1175: Fix react issue * WS-1175: Move translations check higher up the tree * WS-1175: Reverts passing translations as prop * WS-1175: Tidy up code labelled with experiment comments * WS-1175: Fix stories and styles * WS-1175: Tidies * cache was missing * adding tests * Update index.tsx * Fix onload condition for promo images & add blurred bg * Move css into separate component, apply changes to MAPs * added route for homepages as well as condition for page type header * renamed folder to homepage and homepage return in derived page type * removing unrelated * removing unrelated * removing unrelated * removing unrelated * removing unrelated * updating audit * removing ref * simplefying offline tracking logic * upgraded the cachename in sw to see updated offlinepage * putting logs and removed isONline check from useOfflinePageFlag hook * sw changes for nextjs bundling/cache resorucing * updating test * revert sw.js to original * update testds * Update src/app/hooks/usePWAOfflineTracking/index.test.tsx Co-authored-by: Andrew Bennett <andrew.bennett07@bbc.co.uk> * updates due to comments * updates due to comments * updates due to comments * updates due to comments * Adding console logs to help debug event tracking issues * prefetching offline page in client side for js chunks pre-caching * revert prefetch , remove filtering in cache of resources * revert sw changes, removed logs * EffectiveNetworkType import issue fix * fix: undefined variable --------- Co-authored-by: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk> Co-authored-by: jinidev <jinimol.joseph.ext@bbc.co.uk> Co-authored-by: Santa Zena <santa.zena.ext@bbc.co.uk> Co-authored-by: hotinglok <hotinglok@gmail.com> Co-authored-by: Aaron Moore <aaron.moore@bbc.co.uk> Co-authored-by: Isabella-Mitchell <i.mitchell.0707@gmail.com> Co-authored-by: Nabeel Khan <nabeel.khan@bbc.co.uk> Co-authored-by: Andrew Bennett <andrew.bennett07@bbc.co.uk>
elvinasv
changed the title
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