Project for some reusable bits and pieces for PWAs. Experimental.
The main thing I am starting with is exploring and documenting how to get the service worker update flow working perfectly (or well enough).
Comments and improvements welcome.
- I want to get to the bottom of the whole service worker update flow in a simplified test space.
- I want a piece of reusable code that solves the whole problem of handing updates to PWAs.
The simple use case here (which I suspect is the main one) is:
- Publish update to PWA.
- User is notified next time they: reload/restart the simpleUI, or press a 'check for updates' button somewhere in the UI, or the update is discovered because of some kind of periodic background check (I think that's it).
- User is given the option to use the update now or later.
- Updates cannot be rejected indefinitely in PWA land.
- By the time the user hears of the update it has already been installed and is waiting to become active.
- If the user accepts the update the new service worker version is activated and, once this happens, the simpleUI reloads to get itself in sync with the new back end.
- If the user rejects the update they carry on using the old version of the service worker and UI until next time one of the three things mentioned in step 2 happens again.
- At this point they will get the option, again, to accept or reject the update for the time being.
- The fact that they may have rejected an update before should not stop them changing their mind later.
- The only exception to this is when the simpleUI is first accessed and the first version of the service worker is installed
on the user's machine (browser).
- At this point the page ('client') will not be controlled, so any update will activate automatically.
- If an update is found at this point the client must be forced to catch up and become controlled by the new service worker, otherwise we will have a v1 client being served by a v2+ service worker, and things will get increasingly out of whack.
The code here attempt so do all of this as simply as possible.
Have I missed anything, or misunderstood, or made it too complicated?
- Run project using
npm startand goto http://localhost:5001 in Chrome. - Open the dev tools console asap and check the console messages to see what's happening.
- Simulate an upate by adding/removing spaces to/from the end of the
sw.jsfile. - Press the 'Check for updates' button
- Play with accepting and rejecting updates at different times.
- Note what happens if you reject an update when the page is not controlled by a service worker.
