Fixed issue where service-worker installing might crash the whole site

public/service-worker.js

@@ -6,24 +6,60 @@ var STATIC_CACHE_URLS = ["/"];
 
 console.log("Nåværende versjon:", version);
 self.addEventListener("activate", event => {
-  event.waitUntil(
-    new Promise(resolve => {
-      const applicationServerKey = urlB64ToUint8Array(__PUBLICKEY__);
-      const options = { applicationServerKey, userVisibleOnly: true };
-      self.registration.pushManager.subscribe(options).then(subscription =>
-        saveSubscription(subscription)
-          .then(() => {
-            resolve();
-          })
-          .catch(() => {
-            resolve();
-          })
-      );
-    })
-  );
+  console.log("Aktiverer");
+
   event.waitUntil(removeCache(CACHE_NAME));
   event.waitUntil(removeCache(CACHE_NAME_API));
   event.waitUntil(addCache(CACHE_NAME, STATIC_CACHE_URLS));
+  event.waitUntil(
+    new Promise((resolve, reject) => {
+      const applicationServerKey = urlB64ToUint8Array(__PUBLICKEY__);
+      const options = { applicationServerKey, userVisibleOnly: true };
+      self.registration.pushManager
+        .subscribe(options)
+        .then(subscription =>
+          saveSubscription(subscription)
+            .then(() => {
+              resolve();
+            })
+            .catch(() => {
+              resolve();
+            })
+        )
+        .catch(() => {
+          console.log("Kunne ikke legge til pushnotifications");
+          resolve();
+        });
+    })
+  );
+});
+
+self.addEventListener("message", event => {
+  if (event.data === "updatePush") {
+    event.waitUntil(
+      new Promise((resolve, reject) => {
+        const applicationServerKey = urlB64ToUint8Array(__PUBLICKEY__);
+        const options = { applicationServerKey, userVisibleOnly: true };
+        self.registration.pushManager
+          .subscribe(options)
+          .then(subscription =>
+            saveSubscription(subscription)
+              .then(() => {
+                const channel = new BroadcastChannel("updatePush");
+                channel.postMessage({ success: true });
+                resolve();
+              })
+              .catch(() => {
+                resolve();
+              })
+          )
+          .catch(() => {
+            console.log("Kunne ikke legge til pushnotifications");
+            reject();
+          });
+      })
+    );
+  }
 });
 
 self.addEventListener("push", function(event) {

src/Vinlottis.vue

@@ -17,6 +17,13 @@ export default {
   mounted() {
     console.log("SNEAKY PETE!");
     if ("serviceWorker" in navigator) {
+      const channel = new BroadcastChannel("updatePush");
+      channel.addEventListener("message", event => {
+        if (event.data.success) {
+          localStorage.setItem("push", true);
+        }
+      });
+
       navigator.serviceWorker
         .register("/service-worker.js")
         .then(serviceWorker => {
@@ -24,6 +31,8 @@ export default {
             "Arbeids arbeideren din er installert. Du kan nå gå offline frem til neste trekning."
           );
 
+          // From your client pages:
+
           serviceWorker.onupdatefound = () => {
             const installingWorker = serviceWorker.installing;
             installingWorker.onstatechange = () => {
@@ -44,6 +53,9 @@ export default {
             if (permission !== "granted") {
               throw new Error("Permission not granted for Notification");
             }
+            if (localStorage.getItem("push") == null) {
+              this.sendMessage("updatePush");
+            }
           });
         })
         .catch(error => {
@@ -53,7 +65,39 @@ export default {
   },
   computed: {},
 
-  methods: {}
+  methods: {
+    sendMessage: function(message) {
+      // This wraps the message posting/response in a promise, which will
+      // resolve if the response doesn't contain an error, and reject with
+      // the error if it does. If you'd prefer, it's possible to call
+      // controller.postMessage() and set up the onmessage handler
+      // independently of a promise, but this is a convenient wrapper.
+      return new Promise(function(resolve, reject) {
+        var messageChannel = new MessageChannel();
+        messageChannel.port1.onmessage = function(event) {
+          if (event.data.error) {
+            reject(event.data.error);
+          } else {
+            resolve(event.data);
+          }
+        };
+
+        // This sends the message data as well as transferring
+        // messageChannel.port2 to the service worker.
+        // The service worker can then use the transferred port to reply
+        // via postMessage(), which will in turn trigger the onmessage
+        // handler on messageChannel.port1.
+        // See
+        // https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage
+        if (navigator.serviceWorker.controller == null) {
+          resolve();
+        }
+        navigator.serviceWorker.controller.postMessage(message, [
+          messageChannel.port2
+        ]);
+      });
+    }
+  }
 };
 </script>