import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.use(vuetify)
new Vue({
vuetify,
render: h => h(App),
}).$mount('#app')
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered() {
console.log('Service worker has been registered.')
// Routinely check for app updates by testing for a new service worker.
},
cached() {
console.log('Content has been cached for offline use.')
},
updatefound(registration) {
console.log('New content is downloading.')
const installingWorker = registration.installing
console.log(installingWorker)
document.dispatchEvent(
new CustomEvent('swUpdateFound', { detail: registration })
)
},
updated(registration) {
console.log('New content is available; please refresh.')
document.dispatchEvent(
new CustomEvent('swUpdated', { detail: registration })
)
// Add a custom event and dispatch it.
// Used to display of a 'refresh' banner following a service worker update.
// Set the event payload to the service worker registration object.
},
offline() {
console.log(
'No internet connection found. App is running in offline mode.'
)
},
error(error) {
console.error('Error during service worker registration:', error)
},
})
}
// This is the code piece that GenerateSW mode can't provide for us.
// This code listens for the user's confirmation to update the app.
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
workbox.routing.registerRoute(
new RegExp("http://fonts.(?:googleapis|gstatis).com/(.*)"),
new workbox.strategies.CacheFirst({
cacheName: "googleapis",
plugins: [
new workbox.expiration.Plugin({
maxEntries: 30
})
],
method: "GET",
cacheableResponse: { status: [0, 200] }
})
);
workbox.core.setCacheNameDetails({ prefix: "demo" });
workbox.core.clientsClaim(); // Vue CLI 4 and Workbox v4, else
// workbox.clientsClaim(); // Vue CLI 3 and Workbox v3.
// The precaching code provided by Workbox.
self.__precacheManifest = [].concat(self.__precacheManifest || []);
// workbox.precaching.suppressWarnings(); // Only used with Vue CLI 3 and Workbox v3.
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
pwa: {
workbox: {
config: {
debug: true
}
},
//workboxPluginMode: 'GenerateSW',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/service-worker.js'
}
},
productionSourceMap: false,
outputDir: 'dist',
configureWebpack: {
},
chainWebpack: config => {
// config.resolve.alias.set("@$", resolve("src")).set("@views", resolve("src/views"));
config.resolve.alias.set("@$", resolve("src"))
},
css: {
loaderOptions: {
less: {
modifyVars: {},
javascriptEnabled: true
}
}
},
assetsDir: "static",
runtimeCompiler: true
};
export default {
data() {
return {
// refresh variables
refreshing: false,
registration: null,
updateExists: false,
}
},
created() {
// Listen for our custom event from the SW registration
document.addEventListener('swUpdated', this.updateAvailable, { once: true })
// document.addEventListener('forceUpdated', this.forceUpdate, { once: true })
// Prevent multiple refreshes
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (this.refreshing) return
this.refreshing = true
// Here the actual reload of the page occurs
window.location.reload()
})
},
methods: {
// Store the SW registration so we can send it a message
// We use `updateExists` to control whatever alert, toast, dialog, etc we want to use
// To alert the user there is an update they need to refresh for
updateAvailable(event) {
this.registration = event.detail
this.updateExists = true
// this.refreshBrowser()
},
// Called when the user accepts the update
refreshApp() {
this.updateExists = false
// Make sure we only send a 'skip waiting' message if the SW is waiting
if (!this.registration || !this.registration.waiting) return
// send message to SW to skip the waiting and activate the new SW
this.registration.waiting.postMessage({ type: 'SKIP_WAITING' })
window._VMA.$emit("SHOW_SNACKBAR", {
text: "Update Complete",
color: "success",
icon: "mdi-checkbox-marked-circle"
})
},
}
}
<template>
<v-app>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<h1>Build Ver 001</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<v-snackbar
class="mb-5"
bottom
:value="updateExists"
:timeout="-1"
color="primary"
height="60"
>
<v-icon class="mr-2"> mdi-download</v-icon>
<span>An update is available</span>
<template v-slot:action="{ attrs }">
<v-btn outlined v-bind="attrs" text @click="refreshApp">
Update
</v-btn>
</template>
</v-snackbar>
<v-snackbar
class="pa-0"
:timeout="3000"
app
top
centered
elevation="24"
:color="snackbar.color"
v-model="snackbar.show"
>
<v-icon class="pr-1" small color="white">
{{ snackbar.icon }}
</v-icon>
<span style="font-weight: 600" color="white">
{{ snackbar.text }}
</span>
<template v-slot:action="{ attrs }">
<v-btn icon v-bind="attrs" @click="snackbar.show = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</template>
</v-snackbar>
</div>
</v-app>
</template>
<script>
import EventUpdate from "./mixins/EventUpdate";
export default {
mixins: [EventUpdate],
name: "App",
data() {
return {
snackbar: {
show: false,
text: "",
color: "",
icon: "",
},
};
},
created() {
this.$on("SHOW_SNACKBAR", (e) => {
this.snackbar = {
show: true,
text: e.text,
color: e.color,
icon: e.icon,
};
});
},
mounted() {
if (typeof window !== undefined && window._VMA === undefined) {
window._VMA = this;
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
