How to present an “Update available” banner for a Progressive Web App (PWA) that uses Service Workers?

Credits: Image by Montu Yadav: https://dribbble.com/montu

I like to give a bit more context with a background story. If you are only interested in the solution feel free to skip all the way down to the ‘how to’ section.

Background

With the rework of the Safari webbrowser in iOS 15, you will notice that the fine line between web and native apps begins to fade even more. This has to do with the theme-color and the way the UI blends into the website. You can push it even further by removing the browser UI all together by adding the website to your home screen using the ‘Add to Home Screen’ option.

iOS 15 Beta showing the minimalistic UI in the Safari browser (Subject to change)

One way to deliver a more native-app-like experience is that we are able to cache our website using techniques in HTML5, this gives us a number of great advantages:

1. Offline use — users can use the application even without an internet connection.
2. Speed — cached resources will make sure your application loads a lot faster and feels more responsive.
3. Reduced server load — the browser will only download updates resources from the server.