pwa: automatyczny reload

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "yarn build && vite preview --port 4174"
   },
   "dependencies": {
     "pinia": "^2.0.17",

src/App.vue

@@ -69,7 +69,9 @@ export default defineComponent({
   }),
 
   async created() {
-    const stockData = await (await fetch(`https://spythere.github.io/api/stockDataNew.json?t=${Math.floor(Date.now() / 60000)}`)).json();
+    const stockData = await (
+      await fetch(`https://spythere.github.io/api/stockDataNew.json?t=${Math.floor(Date.now() / 60000)}`)
+    ).json();
 
     this.store.stockData = stockData;
   },

src/main.ts

@@ -1,10 +1,18 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import { registerSW } from 'virtual:pwa-register';
+
 import App from './App.vue';
 
 const pinia = createPinia();
 
-createApp(App)
-  .use(pinia)
-  .mount('#app');
+const updateSW = registerSW({
+  onOfflineReady() {},
+  
+  onNeedRefresh() {
+    console.log('Need refresh!');
+  },
+});
+
+createApp(App).use(pinia).mount('#app');
 

tsconfig.json

@@ -11,7 +11,10 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": [
+      "vite-plugin-pwa/client"
+    ]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]