Service Workers

installer.js

/** 
 * If there are service workers available to us, then on window load we can register our worker
 */
'serviceWorker' in navigator && window.addEventListener('load', () => {
  navigator.serviceWorker.register('worker.js')
    .then(() => {
      // Registration was successful
      console.log('ServiceWorker registration successful!');
    }, (err) => {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
});

service-worker-fetch.js

// Fires when the browser trys to fetch any asset
self.addEventListener('fetch', (event) => {
  event.respondWith(
    // check if the asset is one we are saving/watching
    caches.match(event.request).then((eventRequest) => {
      return eventRequest || fetch(event.request).then((response) => {
        // try to open the cache, but fall back on the request if we can't open the cache
        return caches.open(CACHE_NAME)
          .then((cache) => {
            // replace the request with the cache's content
            cache.put(event.request, response.clone());
            return response;
          });
      });
    });
  );
});

service-worker.js

// This gets updated on new builds!
const CACHE_NAME = `Cache_${__SERVICE_WORKER_V__}`;

const urlsToCache = [
  ...
];

// Perform install steps of adding all defined assets to the cache
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache));
  );
});

  

webpack.config.js

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    // This is for auto updating the service worker version on builds
    new webpack.DefinePlugin({
      __SERVICE_WORKER_V__: Date.now()
    })
  ],
  // ...
};