Update Function

This commit is contained in:
JonatanRek 2020-09-06 12:38:26 +02:00
parent cc185b344e
commit 7167d86285
7 changed files with 83 additions and 23 deletions

View File

@ -8,7 +8,9 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"firebase": "^7.19.1",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"vue": "^2.6.11" "vue": "^2.6.11"
}, },

View File

@ -10,8 +10,8 @@
</div> </div>
</div> </div>
<Notification /> <Notification />
<UpdateBar />
<GamesList /> <GamesList />
</div>
</template> </template>
<style> <style>
@ -35,18 +35,20 @@ body {
<script> <script>
import GamesList from "./components/GamesList.vue"; import GamesList from "./components/GamesList.vue";
import Notification from "./components/Notification.vue"; import Notification from "./components/Notification.vue";
import UpdateBar from "./components/UpdateBar.vue";
export default { export default {
name: "App", name: "App",
data() { data() {
return { return {
title: "Gaben Paradise", title: "Gaben Paradise",
content: "get information about free games in one place" content: "get information about free games in one place",
}; };
}, },
components: { components: {
GamesList, GamesList,
Notification Notification,
} UpdateBar
},
}; };
</script> </script>

View File

@ -1,4 +1,5 @@
<template> <template>
<!--Alert Bar-->
<div v-if="noAlert"> <div v-if="noAlert">
<div class="alert" :class="alert.color" role="alert"> <div class="alert" :class="alert.color" role="alert">
{{ alert.text }} {{ alert.text }}

View File

@ -0,0 +1,49 @@
<template>
<!--Notification Bar-->
<div v-if="once">
<div class="alert alert-danger" role="alert">
Update Awailible
<button type="button" class="btn btn-primary" v-on:click="refreshApp">Refresh</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
once: false,
refreshing: false,
registration: null,
updateExists: false
};
},
created() {
document.addEventListener("swUpdated", () => {
console.log(event);
console.log(event);
console.log(event);
this.updateAvailable(event);
this.once = true;
});
navigator.serviceWorker.addEventListener("controllerchange", () => {
if (this.refreshing) return;
this.refreshing = true;
window.location.reload();
});
},
methods: {
updateAvailable(event) {
this.registration = event.detail;
this.updateExists = true;
},
refreshApp() {
this.updateExists = false;
if (!this.registration || !this.registration.waiting) return;
this.registration.waiting.postMessage({ type: "SKIP_WAITING" });
}
}
};
</script>

View File

@ -30,7 +30,7 @@ if (process.env.NODE_ENV === "production") {
"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();
@ -47,10 +47,11 @@ if (process.env.NODE_ENV === "production") {
updatefound() { updatefound() {
console.log("New content is downloading."); console.log("New content is downloading.");
}, },
updated() { updated(registration) {
console.log("New content is available; please refresh."); console.log("New content is available; please refresh.");
window.location.reload(); document.dispatchEvent(
console.log("Reloading After Update"); new CustomEvent('swUpdated', { detail: registration })
)
}, },
offline() { offline() {
console.log( console.log(
@ -75,7 +76,7 @@ function subscribeFirebase($registration) {
"BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s" "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
@ -91,10 +92,10 @@ function subscribeFirebase($registration) {
} }
} }
) )
.then(function(response) { .then(function (response) {
console.log(response); console.log(response);
}) })
.catch(function(error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
}); });

View File

@ -2,10 +2,7 @@
// debug: true // debug: true
// }); // });
self.skipWaiting(); self.addEventListener("push", function (event) {
console.log("Skiping Waiting");
self.addEventListener("push", function(event) {
if (event.data) { if (event.data) {
var data = event.data.json(); var data = event.data.json();
var notOptions = { var notOptions = {
@ -24,8 +21,9 @@ self.addEventListener("push", function(event) {
} }
}); });
self.addEventListener("notificationclick", function(event) { self.addEventListener("notificationclick", function (event) {
if (event.notification) { if (event.notification) {
if (data.data) {
var data = JSON.parse(event.notification.data.data); var data = JSON.parse(event.notification.data.data);
if (data[event.action]) { if (data[event.action]) {
console.log(data); console.log(data);
@ -33,8 +31,15 @@ self.addEventListener("notificationclick", function(event) {
clients.openWindow("" + data[event.action]); clients.openWindow("" + data[event.action]);
} }
} }
}
clients.openWindow("/"); clients.openWindow("/");
}); });
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting()
}
})
self.__precacheManifest = [].concat(self.__precacheManifest || []); self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); workbox.precaching.precacheAndRoute(self.__precacheManifest, {});