How to update the service worker cache in PWA?

Question

I am using a service worker with the sw-toolbox library . My PWA caches everything except API requests (images, css, js, html). But what if some files are changed someday. Or what if service-worker.js is changed. How should an application know about file changes?

My service-worker.js:

'use strict'; importScripts('./build/sw-toolbox.js'); self.toolbox.options.cache = { name: 'ionic-cache' }; // pre-cache our key assets self.toolbox.precache( [ './build/main.js', './build/main.css', './build/polyfills.js', 'index.html', 'manifest.json' ] ); // dynamically cache any other local assets self.toolbox.router.any('/*', self.toolbox.cacheFirst); // for any other requests go to the network, cache, // and then only use that cached resource if your user goes offline self.toolbox.router.default = self.toolbox.networkFirst; 

I do not know what is the usual cache update method in PWA. Perhaps PWA should send an AJAX request in the background and check the user interface version?

Answer 1

AFAIK sw_toolbox does not have a network update cache strategy. This is really what you want, I think. Do you want to change the cache network race strategy → https://jakearchibald.com/2014/offline-cookbook/#cache-network-race Instead of just letting the losers disappear as soon as the network responds, you will want to update the client. This is a bit more advanced that I have the time or the time to explain here. I would post a message to the client so that he knows that there is an update. You can warn the user about an update or simply force an update. I do not think this is an edge, but a very common, but extended scenario. I hope to publish a more detailed solution in the near future.

Answer 2

There is a good solution written here where he states (in a nutshell) that he either does not use the cache strategy or updates the UX template to display "Update for recent updates."

Answer 3

I dealt with service workers without using any library, and the solution I came across included some server-side code and some client side. Strategy in a Nutshell

First, the variables you will need, and where:

• There is a “service working version” variable on the server side (put this in a database or configuration file if you use something like php that will be updated immediately on the server side without requiring redeployment . Let us call it serverSWVersion
• On one of the javascript files, the cache (I have a javascript file dedicated to this) has a global variable, which will also be a “working worker version”. Let me call it clientSWVersion

Now, how to use two:

• Whenever a person lands on a page, you make an ajax call to your server to get the serverSWVersion value. Compare this with the value of clientSWVersion .

• If the values ​​are different, it means that the version of your web application is not the latest.

• If so, unregister the worker and refresh the page so that the work service is registered and new files are cached.

What to do when a new file is available

• Update the serviceSWVersion and clientSWVersion variables and upload them to the server, where applicable.

• When a person visits you again, the working service must be registered and all cached files will be restored.

I provided the code on the php server side, which I used when implementing this strategy. He should show you the principles. Just release the Exercise folder in the htdocs php server and it should work without having to do anything else. I hope you find this useful ... And remember that you can simply use the database instead of the configuration file to store the working variable of the working server on the server side if you use some other server instead of php:

Mail file with the code: ServiceWorkerExercise.zip

Answer 4

change self.toolbox.router.any ('/', self.toolbox.cacheFirst); to self.toolbox.router.any ('/', self.toolbox.fastest);