title: Force Service Worker Update on First Visit from User, not Second Visit from User
body: <p>I've recently started to delve into service workers and the related strategies. There seems to be some confusion in my mind, or if I'm understanding them correctly, something of a flaw in the entire API — the issue being that when you make a change to your <code>serviceworker.js</code> file (i.e. change a version number in this file because you've made changes to your website), the user has to then visit the site twice to see the changes? Once to register and install the new service worker, and a second time to activate it (i.e access the new cache).</p>
  
  <p>Now in the real world if there is an issue on your site, whether it be broken link, a javascript error, or the wrong info in a blog post etc, when a user comes back to that site for the first after you've made the fix, there's no way of them seeing this fix unless they come back a second time? Even though you've made the changes?</p>
  
  <p>I mean, this can't be true...surely?</p>
  
  <p>CODE THAT I'M USING </p>
  
  <pre><code>var preCacheList = [
  "/", "index.html", "work.html", "contact.html", "style.css", "js/main.js"
  ];
  
  var CACHE_STATIC_NAME = 'static-v1.4';
  var CACHE_DYNAMIC_NAME = 'dynamic-v1.4';
  
  self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  event.waitUntil(
      caches.open(CACHE_STATIC_NAME)
      .then(function(cache) {
          console.log('[Service Worker] Precaching App Shell');
          cache.addAll(preCacheList);
      })
  )
  });
  
  self.addEventListener('activate', function(event) {
      console.log('[Service Worker] Activating Service Worker ....', event);
      event.waitUntil(
      caches.keys()
          .then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
              if (key !== CACHE_STATIC_NAME &amp;&amp; key !== CACHE_DYNAMIC_NAME) {
              console.log('[Service Worker] Removing old cache.', key);
              return caches.delete(key);
              }
          }));
          })
      );
      return self.clients.claim();
  });
  
  self.addEventListener('fetch', function(event) {
      event.respondWith(
      caches.match(event.request)
          .then(function(response) {
              if (response) {
                  return response;
              } else {
                  return fetch(event.request)
                  .then(function(res) {
                      return caches.open(CACHE_DYNAMIC_NAME)
                      .then(function(cache) {
                          cache.put(event.request.url, res.clone());
                          return res;
                      })
                  })
                  .catch(function(err) {
  
                  });
              }
          })
      );
  });
  </code></pre>