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

@@ -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(

src/service-worker.js

@@ -2,9 +2,6 @@
 //     debug: true
 // });
 
-self.skipWaiting();
-console.log("Skiping Waiting");
-
 self.addEventListener("push", function (event) {
   if (event.data) {
     var data = event.data.json();
@@ -26,6 +23,7 @@ self.addEventListener("push", function(event) {
 
 self.addEventListener("notificationclick", function (event) {
   if (event.notification) {
+    if (data.data) {
       var data = JSON.parse(event.notification.data.data);
       if (data[event.action]) {
         console.log(data);
@@ -33,8 +31,15 @@ self.addEventListener("notificationclick", function(event) {
         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, {});