title: Cache Versioning on Progressive Web Apps
body: <p>What is the current best practice for service worker caching?</p>
  
  <p>After using service workers and caching for a number of projects, we are having a bit of a maintenance headache to manage the cached assets for the project.</p>
  
  <p>In most cases we are using a static cache (most likely the cause of our headache) and our sw.js code is pretty standard and looks as follows:</p>
  
  <pre><code>var cacheName = 'v1:static';
  
  // cache static assets during install phase
  self.addEventListener('install', function (e) {
      e.waitUntil(
          caches.open(cacheName).then(function (cache) {
              return cache.addAll([
                  './',
                  './css/style.css',
                  './css/vendor.css',
                  './js/build/script.min.js',
                  './js/build/vendor.min.js'
              ]).then(function () {
                  self.skipWaiting();
              });
          })
      );
  });
  
  self.addEventListener('fetch', function (event) {        
      event.respondWith(
          caches.match(event.request).then(function (response) {
              if (response) {
                  // retrieve from cache
                  return response;
              }
              // fetch as normal
              return fetch(event.request);
          })
      );
  });
  </code></pre>
  
  <p>The problems begin once we release a new version of our app and we need to invalidate the cache for the user. </p>
  
  <p>What methods are recommended to update the cache? I am aware of <a href="https://github.com/GoogleChrome/sw-precache" rel="nofollow">sw-precache</a> or developers who manually update the cacheName variable (or perhaps through a task-runner). Are there other alternatives? Is there a way to only invalidate one file instead of the entire cache?</p>
  
  <p>Thanks</p>