PWA: Create a “New Update Available” Notification using Service Workers

Simon Wicki
Jun 12, 2017 · 3 min read

service workers, offline-first, cache busting

New Update available popup.

PWAs are getting more and more coverage and support. They improve the web experience and can load your app instantly with their great ability for HTTP caching (among other things, but this post only covers caching).

The thing with Offline-First is, that you cache all the resources that are needed for launching up the webapp — even your index.html!

Note: No sweat! Browser implementations prevent you from deploying a version that will be cached for all eternity. For instance Chrome treats max-age of 1 day or 1 week or 1 year as 24 hours.

#1 Structure

For example reasons, the 3 needed files are linked to the source of an actual PWA (gamemusicplayer.io) for a clearer understanding.

#2 Why can’t it just load the latest version?

When the browser loads your PWA, it doesn’t know if there is a new version available. It promptly loads the cached assets. There are different cache strategies, depending on your use case.

  • networkOnly – only fetch from network

In 99% of the cases you can decide on 2 user experiences:

  1. Load the page instantly from the cache

Both options are offline-first. The 2nd option, if network is available, will therefore always deliver the most updated version, but with a delay.

If you want to give your users that ⚡️-fast page load experience and notify them when a newer version of their cached version is available, you’d need to hook into the onupdatefound function in your Service Worker.

#3 How to check if your cached files have changed

We can hook into onupdatefound function on the registered Service Worker. Even though you can cache tons of files, the Service Worker only checks the hash of your registered service-worker.js. If that file has only 1 little change in it, it will be treated as a new version.

#3.1 Register service-worker.js

The following code should be inside <script> tags in your index.html. It will add a isUpdateAvailable function to the global scope, so it can later be used as a Promise.

#3.2 Check if update is available

In this example i’m using Ionic 3 to easily display a toast that will tell the user that there has been an update — in case of an update.

#4 Caveats

Problems can arise when you use a hosting service, that automatically adds max-age headers to your resources — especially your service-worker.js.

For instance if you host your PWA over Firebase Hosting, you’ll find this configuration useful.

(Bonus: the public folder is set to ./platforms/browser/www/ because Ionic 3 makes it very easy for PWAs from start to finish!)

#5 Summary

Service Workers aren’t as scary as they seem at first. With the appropriate safety mechanisms in place (never cache more than 24 hours) you can create a great experience for your users without having to change your domain name.

Simon Wicki is a Frontend Developer in Berlin. Passionate and fluent in Vue, Angular, React and Ionic. I love Hybrid Apps and books.

👉 Join me on Twitter to follow my latest updates.

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies.

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies. Discover AngularJS, Ionic & ReactJS progressive web app themes at https://pwathemes.com.

Simon Wicki

Written by

💬 Tech, frontend & non-fiction books 👨‍💻 Ex maker at justwatch.com 🔔 Creator of notyfy.co 🧙‍♂️ Freelancer

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies. Discover AngularJS, Ionic & ReactJS progressive web app themes at https://pwathemes.com.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store