Use auto update

Author: JanisV

frontend/src/components/UpdatedPrompt.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-snackbar
+    v-model="updatedToast"
+    :timeout="5000"
+    color="info"
+    vertical
+  >
+    {{ i18n.global.t('New version is available') }}
+
+    <template v-slot:actions>
+      <v-btn variant="text" @click="location.reload()">{{ 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 { ref } from 'vue'
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import i18n from "@/i18n/index.js";
+
+const updatedToast = ref(false)
+
+const { updateServiceWorker } = useRegisterSW({
+  onServiceWorkerUpdated() {
+    updatedToast.value = true
+  }
+})
+
+const close = () => {
+  updatedToast.value = false
+}
+</script>

frontend/vite.config.js

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