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">
@@ -9,9 +13,11 @@
           </div>
           <div class="item-details">
             <div>
-              <h5 style="display: inline-block;">{{game.name}}</h5>
+              <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>
@@ -103,4 +109,4 @@ export default {
     }
   }
 };
-</script>
+</script>

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",
@@ -27,15 +27,15 @@ 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') {
+        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) {
-        for (let registration of registrations) {
-          registration.update()
-        }
-      })
+      window.location.reload();
+      console.log("Reloading After Update");
     },
     offline() {
       console.log(
@@ -66,36 +63,47 @@ if (process.env.NODE_ENV === "production") {
   });
 }
 
-
 function subscribeFirebase($registration) {
-  if (Notification.permission === 'granted') {
-    const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null
+  if (Notification.permission === "granted") {
+    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(JSON.stringify({ "token": token }));
+      messaging.getToken().then(function(token) {
+        console.log("Token: ", token);
+        console.log(JSON.stringify({ token: token }));
         //FIX: New URL
-        axios.post('https://api.gabenparadise.com/api/subscribe', {
-          "token": token
-        }, {
-          headers: {
-            'Content-Type': 'application/x-www-form-urlencoded'
-          }
-        }
-        ).then(function (response) {
-          console.log(response);
-        }).catch(function (error) {
-          console.log(error);
-        });
+        axios
+          .post(
+            "https://api.gabenparadise.com/api/subscribe",
+            {
+              token: token
+            },
+            {
+              headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+              }
+            }
+          )
+          .then(function(response) {
+            console.log(response);
+          })
+          .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);
-        event.waitUntil(self.registration.showNotification(data.notification.title, {
-            body: data.notification.body,
-            icon: data.notification.image || null
-        }));
+self.addEventListener("push", function(event) {
+  if (event.data) {
+    var data = event.data.json();
+    var notOptions = {
+      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/");
-    event.waitUntil(promiseChain);
+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]);
+    }
+  }
+  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',
-    workboxPluginMode: 'InjectManifest',
-    themeColor: '#0a0a0a',
-    workboxOptions:{
+    name: "Gaben Paradise",
+    workboxPluginMode: "InjectManifest",
+    themeColor: "#0a0a0a",
+    workboxOptions: {
       swSrc: "src/service-worker.js"
     },
     iconPaths: {
-      favicon32: 'img/icons/favicon-32x32.png',
-      favicon16: 'img/icons/favicon-16x16.png',
-      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
-      maskIcon: 'img/icons/safari-pinned-tab.svg',
-      msTileImage: 'img/icons/msapplication-icon-144x144.png'
+      favicon32: "img/icons/favicon-32x32.png",
+      favicon16: "img/icons/favicon-16x16.png",
+      appleTouchIcon: "img/icons/apple-touch-icon-152x152.png",
+      maskIcon: "img/icons/safari-pinned-tab.svg",
+      msTileImage: "img/icons/msapplication-icon-144x144.png"
     }
   }
-}
+};