Service worker working example

registerServiceWorker.js

// Main service worker controller
function ServiceWorkerController() {
  this._toastsView = new ToastsView();
  this._register();
};

ServiceWorkerController.prototype._register = function() {
  if (!navigator.serviceWorker) return;
  var ServiceWorkerController = this;
  var swUrl = "/${optportalName}/service-worker/service-worker.js";
  navigator.serviceWorker.register(swUrl).then(function(reg) {
    if (!navigator.serviceWorker.controller) {
      return;
    }
    if (reg.waiting) {
      ServiceWorkerController._updateReady(reg.waiting);
      return;
    }
    if (reg.installing) {
      ServiceWorkerController._trackInstalling(reg.installing);
      return;
    }
    reg.addEventListener('updatefound', function() {
      ServiceWorkerController._trackInstalling(reg.installing);
    });
  });
  // Ensure refresh is only called once.
  // This works around a bug in "force update on reload".
  var refreshing;
  navigator.serviceWorker.addEventListener('controllerchange', function() {
    if (refreshing) return;
    window.location.reload();
    refreshing = true;
  });
};
ServiceWorkerController.prototype._trackInstalling = function(worker) {
  var ServiceWorkerController = this;
  worker.addEventListener('statechange', function() {
    if (worker.state == 'installed') {
      ServiceWorkerController._updateReady(worker);
    }
  });
};
ServiceWorkerController.prototype._updateReady = function(worker) {
  var toast = this._toastsView.show("New version available", {
    buttons: ['refresh', 'dismiss']
  });

  toast.answer.then(function(answer) {
    if (answer != 'refresh') return;
    worker.postMessage({action: 'skipWaiting'});
  });
};
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
  new ServiceWorkerController();
});

service-worker.js

var staticCacheName = 'my-domain-cache-v1';

// Cache files
self.addEventListener('install', function (event) {
  event.waitUntil(caches.open(staticCacheName).then(function (cache) {
    return cache.addAll([
      '/js/libs.js',
      '/js/modules/catalog/catalog.js',
      '/js/modules/product/product.js',
      '/js/modules/news/news.js',
      // CSS
      '/css/styles.css',
      '/css/misc-plugins.css',
      // FONTS
      '/fonts/tradegothic/tradegothicltstd_extended.ttf'
      'https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300',
    ]);
  }));
});

// Remove old data/cache
self.addEventListener('activate', function (event) {
  event.waitUntil(caches.keys().then(function (cacheNames) {
    return Promise.all(cacheNames.filter(function (cacheName) {
      return cacheName.startsWith('my-domain-cache-') && cacheName != staticCacheName;
    }).map(function (cacheName) {
      return caches['delete'](cacheName);
    }));
  }));
});

// Serve files from cache
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(staticCacheName).then(function(cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request, {
          mode: 'no-cors'
        }).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

self.addEventListener('message', (event) => {
  if (!event.data){
    return;
  }
  if ('skipWaiting' === event.data.action) {
    self.skipWaiting();
  }
});