VUE_GabenParadise/src/components/UpdateBar.vue

52 lines
1.2 KiB
Vue

<template>
<!--Notification Bar-->
<div v-if="once">
<div class="alert alert-danger d-flex justify-content-between" role="alert">
<div class="align-self-center">Update availible!</div>
<div>
<button type="button" class="btn btn-primary" v-on:click="refreshApp">Refresh</button>
</div>
</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>