Fixed service worker

Gemfile.lock

@@ -203,7 +203,7 @@ GEM
     thread_safe (0.3.6)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    tzinfo-data (1.2019.2)
+    tzinfo-data (1.2019.3)
       tzinfo (>= 1.0.0)
     unitwise (2.2.0)
       liner (~> 0.2)

Procfile

@@ -0,0 +1,2 @@
+rails: bundle exec rails s -b 0.0.0.0
+webpacker: bin/webpack-dev-server

app/javascript/lib/ServiceWorker.js

@@ -1,25 +1,36 @@
 
 function trackInstall(worker, cb) {
   worker.addEventListener('statechange', function() {
-    //If the worker is now installed, let the user know that there is an update ready
     if (worker.state == 'installed') {
       cb();
     }
   });
 }
 
+function trackActive(worker, cb) {
+  worker.addEventListener('statechange', function() {
+    if (worker.state == 'activated') {
+      cb();
+    }
+  });
+}
+
 export function swUpdate() {
   navigator.serviceWorker.getRegistration().then(reg => {
     if (reg && reg.waiting) {
+      trackActive(reg.waiting, () => window.location.reload(true));
       reg.waiting.postMessage("skipWaiting");
+    } else {
       window.location.reload(true);
     }
   });
+
 }
 
 export function swInit(store) {
 
   const updateReady = () => store.commit("setUpdateAvailable", true);
+  const clearUpdateReady = () => store.commit("setUpdateAvailable", false);
 
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js')
@@ -27,17 +38,15 @@ export function swInit(store) {
         console.log('Registration succeeded. Scope is ' + reg.scope);
 
         if (reg.waiting) {
+          console.log('waiting');
           updateReady();
-        }
+          trackActive(reg.waiting, clearUpdateReady);
-
-        // If there's an updated worker installing, track its progress. If it becomes "installed", call
-        // indexController._updateReady()
-        if (reg.installing) {
-          trackInstall(reg.installing, updateReady);
         }
 
         reg.addEventListener('updatefound', function () {
-          trackInstall(reg.installing, updateReady);
+          if (reg.active) {
+            trackInstall(reg.installing, updateReady);
+          }
         });
 
       }).catch(function (error) {

app/javascript/packs/application.js

@@ -63,7 +63,6 @@ Vue.use(VueProgressBar, {
 Vue.use(VueResize);
 
 sync(store, router);
-swInit(store);
 responsiveSync(store);
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -76,6 +75,9 @@ document.addEventListener('DOMContentLoaded', () => {
     store,
     router,
     render: createElement => createElement('App'),
+    mounted() {
+      this.$nextTick(() => swInit(store));
+    },
     components: { App }
   });
 });

app/views/home/sw.js.erb

@@ -24,6 +24,7 @@ self.addEventListener('install', function(event) {
 });
 
 self.addEventListener('activate', function(event) {
+  self.clients.claim();
   event.waitUntil(
     caches.keys().then(function (keyList) {
       return Promise.all(keyList.map(function (key) {