Some Tweeks for Notifications

src/components/GamesList.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="row" v-if="isLoaded">
-    <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
+    <div
+      class="col-sm-6 col-md-4 mb-5"
+      v-for="game of games"
+      v-bind:key="game.name"
+    >
       <a :href="game.url">
         <div class="item">
           <div class="item-image">
@@ -11,7 +15,9 @@
             <div>
               <h5 style="display: inline-block;">{{ game.name }}</h5>
             </div>
-            <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
+            <div v-if="game.metacritic != null" class="item-counts">
+              {{ game.metacritic }}%
+            </div>
           </div>
         </div>
       </a>

src/registerServiceWorker.js

@@ -7,7 +7,7 @@ import "firebase/messaging";
 
 var startPermission = Notification.permission;
 if (process.env.NODE_ENV === "production") {
-  if (Notification.permission === 'granted') {
+  if (Notification.permission === "granted") {
     const firebaseConfig = {
       apiKey: "AIzaSyB4IvN1P0u7nWZx96lAKWNix7EOx0tuX48",
       authDomain: "gabenparadise-c658e.firebaseapp.com",
@@ -32,10 +32,10 @@ if (process.env.NODE_ENV === "production") {
 
       Notification.requestPermission(function(status) {
         console.log("Status ", status);
-        if (status === 'granted' && startPermission !== 'granted') {
+        if (status === "granted" && startPermission !== "granted") {
           window.location.reload();
         }
-      })
+      });
     },
     registered($registration) {
       console.log("serwiceworker registered.");
@@ -49,11 +49,8 @@ if (process.env.NODE_ENV === "production") {
     },
     updated() {
       console.log("New content is available; please refresh.");
-      navigator.serviceWorker.getRegistrations().then(function (registrations) {
+      window.location.reload();
-        for (let registration of registrations) {
+      console.log("Reloading After Update");
-          registration.update()
-        }
-      })
     },
     offline() {
       console.log(
@@ -66,36 +63,47 @@ if (process.env.NODE_ENV === "production") {
   });
 }
 
-
 function subscribeFirebase($registration) {
-  if (Notification.permission === 'granted') {
+  if (Notification.permission === "granted") {
-    const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null
+    const messaging = firebase.messaging.isSupported()
+      ? firebase.messaging()
+      : null;
     if (messaging != null) {
       console.log("Service worker has been registered. ", $registration);
       messaging.useServiceWorker($registration);
-      messaging.usePublicVapidKey('BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s');
+      messaging.usePublicVapidKey(
+        "BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s"
+      );
 
       messaging.getToken().then(function(token) {
-        console.log("Token: ", token)
+        console.log("Token: ", token);
-        console.log(JSON.stringify({ "token": token }));
+        console.log(JSON.stringify({ token: token }));
         //FIX: New URL
-        axios.post('https://api.gabenparadise.com/api/subscribe', {
+        axios
-          "token": token
+          .post(
-        }, {
+            "https://api.gabenparadise.com/api/subscribe",
+            {
+              token: token
+            },
+            {
               headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
+                "Content-Type": "application/x-www-form-urlencoded"
               }
             }
-        ).then(function (response) {
+          )
+          .then(function(response) {
             console.log(response);
-        }).catch(function (error) {
+          })
+          .catch(function(error) {
             console.log(error);
           });
       });
     } else {
-      document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell";
+      document.getElementById("sub-identifi").className =
+        "fa fa-bell-slash-o bell";
     }
   } else {
-    document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell";
+    document.getElementById("sub-identifi").className =
+      "fa fa-bell-slash-o bell";
   }
 }

src/service-worker.js

@@ -1,25 +1,40 @@
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-
 // workbox.setConfig({
 //     debug: true
 // });
 
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+self.skipWaiting();
+console.log("Skiping Waiting");
 
-console.log('Loading SW');
 self.addEventListener("push", function(event) {
-    console.log('Received a push message', event);
   if (event.data) {
     var data = event.data.json();
-        console.log(data);
+    var notOptions = {
-        event.waitUntil(self.registration.showNotification(data.notification.title, {
       body: data.notification.body,
       icon: data.notification.image || null
-        }));
+    };
+    if (data.data) {
+      console.log("dataFound");
+      console.log(data.data.data);
+      notOptions.actions = JSON.parse(data.data.actions);
+      notOptions.data = JSON.parse(data.data.data);
+    }
+    event.waitUntil(
+      self.registration.showNotification(data.notification.title, notOptions)
+    );
   }
 });
 
 self.addEventListener("notificationclick", function(event) {
-    const promiseChain = clients.openWindow("https://gabenparadise.com/");
+  if (event.notification) {
-    event.waitUntil(promiseChain);
+    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.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

vue.config.js

@@ -1,17 +1,17 @@
 module.exports = {
   pwa: {
-    name: 'Gaben Paradise',
+    name: "Gaben Paradise",
-    workboxPluginMode: 'InjectManifest',
+    workboxPluginMode: "InjectManifest",
-    themeColor: '#0a0a0a',
+    themeColor: "#0a0a0a",
     workboxOptions: {
       swSrc: "src/service-worker.js"
     },
     iconPaths: {
-      favicon32: 'img/icons/favicon-32x32.png',
+      favicon32: "img/icons/favicon-32x32.png",
-      favicon16: 'img/icons/favicon-16x16.png',
+      favicon16: "img/icons/favicon-16x16.png",
-      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
+      appleTouchIcon: "img/icons/apple-touch-icon-152x152.png",
-      maskIcon: 'img/icons/safari-pinned-tab.svg',
+      maskIcon: "img/icons/safari-pinned-tab.svg",
-      msTileImage: 'img/icons/msapplication-icon-144x144.png'
+      msTileImage: "img/icons/msapplication-icon-144x144.png"
-    }
     }
   }
+};