JonatanRek/VUE_GabenParadise
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some Tweeks for Notifications

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/GamesList.vue
View File

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

52
src/registerServiceWorker.js
View File

@ -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) {
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 }));
console.log("Token: ", token);
console.log(JSON.stringify({ token: token }));
//FIX: New URL
axios.post('https://api.gabenparadise.com/api/subscribe', {
"token": token
}, {
axios
.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";
}
}

35
src/service-worker.js
View File

@ -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, {
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);
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, {});

18
vue.config.js
View File

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