Skip to content

Instantly share code, notes, and snippets.

@185driver

185driver/App.vue

Last active Oct 1, 2020
Embed
What would you like to do?
<template>
<button
v-if="updateExists"
@click="refreshApp"
>
New version available! Click to update
</button>
</template>
<script>
export default {
name: 'app',
data () {
return {
refreshing: false,
registration: null,
updateExists: false,
};
},
created () {
// Listen for swUpdated event and display refresh snackbar as required.
document.addEventListener('swUpdated', this.showRefreshUI, { once: true });
// Refresh all open app tabs when a new service worker is installed.
if (navigator.serviceWorker) {
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (this.refreshing) return;
this.refreshing = true;
window.location.reload();
});
}
},
methods: {
showRefreshUI (e) {
// Display a button inviting the user to refresh/reload the app due
// to an app update being available.
// The new service worker is installed, but not yet active.
// Store the ServiceWorkerRegistration instance for later use.
this.registration = e.detail;
this.updateExists = true;
},
refreshApp () {
// Handle a user tap on the update app button.
this.updateExists = false;
// Protect against missing registration.waiting.
if (!this.registration || !this.registration.waiting) { return; }
this.registration.waiting.postMessage('skipWaiting');
},
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.