PWA: Strategies to use Fastboot together with service worker

Some time ago we added ember-service-worker and its plug-ins to our app to make it a PWA. Since then the service worker is happily caching our index.html file and all of the apps assets. To work around the issue of delivering new app versions to our clients, we made use of ember-service-worker-update-notify. Now, if a new deployment takes place and then a user visits the site again, they will see the old version and a notification after some delay that they can update the app by clicking a button.

Now that we also added fastboot, this concept not only is quite cumbersome from the users perspective, it also does not make too much sense, as fastboot already delivers the page in a timeline manner. Instead I would prefer to just load the server rendered page (we can still facilitate caching through etag if needed and offline capabilities here) and if necessary load the much bigger payload of assets in the background.

So essentially, the biggest pain point here is that we can not just load a new version when the user visits the site, but the user sees the old version and after a delay is prompted to reload.

I looked around in various older issues within ember-service-worker and its plug-ins, but mostly it seems that this does not seem to be supported. Some resources point to an app shell, but I am having doubts that this really is the best way to move forward in this situation.

Has anyone managed to create such loading behaviour with an ember app that is a PWA? What did you end up using?

Would removing cache of index.html get you what you need? Keeping the cache of all the other assets?

ah, that’s an interesting idea. Moving index.html to service-worker-cache-fallback might do the trick. I’ll report back how that goes.

I gave all that some thought, but pretty much quickly dropped it again, as often the index.html might be accessed under a different name. So I decided to be a good citizen and created another plug-in for ember-service-worker to serve the cached index.html as a fallback: