50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
|
<template>
|
||
|
<div class="update-notification" v-if="updateAvailable">
|
||
|
<p>There is an update for Vikunja available!</p>
|
||
|
<a @click="refreshApp()" class="button is-primary noshadow">Update Now</a>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import swEvents from '@/ServiceWorker/events.json'
|
||
|
|
||
|
export default {
|
||
|
name: 'update',
|
||
|
data() {
|
||
|
return {
|
||
|
updateAvailable: false,
|
||
|
registration: null,
|
||
|
refreshing: false,
|
||
|
}
|
||
|
},
|
||
|
created() {
|
||
|
document.addEventListener(swEvents.SW_UPDATED, this.showRefreshUI, {once: true})
|
||
|
|
||
|
if (navigator && navigator.serviceWorker) {
|
||
|
navigator.serviceWorker.addEventListener(
|
||
|
'controllerchange', () => {
|
||
|
if (this.refreshing) return
|
||
|
this.refreshing = true
|
||
|
window.location.reload()
|
||
|
},
|
||
|
)
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
showRefreshUI(e) {
|
||
|
console.log('recieved refresh event', e)
|
||
|
this.registration = e.detail
|
||
|
this.updateAvailable = true
|
||
|
},
|
||
|
refreshApp() {
|
||
|
this.updateExists = false
|
||
|
if (!this.registration || !this.registration.waiting) {
|
||
|
return
|
||
|
}
|
||
|
// Notify the service worker to actually do the update
|
||
|
this.registration.waiting.postMessage('skipWaiting')
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|