From 474e417dca46f090fa6dcd73d5641ccae1120aa4 Mon Sep 17 00:00:00 2001
From: Dan Elbert <dan.elbert@gmail.com>
Date: Fri, 13 Sep 2019 10:50:28 -0500
Subject: [PATCH] Fixed service worker

---
 Gemfile.lock                        |  2 +-
 Procfile                            |  2 ++
 app/javascript/lib/ServiceWorker.js | 25 +++++++++++++++++--------
 app/javascript/packs/application.js |  4 +++-
 app/views/home/sw.js.erb            |  1 +
 5 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 Procfile

diff --git a/Gemfile.lock b/Gemfile.lock
index fa806a1..1c6176c 100644
--- a/Gemfile.lock
+++ b/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)
diff --git a/Procfile b/Procfile
new file mode 100644
index 0000000..01802ce
--- /dev/null
+++ b/Procfile
@@ -0,0 +1,2 @@
+rails: bundle exec rails s -b 0.0.0.0
+webpacker: bin/webpack-dev-server
diff --git a/app/javascript/lib/ServiceWorker.js b/app/javascript/lib/ServiceWorker.js
index b17b44f..aa07e1f 100644
--- a/app/javascript/lib/ServiceWorker.js
+++ b/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();
-        }
-
-        // If there's an updated worker installing, track its progress. If it becomes "installed", call
-        // indexController._updateReady()
-        if (reg.installing) {
-          trackInstall(reg.installing, updateReady);
+          trackActive(reg.waiting, clearUpdateReady);
         }
 
         reg.addEventListener('updatefound', function () {
-          trackInstall(reg.installing, updateReady);
+          if (reg.active) {
+            trackInstall(reg.installing, updateReady);
+          }
         });
 
       }).catch(function (error) {
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 895c4ef..deaa138 100644
--- a/app/javascript/packs/application.js
+++ b/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 }
   });
 });
diff --git a/app/views/home/sw.js.erb b/app/views/home/sw.js.erb
index 447d9bf..65af31b 100644
--- a/app/views/home/sw.js.erb
+++ b/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) {