Konfiguracja PWA

package.json

@@ -26,6 +26,7 @@
     "axios": "^1.1.2",
     "typescript": "^4.6.4",
     "vite": "^4.0.2",
+    "vite-plugin-pwa": "^0.14.0",
     "vue-tsc": "^1.0.16"
   },
   "browserslist": [

src/App.vue

@@ -6,6 +6,8 @@
       </keep-alive>
     </transition>
 
+    <UpdatePrompt />
+
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
@@ -41,6 +43,7 @@ import StorageManager from './scripts/managers/storageManager';
 import imageMixin from './mixins/imageMixin';
 import AppHeader from './components/App/AppHeader.vue';
 import axios from 'axios';
+import UpdatePrompt from './components/App/UpdatePrompt.vue';
 
 export default defineComponent({
   components: {
@@ -49,6 +52,7 @@ export default defineComponent({
     SelectBox,
     TrainModal,
     AppHeader,
+    UpdatePrompt
 },
 
   mixins: [imageMixin],

src/components/App/UpdatePrompt.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="update-prompt">
+    <transition name="prompt-anim">
+      <div class="prompt_content" v-if="!hidePrompt && needRefresh">
+        <div>Nowa wersja <span class="text--primary">Stacjownika</span> jest dostępna!</div>
+
+        <div class="prompt_actions">
+          <button class="btn btn--filled" @click="updateServiceWorker(true)">ZAKTUALIZUJ</button>
+          <button class="btn btn--filled" @click="hidePrompt = true">PÓŹNIEJ</button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+import { ref } from 'vue';
+
+const hidePrompt = ref(false);
+
+const { needRefresh, updateServiceWorker } = useRegisterSW({
+  immediate: true,
+
+  onNeedRefresh() {
+    console.log('Needs refresh!');
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+
+.update-prompt {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 200;
+}
+
+.prompt_content {
+  margin: 1em;
+  padding: 1em;
+
+  font-weight: bold;
+  background-color: black;
+
+  box-shadow: 0 0 10px 1px $accentCol;
+  border-radius: 1em;
+}
+
+.prompt_actions {
+  display: flex;
+  margin-top: 1em;
+  gap: 0.5em;
+
+  button {
+    width: 100%;
+  }
+}
+
+// Animation
+.prompt-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 120ms ease-in;
+    transform: translateY(0);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(100%);
+  }
+}
+</style>
+

tsconfig.json

@@ -14,7 +14,7 @@
       "ESNext",
       "DOM"
     ],
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-pwa/client"],
     "skipLibCheck": true
   },
   "include": [

vite.config.ts

@@ -1,17 +1,16 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
-});
+    vue(),
+    VitePWA({
+      registerType: 'prompt',
 
-// PWA
+      workbox: {
-
+        globPatterns: ['**/*.{js,css,html,png,svg,img}'],
-// VitePWA({
+        runtimeCaching: [
-//       registerType: 'autoUpdate',
-//       workbox: {
-//         globPatterns: ['**/*.{js,css,html,png,svg,img}'],
-//         runtimeCaching: [
           // {
           //   urlPattern: new RegExp('^https://stacjownik.eu-4.evennode.com/api/getSceneries'),
           //   handler: 'NetworkFirst',
@@ -26,9 +25,26 @@ export default defineConfig({
           //     },
           //   },
           // },
-//         ],
+          {
-//       },
+            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
-//       devOptions: {
+            handler: 'CacheFirst',
-//         enabled: true,
+            options: {
-//       },
+              cacheName: 'images-cache',
-//     }),
+              expiration: {
+                maxEntries: 300,
+                maxAgeSeconds: 60 * 60 * 24 * 7,
+              },
+              cacheableResponse: {
+                statuses: [0, 200, 404],
+              },
+            },
+          },
+        ],
+      },
+      devOptions: {
+        enabled: true,
+      },
+    }),
+  ],
+});
+