PWA - How to update cached javascript

Ionic Framework ionic-v3
1

Hi,

So I’m trying to figure out this service worker thing for a PWA. It works great at caching the resources, however they never get updated, so I’m running on an old version of the app all the time (Unless I open developer tools and remove the service worker, then reload and install another one).

I’ve read some documentation here and there about them, but I haven’t found anything very concrete.

I’m just using the default service-worker.js bundled with the Ionic2 Starter as a guide.

So I guess my first question is how to I update the resources that are precached?. The main.js, main.css, polyfill.js, index.html etc.

Can the service worker just check for updates in the background for these and notify me somehow?

Also the link to the sw-toolbox documentation in the base app is incorrect https://googlechrome.github.io/sw-toolbox/docs/master/index.html found here https://github.com/driftyco/ionic2-app-base/blob/master/src/service-worker.js

Any help would be appreciated or pointers to good documentation.

I have to say, the precaching does seem to speed the load time of the PWA, it just starts right up! and on desktop it is near instant…

What would be ideal is if the resources were updated in the background, then the user got a notice to update?

4 Likes
2

I’ve got this same problem in dev mode. After I make a change, webpack will rebuild/update the project and my page on localhost:8100 will reload…the cached version.

On OSX/Chrome, I can hit cmd-shift-R to do a “Hard Reload” and get my updated page. But it’s an extra, annoying step. Is there a better way to update in dev mode?

3

I changed my build script to not use service workers for dev mode. They just get in the way there. I can see 2 initial use cases in PWAs for them. 1) To allow offline. 2) To speed loading time, as it loads from the cache and doesn’t check the network.

Regarding updates, I found a good starting resource here…

What this does is check for an updated service worker. A service worker is considered to be updated if it is not byte identical.

So each time there is an update in your app, you need to make a change to your service-worker.js file. Then the service worker check will notice there is an update and install the new service worker.

This alone though isn’t enough to update the app.

After the new server worker is installed, it can’t be activated until the old service worker stops. This happens after your page has closed. I found in Chrome that reloading the page often isn’t enough, you need to close and open it again so the current service worker stops.

I’m still figuring it out… but it isn’t as simple or magical as I initially hoped!. I wanted a drop in app boost and offline support script… it does achieve that, but it doesn’t work quite that magically out of the box :).

Some other gotchas I’ve found… when deploying on the web, check the cache times. I’m not sure on specifics, but sometimes the service worker seems to check against a cached version, and so doesn’t see the update.

The other thing I’ve had happen is that the service worker updates, then pulls in resources that are cached. So the app doesn’t actually update (but the service worker has updated). I think for me this was a CDN issue with some resources updated in the CDN cache, and other a few seconds behind… but the result was catastrophic, and reloading the app doesn’t fix it because the service worker pre-caches and never checks again until you install a new service worker…

So from my limited experience, if I had any advice, it is only use it if you are sure you want it :)… and there are gotchas!

I’m sure the Ionic team will improve support for service workers… they seem to be set on PWAs, and service workers are quite essential there.

1 Like
4

Thanks for all this great info. My current project will also be an PWA besides the hybrid apps.

In the current condition the serviceworker is not a big help because the first version is cached and everything after will be ignored, if you don’t make a hard reset.

Are there some helpers like add a special hash to every file that changes so the user is sure to get the latest version? To have something like this as a webpack plugin with ionic out of the box would be great. If I find something I will report back :slight_smile:

EDIT:
I am stupid, I was just experiencing the normal browser cache. To use the servicworker one has to uncomment the following in the index.html

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->