Moved some files around, improved how notifications are being requested, and improved activation and installation-flow of serviceworker

src/Vinlottis.vue

@@ -2,103 +2,49 @@
   <div class="app-container">
     <banner />
     <router-view />
+    <UpdateToast
+      v-if="showToast"
+      :text="toastText"
+      :refreshButton="refreshToast"
+      v-on:closeToast="closeToast"
+    />
   </div>
 </template>
 
 <script>
+import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin";
 import banner from "@/ui/Banner";
+import UpdateToast from "@/ui/UpdateToast";
+
 export default {
   name: "vinlottis",
-  components: { banner },
+  components: { banner, UpdateToast },
   props: {},
   data() {
-    return {};
+    return {
+      showToast: false,
+      toastText: null,
+      refreshToast: false
+    };
   },
   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 => {
-          console.log(
-            "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 = () => {
-              if (
-                installingWorker.state === "installed" &&
-                navigator.serviceWorker.controller
-              ) {
-                // Preferably, display a message asking the user to reload...
-                location.reload();
-              }
-            };
-          };
-
-          if (!("PushManager" in window)) {
-            throw new Error("No Push API Support!");
-          }
-          window.Notification.requestPermission().then(permission => {
-            if (permission !== "granted") {
-              console.log(
-                "Du valgte å ikke ha arbeids-arbeideren til å sende deg dytte-meldinger :'('"
-              );
-              return;
-            }
-            if (localStorage.getItem("push") == null) {
-              this.sendMessage("updatePush");
-            }
-          });
-        })
-        .catch(error => {
-          console.error("Arbeids arbeideren klarer ikke arbeide.", error);
-        });
-    }
+    this.$on("service-worker-updated", () => {
+      this.toastText = "Det er ny oppdatering av siden, vil du oppdatere?";
+      this.showToast = true;
+      this.refreshToast = true;
+    });
+    this.$on("push-allowed", () => {
+      this.toastText = "Push-notifications er skrudd på!";
+      this.refreshToast = false;
+      this.showToast = true;
+    });
   },
   computed: {},
-
+  mixins: [ServiceWorkerMixin],
   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
-        ]);
-      });
+    closeToast: function() {
+      this.showToast = false;
     }
   }
 };