title: Service worker update event trigger
body: <p>Following this link <a href="https://github.com/deanhume/pwa-update-available" rel="nofollow noreferrer">https://github.com/deanhume/pwa-update-available</a>, I am trying to implement the service worker update, but I am facing issues like the event update is not getting triggered, which I think is related to my app design, which basically a SPA, means I am always on index.html,which behaves like app-shell and I am pushing the contents in the contents area, depending upon which button is clicked.</p>
  
  <p>only other page is login/index.html</p>
  
  <p>the contents for app.js to install/update service worker is like this:</p>
  
  <pre><code>let newWorker;
            function showUpdateBar() {
              let snackbar = document.getElementById('snackbar');
              snackbar.className = 'show';
            }
            // The click event on the pop up notification
            document.getElementById('reload').addEventListener('click', function(){
              newWorker.postMessage({ action: 'skipWaiting' });
            });
            if ('serviceWorker' in navigator) {
              navigator.serviceWorker.register('/pwa/sw.js').then(reg =&gt; {
                console.log( 'ServiceWorker registration successful with scope: ', registration.scope );
                reg.addEventListener('updatefound', () =&gt; {
                  // A wild service worker has appeared in reg.installing!
                  newWorker = reg.installing;
                  newWorker.addEventListener('statechange', () =&gt; {
                    // Has network.state changed?
                    switch (newWorker.state) {
                      case 'installed':
                        if (navigator.serviceWorker.controller) {
                          // new update available
                          showUpdateBar();
                        }
                        // No update available
                        break;
                    }
                  });
                });
              });
              let refreshing;
              navigator.serviceWorker.addEventListener('controllerchange', function () {
                if (refreshing) return;
                window.location.reload();
                refreshing = true;
              });
            }  
  </code></pre>
  
  <p>and sw.js file contents are like this:</p>
  
  <pre><code>var cacheName = 'v28';
  
  self.addEventListener('install', event =&gt; {
    event.waitUntil(
      caches.open(cacheName)
        .then(cache =&gt; cache.addAll([
          "/pwa/index.html",
          "/pwa/main.css",
          "/pwa/js/app/app.js",
          "/pwa/js/app/libs/api.js",
          '/pwa/query.js',
          '/pwa/js/libs/localforage.min.js',
          '/pwa/js/libs/utils.js'
        ]))
    );
  });
  
  
  
  self.addEventListener('message', function (event) {
    if (event.data.action === 'skipWaiting') {
      self.skipWaiting();
    }
  });
  
  // Allow sw to control of current page
  self.addEventListener('activate', event =&gt; {
    console.log('Activating new service worker...');
  
    const cacheWhitelist = [cacheName];
  
    event.waitUntil(
      caches.keys().then(cacheNames =&gt; {
        return Promise.all(
          cacheNames.map(cacheName =&gt; {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
  
  self.addEventListener('fetch', function (event) {
    event.respondWith(
      caches.match(event.request)
        .then(function (response) {
          if (response) {
            return response;
          }
          return fetch(event.request);
        })
    );
  });
  </code></pre>
  
  <p>the partial-contents of index.html:</p>
  
  <pre><code>&lt;div id="snackbar"&gt;A new version of this app is available. Click &lt;a id="reload"&gt;here&lt;/a&gt; to update.&lt;/div&gt;
  </code></pre>
  
  <p>so basically the issue I am facing is, triggering the update, when I am changing the version number like v28 to v29 and reload the page, I am getting the prompt, but I am not getting the prompt even when I logout, login or exit and reopen the app.</p>
  
  <p>How I can fix this?</p>
  
  <p>Note:PWA is my progressive app folder, I am using php/yii2 as backend and not using node server or other JS framework.</p>