Update Function

package.json

@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "firebase": "^7.19.1",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11"
   },

src/App.vue

@@ -10,8 +10,8 @@
       </div>
     </div>
     <Notification />
+    <UpdateBar />
     <GamesList />
-  </div>
 </template>
 
 <style>
@@ -35,18 +35,20 @@ body {
 <script>
 import GamesList from "./components/GamesList.vue";
 import Notification from "./components/Notification.vue";
+import UpdateBar from "./components/UpdateBar.vue";
 
 export default {
   name: "App",
   data() {
     return {
       title: "Gaben Paradise",
-      content: "get information about free games in one place"
+      content: "get information about free games in one place",
     };
   },
   components: {
     GamesList,
-    Notification
-  }
+    Notification,
+    UpdateBar
+  },
 };
 </script>

src/components/Notification.vue

@@ -1,4 +1,5 @@
 <template>
+  <!--Alert Bar-->
   <div v-if="noAlert">
     <div class="alert" :class="alert.color" role="alert">
       {{ alert.text }}

src/components/UpdateBar.vue

@@ -0,0 +1,49 @@
+<template>
+  <!--Notification Bar-->
+  <div v-if="once">
+    <div class="alert alert-danger" role="alert">
+      Update Awailible
+      <button type="button" class="btn btn-primary" v-on:click="refreshApp">Refresh</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      once: false,
+      refreshing: false,
+      registration: null,
+      updateExists: false
+    };
+  },
+  created() {
+    document.addEventListener("swUpdated", () => {
+      console.log(event);
+      console.log(event);
+      console.log(event);
+
+      this.updateAvailable(event);
+      this.once = true;
+    });
+    
+    navigator.serviceWorker.addEventListener("controllerchange", () => {
+      if (this.refreshing) return;
+      this.refreshing = true;
+      window.location.reload();
+    });
+  },
+  methods: {
+    updateAvailable(event) {
+      this.registration = event.detail;
+      this.updateExists = true;
+    },
+    refreshApp() {
+      this.updateExists = false;
+      if (!this.registration || !this.registration.waiting) return;
+      this.registration.waiting.postMessage({ type: "SKIP_WAITING" });
+    }
+  }
+};
+</script>

src/registerServiceWorker.js

@@ -27,10 +27,10 @@ if (process.env.NODE_ENV === "production") {
     ready() {
       console.log(
         "App is being served from cache by a service worker.\n" +
-          "For more details, visit https://goo.gl/AFskqB"
+        "For more details, visit https://goo.gl/AFskqB"
       );
 
-      Notification.requestPermission(function(status) {
+      Notification.requestPermission(function (status) {
         console.log("Status ", status);
         if (status === "granted" && startPermission !== "granted") {
           window.location.reload();
@@ -47,10 +47,11 @@ if (process.env.NODE_ENV === "production") {
     updatefound() {
       console.log("New content is downloading.");
     },
-    updated() {
+    updated(registration) {
       console.log("New content is available; please refresh.");
-      window.location.reload();
-      console.log("Reloading After Update");
+      document.dispatchEvent(
+        new CustomEvent('swUpdated', { detail: registration })
+      )
     },
     offline() {
       console.log(
@@ -75,7 +76,7 @@ function subscribeFirebase($registration) {
         "BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s"
       );
 
-      messaging.getToken().then(function(token) {
+      messaging.getToken().then(function (token) {
         console.log("Token: ", token);
         console.log(JSON.stringify({ token: token }));
         //FIX: New URL
@@ -91,10 +92,10 @@ function subscribeFirebase($registration) {
               }
             }
           )
-          .then(function(response) {
+          .then(function (response) {
             console.log(response);
           })
-          .catch(function(error) {
+          .catch(function (error) {
             console.log(error);
           });
       });

src/service-worker.js

@@ -2,10 +2,7 @@
 //     debug: true
 // });
 
-self.skipWaiting();
-console.log("Skiping Waiting");
-
-self.addEventListener("push", function(event) {
+self.addEventListener("push", function (event) {
   if (event.data) {
     var data = event.data.json();
     var notOptions = {
@@ -24,17 +21,25 @@ self.addEventListener("push", function(event) {
   }
 });
 
-self.addEventListener("notificationclick", function(event) {
+self.addEventListener("notificationclick", function (event) {
   if (event.notification) {
-    var data = JSON.parse(event.notification.data.data);
-    if (data[event.action]) {
-      console.log(data);
-      console.log(data[event.action]);
-      clients.openWindow("" + data[event.action]);
+    if (data.data) {
+      var data = JSON.parse(event.notification.data.data);
+      if (data[event.action]) {
+        console.log(data);
+        console.log(data[event.action]);
+        clients.openWindow("" + data[event.action]);
+      }
     }
   }
   clients.openWindow("/");
 });
 
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting()
+  }
+})
+
 self.__precacheManifest = [].concat(self.__precacheManifest || []);
 workbox.precaching.precacheAndRoute(self.__precacheManifest, {});