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>
<v-app>
<v-app-bar
color="primary"
app
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon>
<v-icon>favorite</v-icon>
</v-btn>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<v-snackbar
v-model="snackWithButtons"
bottom
left
timeout="-1"
>
{{ snackWithBtnText }}
<template v-slot:action="{ attrs }">
<v-btn
text
color="#00f500"
v-bind="attrs"
@click.stop="refreshApp"
>
{{ snackBtnText }}
</v-btn>
<v-btn
icon
class="ml-4"
@click="snackWithButtons = false"
>
<v-icon>close</v-icon>
</v-btn>
</template>
</v-snackbar>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
data() {
return {
refreshing: false,
registration: null,
snackBtnText: '',
snackWithBtnText: '',
snackWithButtons: 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 snackbar 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.snackBtnText = 'Refresh';
this.snackWithBtnText = 'New version available!';
this.snackWithButtons = true;
},
refreshApp() {
this.snackWithButtons = 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.