skip to content »

Self updating web page

self updating web page-44

The code inside the file should be updated to respond to the We are almost there!

It got me wondering how I could build something a little similar and it turns out that it is a little tricker than it seems - but it is not impossible!Have you ever been on a website and noticed a popup notification that suggests that there is a new version of the site available?I recently visited Google’s Inbox and noticed a notification a little like the image below.If you aren’t familiar with the code above, I recommend checking out this article for more information - it will take you through the basics and help you understand how service worker caching fits in.At this point in time, if we fire up the web page it will look a little something like the image below.I find it really easy to test my service worker code using Google Chrome and it’s Developer Tools.

If you fire them up and head over to the Application tab and with the Service Workers menu option selected, you should notice your service worker is installed for the current page.

Now that we have determined that there is a new service worker waiting to be installed, we can then display a notification at the bottom of our page notifying the user that there is a new version available.

If you remember the diagram earlier in this article, you’ll remember that we still need to complete steps 3 & 4 in order for our new service worker to start controlling the page.

In this article, I will show you how to add a notification to your site and display it each time that there is a new version of the service worker available.

You’ll also learn how to refresh the page, so that the user is up to date and has the latest version of any cached files.

To do this, we need to update the page and reload the page as soon as the That’s it - you now have a fully working example!