Some Tweeks for Notifications

This commit is contained in:
Václav Španinger 2020-08-28 18:10:04 +02:00
parent 38e0f3ae49
commit cc185b344e
4 changed files with 90 additions and 61 deletions

View File

@ -1,6 +1,10 @@
<template> <template>
<div class="row" v-if="isLoaded"> <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"> <a :href="game.url">
<div class="item"> <div class="item">
<div class="item-image"> <div class="item-image">
@ -9,9 +13,11 @@
</div> </div>
<div class="item-details"> <div class="item-details">
<div> <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>
<div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
</div> </div>
</div> </div>
</a> </a>
@ -103,4 +109,4 @@ export default {
} }
} }
}; };
</script> </script>

View File

@ -7,7 +7,7 @@ import "firebase/messaging";
var startPermission = Notification.permission; var startPermission = Notification.permission;
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
if (Notification.permission === 'granted') { if (Notification.permission === "granted") {
const firebaseConfig = { const firebaseConfig = {
apiKey: "AIzaSyB4IvN1P0u7nWZx96lAKWNix7EOx0tuX48", apiKey: "AIzaSyB4IvN1P0u7nWZx96lAKWNix7EOx0tuX48",
authDomain: "gabenparadise-c658e.firebaseapp.com", authDomain: "gabenparadise-c658e.firebaseapp.com",
@ -27,15 +27,15 @@ if (process.env.NODE_ENV === "production") {
ready() { ready() {
console.log( console.log(
"App is being served from cache by a service worker.\n" + "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); console.log("Status ", status);
if (status === 'granted' && startPermission !== 'granted') { if (status === "granted" && startPermission !== "granted") {
window.location.reload(); window.location.reload();
} }
}) });
}, },
registered($registration) { registered($registration) {
console.log("serwiceworker registered."); console.log("serwiceworker registered.");
@ -49,11 +49,8 @@ if (process.env.NODE_ENV === "production") {
}, },
updated() { updated() {
console.log("New content is available; please refresh."); 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() { offline() {
console.log( console.log(
@ -66,36 +63,47 @@ if (process.env.NODE_ENV === "production") {
}); });
} }
function subscribeFirebase($registration) { 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) { if (messaging != null) {
console.log("Service worker has been registered. ", $registration); console.log("Service worker has been registered. ", $registration);
messaging.useServiceWorker($registration); messaging.useServiceWorker($registration);
messaging.usePublicVapidKey('BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s'); messaging.usePublicVapidKey(
"BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s"
);
messaging.getToken().then(function (token) { 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 //FIX: New URL
axios.post('https://api.gabenparadise.com/api/subscribe', { axios
"token": token .post(
}, { "https://api.gabenparadise.com/api/subscribe",
headers: { {
'Content-Type': 'application/x-www-form-urlencoded' token: token
} },
} {
).then(function (response) { headers: {
console.log(response); "Content-Type": "application/x-www-form-urlencoded"
}).catch(function (error) { }
console.log(error); }
}); )
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}); });
} else { } else {
document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell"; document.getElementById("sub-identifi").className =
"fa fa-bell-slash-o bell";
} }
} else { } else {
document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell"; document.getElementById("sub-identifi").className =
"fa fa-bell-slash-o bell";
} }
} }

View File

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

View File

@ -1,17 +1,17 @@
module.exports = { module.exports = {
pwa: { pwa: {
name: 'Gaben Paradise', name: "Gaben Paradise",
workboxPluginMode: 'InjectManifest', workboxPluginMode: "InjectManifest",
themeColor: '#0a0a0a', themeColor: "#0a0a0a",
workboxOptions:{ workboxOptions: {
swSrc: "src/service-worker.js" swSrc: "src/service-worker.js"
}, },
iconPaths: { 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"
} }
} }
} };