Add reload prompt for when a new update.

This commit is contained in:
Kavin 2023-06-19 03:28:54 +01:00
parent 3c31e89f5e
commit c8f9ae3441
No known key found for this signature in database
GPG key ID: 6E4598CA5C92C41F
5 changed files with 37 additions and 10 deletions

View file

@ -9,6 +9,7 @@
</router-view> </router-view>
</div> </div>
<ReloadPrompt />
<FooterComponent /> <FooterComponent />
</div> </div>
</template> </template>
@ -16,6 +17,7 @@
<script> <script>
import NavBar from "./components/NavBar.vue"; import NavBar from "./components/NavBar.vue";
import FooterComponent from "./components/FooterComponent.vue"; import FooterComponent from "./components/FooterComponent.vue";
import ReloadPrompt from "./components/ReloadPrompt.vue";
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)"); const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
@ -23,6 +25,7 @@ export default {
components: { components: {
NavBar, NavBar,
FooterComponent, FooterComponent,
ReloadPrompt,
}, },
data() { data() {
return { return {

View file

@ -0,0 +1,33 @@
<script setup>
import { useRegisterSW } from "virtual:pwa-register/vue";
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW();
const close = async () => {
offlineReady.value = false;
needRefresh.value = false;
};
</script>
<template>
<div v-if="offlineReady || needRefresh" class="pwa-toast" role="alert">
<div class="message">
<span v-if="offlineReady"> App ready to work offline </span>
<span v-else> New content available, click on reload button to update. </span>
</div>
<button v-if="needRefresh" @click="updateServiceWorker()">Reload</button>
<button @click="close">Close</button>
</div>
</template>
<style>
.pwa-toast {
@apply fixed right-0 bottom-0 m-4 p-3 border border-gray-500 rounded shadow bg-white text-gray-700;
}
.pwa-toast .message {
@apply margin-bottom-2;
}
.pwa-toast button {
@apply border border-solid border-gray-500 rounded px-2 py-1;
}
</style>

View file

@ -71,8 +71,6 @@ import "uno.css";
const timeAgo = new TimeAgo("en-US"); const timeAgo = new TimeAgo("en-US");
import("./registerServiceWorker");
const mixin = { const mixin = {
methods: { methods: {
timeFormat: function (duration) { timeFormat: function (duration) {

View file

@ -1,7 +0,0 @@
/* eslint-disable no-console */
import { registerSW } from "virtual:pwa-register";
if (process.env.NODE_ENV === "production") {
registerSW();
}

View file

@ -19,7 +19,7 @@ export default defineConfig({
targets: ["defaults", "not IE 11"], targets: ["defaults", "not IE 11"],
}), }),
VitePWA({ VitePWA({
registerType: "autoUpdate", registerType: "prompt",
workbox: { workbox: {
globPatterns: ["**/*.{js,css,html,ico,svg,png}", "manifest.webmanifest"], globPatterns: ["**/*.{js,css,html,ico,svg,png}", "manifest.webmanifest"],
globIgnores: ["**/*-legacy-*.js"], globIgnores: ["**/*-legacy-*.js"],