Add reload prompt for updating service worker

src/App.vue

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

src/components/ReloadPrompt.vue

@@ -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>

src/main.js

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

vite.config.js

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