PWA Webworkers - Check for updates and clear browser cache

Ionic Framework ionic-v3
1

I have an ionic 3 PWA app which is served from via webserver. Each time I update the app I replace the www folder in the webserver with the updated new app. When I update the app I update the widget version in the config.xml as below:


<widget id="au.myapp.App" **version="1.0.8"** xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Note I do not update the version of that the xml tag.

I injected the following webserver script code into my index.html to check for updates by the following this tutorial: PWA: Create a “New Update Available” Notification using Service Workers

<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>My App Platform</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
 
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <script>
      window.isUpdateAvailable = new Promise(function(resolve, reject) {
      // lazy way of disabling service workers while developing
      if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) {
        // register service worker file
        navigator.serviceWorker.register('service-worker.js')
          .then(reg => {
            console.log('Check New Update');
            reg.onupdatefound = () => {
              console.log('New Update Available');
              const installingWorker = reg.installing;
              installingWorker.onstatechange = () => {
                switch (installingWorker.state) {
                  case 'installed':
                    if (navigator.serviceWorker.controller) {
                      // new update available
                      resolve(true);
                    } else {
                      // no update available
                      resolve(false);
                    }
                    break;
                }
              };
            };
          })
          .catch(err => console.error('[SW ERROR]', err));
      }
    });
  </script>
  <link href="build/main.css" rel="stylesheet">`

The thing is it doesn’t work when I update the version. That is the webrowser just loads the cached app and doesn’t not update to the new version. I don’t even get the console.log('Check New Update') firing.

What am I doing wrong? Any practical tutorials to achieve this? Many thanks in advance.

1 Like
2

I would suggest to try to use sw-toolbox instead of workbox, for me it gave me better results to handle the bundle cache in case I would deploy a new version

p.s.: In case of Angular v6, no need of both, Angular

3

Thanks for this, to be perfectly I think I will wait for Ionic 4/Angular v6 and take it on there as it seems like a lot simpler solution. Do you know how to disable the caching of the web-app?

4

If you don’t want cache then I cache you could “just” not use service-worker and set the pragma cache values in your index.html as you would do for a website I guess

1 Like
5

Please check if condition where it is disabling serviceworker for dev environment.
i believe you need to remove this so that it can work in local environment