Restruct

src/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="app">
+    <div class="header-top">
+      <div class>
+        <h1 class="display-4">{{ title }}</h1>
+        <p class="lead">{{ content }}</p>
+      </div>
+      <div class>
+        <i id="sub-identifi" class="fa fa-bell-o bell" aria-hidden="true"></i>
+      </div>
+    </div>
+    <div v-cloak>
+      <GamesList />
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+  background: #151515;
+  color: white;
+}
+
+.header-top {
+  display: flex;
+  align-items: space-between;
+}
+
+.bell {
+  font-size: 2.5rem;
+  font-weight: 300;
+  line-height: 2;
+}
+</style>
+
+<script>
+import GamesList from "./components/GamesList.vue";
+
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "Gaben Paradise",
+      content: "get information about free games in one place"
+    };
+  },
+  components: {
+    GamesList
+  }
+};
+</script>

src/components/GamesList.vue

@@ -0,0 +1,106 @@
+<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">
+      <a :href="game.url">
+        <div class="item">
+          <div class="item-image">
+            <img class="item-image-main" :src="game.image" />
+            <img class="item-image-icon" :src="game.platform" />
+          </div>
+          <div class="item-details">
+            <div>
+              <h5 style="display: inline-block;">{{game.name}}</h5>
+            </div>
+            <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div class="d-flex justify-content-center" v-else>
+    <div class="spinner-border" role="status">
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
+.item {
+  height: 100%;
+  background: #222;
+  border-radius: 10px;
+}
+
+.item-image {
+  display: block;
+  padding-bottom: 60%;
+  /* 60% sirky */
+  position: relative;
+}
+
+.item-image-main {
+  border-radius: 10px 10px 0 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+}
+
+.item-image-icon {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 30px;
+  height: auto;
+}
+
+.item-details {
+  padding: 10px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.item-counts {
+  border: 1px solid green;
+  color: green;
+  padding: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+</style>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      isLoaded: true,
+      games: []
+    };
+  },
+  created() {
+    this.getGames();
+  },
+  methods: {
+    getGames() {
+      this.isLoaded = false;
+      axios.get("https://api.gabenparadise.com/api/data").then(response => {
+        console.log(response);
+        if (response.status === 200) {
+          this.isLoaded = true;
+          this.games = response.data;
+        }
+      });
+    }
+  }
+};
+</script>

src/main.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App)
+}).$mount("#app");

src/registerServiceWorker.js

@@ -0,0 +1,101 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker";
+import axios from "axios";
+import firebase from "firebase/app";
+import "firebase/messaging";
+
+var startPermission = Notification.permission;
+if (process.env.NODE_ENV === "production") {
+  if (Notification.permission === 'granted') {
+    const firebaseConfig = {
+      apiKey: "AIzaSyB4IvN1P0u7nWZx96lAKWNix7EOx0tuX48",
+      authDomain: "gabenparadise-c658e.firebaseapp.com",
+      databaseURL: "https://gabenparadise-c658e.firebaseio.com",
+      projectId: "gabenparadise-c658e",
+      storageBucket: "gabenparadise-c658e.appspot.com",
+      messagingSenderId: "338698464238",
+      appId: "1:338698464238:web:da7df8af54802ab19efcff"
+    };
+
+    if (!firebase.apps.length) {
+      firebase.initializeApp(firebaseConfig);
+    }
+  }
+
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+        "For more details, visit https://goo.gl/AFskqB"
+      );
+
+      Notification.requestPermission(function (status) {
+        console.log("Status ", status);
+        if (status === 'granted' && startPermission !== 'granted') {
+          window.location.reload();
+        }
+      })
+    },
+    registered($registration) {
+      console.log("serwiceworker registered.");
+      subscribeFirebase($registration);
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+      navigator.serviceWorker.getRegistrations().then(function (registrations) {
+        for (let registration of registrations) {
+          registration.update()
+        }
+      })
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    }
+  });
+}
+
+
+function subscribeFirebase($registration) {
+  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.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);
+        });
+      });
+    } else {
+      document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell";
+    }
+  } else {
+    document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell";
+  }
+}

src/service-worker.js

@@ -0,0 +1,25 @@
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+
+// workbox.setConfig({
+//     debug: true
+// });
+
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+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("notificationclick", function (event) {
+    const promiseChain = clients.openWindow("https://gabenparadise.com/");
+    event.waitUntil(promiseChain);
+});