parsley/app/views/home/sw.js.erb

<%
  pack_assets = [asset_pack_path("application.js"), asset_pack_path("application.css")].select { |a| a.present? }
%>

var cacheName = "parsley-cache-<%= File.mtime(Webpacker::manifest.config.public_manifest_path).to_i %>";

var staticAssets = [
  "/"
  <% pack_assets.each do |a| %>
    ,"<%= a %>"
  <% end %>
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function (cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(staticAssets);
    })
  );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(keyList.map(function (key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});

self.addEventListener('fetch', function(event) {
  var reqUrl = new URL(event.request.url);
  var isCacheThenNetwork = event.request.headers.get("Cache-Then-Network") === "true";
  var x, asset;

  // Cache-first response for static assets
  for (x = 0; x < staticAssets.length; x++) {
    asset = staticAssets[x];
    if (asset === reqUrl.pathname) {
      event.respondWith(
        caches.match(event.request).then(function (response) {
          return response || fetch(event.request);
        })
      );
      return;
    }
  }

  // If the 'CacheThenNetwork' header is set, hit the network, cache the page, and return the response
  if (isCacheThenNetwork) {
    event.respondWith(caches.open(cacheName).then(function (cache) {
      return fetch(event.request)
        .then(function (response) {
          cache.put(event.request, response.clone());
          return response;
        });
    }));

    return;
  }

  // Network, falling back to cache by default to support offline browsing of any cached resources
  event.respondWith(caches.open(cacheName).then(function(cache) {
    return fetch(event.request)
      .then(function(response) {
        cache.put(event.request, response.clone());
        return response;
      })
      .catch(function() {
        return caches.match(event.request);
      });
  }));

});

self.addEventListener('message', function (event) {
  if (event.data === "skipWaiting") {
    self.skipWaiting();
  }
});