Browse Source

Some Tweeks for Notifications

master
Václav Španinger 1 year ago
parent
commit
cc185b344e
4 changed files with 90 additions and 61 deletions
  1. +10
    -4
      src/components/GamesList.vue
  2. +39
    -31
      src/registerServiceWorker.js
  3. +31
    -16
      src/service-worker.js
  4. +10
    -10
      vue.config.js

+ 10
- 4
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">
@ -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>

+ 39
- 31
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",
@ -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";
}
}

+ 31
- 16
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, {
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, {});

+ 10
- 10
vue.config.js View File

@ -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";
}
}
}
};

Loading…
Cancel
Save