How to propmt user in Vuejs pwa app on update available? - vue.js

Question

I've read through a couple of vuejs PWA examples for updating PWA, and it seems non worked for me and made me confused with these problems:
1. When I build the app and run it,
it will instantly download the content and shows the new content.
2. It will ask every time that there is a new version.
How should I fix these problems?
I just want to prompt the user to see that there is a new version(e.g.v1) and if he/she wants, update the app after accepting, and don't bother he/her on the next refresh until there is a new version(e.g. v2)

Answer 1

Thanks to custom service worker exmaple, Working solution on pwa update:
//vue.config.js
module.exports = {
publicPath: "./",
pwa: {
themeColor: "#42b983",
msTileColor: "#42b983",
appleMobileWebAppCache: "yes",
manifestOptions: {
background_color: "#42b983"
}
}
};
//registerServiceWorker.js:
import { Workbox } from "workbox-window";
let wb;
if ("serviceWorker" in navigator) {
wb = new Workbox(`${process.env.BASE_URL}service-worker.js`);
wb.addEventListener("controlling", () => {
window.location.reload();
});
wb.register();
} else {
wb = null;
}
export default wb;
//main.js
import Vue from "vue";
import App from "./App.vue";
import wb from "./registerServiceWorker";
Vue.prototype.$workbox = wb;
new Vue({
render: h => h(App)
}).$mount("#app");
//App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Vue.js with PWA" />
<div class="update-dialog" v-if="prompt">
<div class="update-dialog__content">
A new version is found. Refresh to load it?
</div>
<div class="update-dialog__actions">
<button
class="update-dialog__button update-dialog__button--confirm"
#click="update"
>
Update
</button>
<button
class="update-dialog__button update-dialog__button--cancel"
#click="prompt = false"
>
Cancel
</button>
</div>
</div>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
methods: {
async update() {
this.prompt = false;
await this.$workbox.messageSW({ type: "SKIP_WAITING" });
},
},
data() {
return {
prompt: false,
};
},
created() {
if (this.$workbox) {
this.$workbox.addEventListener("waiting", () => {
this.prompt = true;
});
}
},
};
</script>
<style lang="scss">
#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;
}
.update-dialog {
position: fixed;
left: 50%;
bottom: 64px;
transform: translateX(-50%);
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 12px;
max-width: 576px;
color: white;
background-color: #2c3e50;
text-align: left;
&__actions {
display: flex;
margin-top: 8px;
}
&__button {
margin-right: 8px;
&--confirm {
margin-left: auto;
}
}
}
</style>

Answer 2

I'm not sure about the Vue,
But I used these below codes and worked just fine for me in a React project.
First, register the ServiceWorker by calling method registerValidSW:
function registerValidSW(swUrl: string) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
const event = new Event("app-event-newContentAvailable");
window.dispatchEvent(event);
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
I used workbox and this is what my workbox-build.js file looks like:
const workboxBuild = require('workbox-build');
// NOTE: This should be run *AFTER* all your assets are built
const buildSW = () => {
// This will return a Promise
return workboxBuild.injectManifest({
swSrc: 'src/sw-template.js', // this is your sw template file
swDest: 'build/sw.js', // this will be created in the build step
globDirectory: 'build',
globIgnores: ['**/service-worker.js', '**/precache-manifest.*.js'],
globPatterns: [
'**\/*.{js,css,html,png}',
]
}).then(({count, size, warnings}) => {
// Optionally, log any warnings and details.
warnings.forEach(console.warn);
console.log(`${count} files will be precached, totaling ${size} bytes.`);
});
}
buildSW();
And this is sw-template.js:
if ('function' === typeof importScripts) {
importScripts(
// 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js'
'static/sw-workbox/v4.3.1/workbox-sw.js'
);
/* global workbox */
if (workbox) {
/* injection point for manifest files. */
workbox.precaching.precacheAndRoute([]);
const cacheConfig = {
images: [
/\.(?:jpg|jpeg|png|gif|svg|ico)$/,
new workbox.strategies.CacheFirst({
cacheName: "images",
plugins: [
new workbox.expiration.Plugin({
maxEntries: 6000,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
})
]
}),
"GET"
],
fonts: [
/\.(?:eot|ttf|woff|woff2)$/,
new workbox.strategies.CacheFirst({
cacheName: "fonts",
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200]
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
maxEntries: 30
})
]
}),
"GET"
],
manifest: [
new RegExp('manifest.json'),
new workbox.strategies.CacheFirst({
cacheName: "manifest",
plugins: [
new workbox.expiration.Plugin({
// maxAgeSeconds: 60 * 60 * 24 * 2, // 2 days
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
maxEntries: 1
})
]
}),
"GET"
],
};
/* custom cache rules*/
workbox.routing.registerNavigationRoute('/index.html', {
blacklist: [
/^\/_/, /\/[^\/]+\.[^\/]+$/,
],
});
workbox.routing.registerRoute(...cacheConfig.images);
workbox.routing.registerRoute(...cacheConfig.fonts);
workbox.routing.registerRoute(...cacheConfig.manifest);
const SkipWaitingAndClaim = () => {
workbox.core.skipWaiting();
workbox.core.clientsClaim();
};
SkipWaitingAndClaim();
} else {
console.log('Workbox could not be loaded. No Offline support');
}
}
In the package.json I added a new line to my scripts so that I can build my sw.js file before building the app:
"scripts": {
"build-sw": "node ./src/sw-build.js",
...
...
},
And now you can add your EventListener in for instance App.tsx (I used modal with the reload action button):
componentDidMount() {
window.addEventListener("app-event-newContentAvailable", () => {
this.setState({ showConfirmReloadModal: true });
});
}