Prompt before update

Author: JanisV

frontend/src/App.vue

@@ -16,6 +16,7 @@ import PasswordDialog from '@/components/PasswordDialog.vue'
 import FileServerView from "@/components/FileServerView.vue";
 import {useGlobalStatus} from "@/composables/useGlobalStatus.js";
 import {useService} from "@/composables/useService.js";
+import ReloadPrompt from "@/components/ReloadPrompt.vue";
 
 const passwordDialog = ref()
 
@@ -222,6 +223,7 @@ const handleFileUpload = async (file) => {
       </v-snackbar>
 
       <PasswordDialog ref="passwordDialog" />
+      <ReloadPrompt />
 
     </v-main>
   </v-app>

frontend/src/components/ReloadPrompt.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-snackbar
+    v-model="needRefresh"
+    :timeout="-1"
+    color="info"
+    vertical
+  >
+    {{ i18n.global.t('New version is available') }}
+
+    <template v-slot:actions>
+      <v-btn variant="text" @click="updateServiceWorker()">{{ i18n.global.t('Update') }}</v-btn>
+      <v-btn variant="text" @click="close">{{ i18n.global.t('Close') }}</v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup>
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import i18n from "@/i18n/index.js";
+
+const {
+  needRefresh,
+  updateServiceWorker,
+} = useRegisterSW()
+
+const close = () => {
+  needRefresh.value = false
+}
+</script>

frontend/vite.config.js

@@ -28,7 +28,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       vue(),
       VitePWA({
-        registerType: 'autoUpdate',
+        registerType: 'prompt',
         manifest: {
           id: env.VITE_BASE_PATH || '/OpenNumismatWeb/',
           name: 'OpenNumismat Web',
@@ -44,6 +44,7 @@ export default defineConfig(({ mode }) => {
         },
         workbox: {
           globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2,wasm}'],
+          cleanupOutdatedCaches: true,
         }
       }),
       viteStaticCopy({