Handling Client Side App Updates (with Service Workers)

In the past month, I have been trying to find good ways to update client side apps. This is very important in the case of hot fixes, and even new features. Nobody wants to tell an angry customer, "Please restart your browser to see the latest changes." In this post I go over how I solved service worker caching and cache busting for older browsers that don't support them.

Two Possible Solutions

• At first, I found that I could trigger a page reload when the service worker is updated, but this has problems. If someone is mid typing and the service worker updated, they would have to retype things, and probably be confused.

• After doing that for a few days, I attempted to display a notice that asked the user to refresh the page with a button to do so. This became annoying if multiple fixes / features were released during the day.

I ended up combining the two to achieve the best of both worlds. Upon updating the service worker, I set a global variable called swUpdate to true. In my <Link /> compo…