feat: init PWA

package.json

@@ -52,6 +52,10 @@
     "vite-plugin-pwa": "^0.11.12",
     "vue-cli-plugin-i18n": "^2.3.1",
     "vue-eslint-parser": "^8.0.1",
+    "workbox-core": "^6.4.2",
+    "workbox-precaching": "^6.4.2",
+    "workbox-routing": "^6.4.2",
+    "workbox-strategies": "^6.4.2",
     "yorkie": "^2.0.0"
   },
   "config": {

public/robots.txt

@@ -1,3 +1,2 @@
 User-agent: *
 Disallow:
-X-Robots-Tag: all

src/App.vue

@@ -9,8 +9,20 @@
 </template>
 
 <script lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { defineComponent } from 'vue'
 import { useRoute } from 'vue-router'
+useRegisterSW({
+  immediate: true,
+  onRegistered(r) {
+    r &&
+      setInterval(async () => {
+        /* eslint-disable no-console */
+        console.log('Checking for sw update')
+        await r.update()
+      }, 20000 /* 20s for testing purposes */)
+  },
+})
 
 export default defineComponent({
   name: 'App',

src/sw.ts

@@ -0,0 +1,48 @@
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+import { clientsClaim } from 'workbox-core'
+import { ExpirationPlugin } from 'workbox-expiration'
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { CacheFirst } from 'workbox-strategies'
+
+declare let self: ServiceWorkerGlobalScope
+
+// self.__WB_MANIFEST is default injection point
+precacheAndRoute(self.__WB_MANIFEST)
+
+// clean old assets
+cleanupOutdatedCaches()
+
+// to allow work offline
+registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')), new CacheFirst())
+registerRoute(
+  ({ request }) => request.destination === 'image',
+  new CacheFirst({
+    cacheName: 'images',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 365 * 24 * 60 * 60,
+      }),
+    ],
+  })
+)
+registerRoute(
+  ({ request }) => request.destination === 'font',
+  new CacheFirst({
+    cacheName: 'fonts',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 365 * 24 * 60 * 60,
+      }),
+    ],
+  })
+)
+
+self.skipWaiting()
+clientsClaim()

tsconfig.json

@@ -16,7 +16,8 @@
     "resolveJsonModule": true,
     "noImplicitAny": false,
     "types": [
-      "jest"
+      "jest",
+      "vite-plugin-pwa/client"
     ],
     "paths": {
       "@/*": [

vite.config.ts

@@ -1,45 +1,51 @@
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import { defineConfig } from 'vite'
-import { VitePWA } from 'vite-plugin-pwa'
+import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    VitePWA({
-      mode: 'development',
-      includeAssets: [
-        'favicon.svg',
-        'favicon.ico',
-        'robots.txt',
-        'favicon-apple.png',
-        'favicon-192.png',
-        'favicon-512.png',
-      ],
-      manifest: {
-        name: 'Heroes 3 tools',
-        short_name: 'heroes3tools',
-        description: 'Web tools for simplification playing in Heroes of Might and Magic III: Horn of The Abyss',
-        theme_color: '#ffffff',
-        icons: [
-          {
-            src: 'favicon-192.png',
-            sizes: '192x192',
-            type: 'image/png',
-          },
-          {
-            src: 'favicon-512.png',
-            sizes: '512x512',
-            type: 'image/png',
-          },
-        ],
+const pwaOptions: Partial<VitePWAOptions> = {
+  base: '/',
+  includeAssets: [
+    'favicon.svg',
+    'favicon.ico',
+    'robots.txt',
+    'favicon-apple.png',
+    'favicon-192.png',
+    'favicon-512.png',
+  ],
+  strategies: 'injectManifest',
+  srcDir: 'src',
+  filename: 'sw.ts',
+
+  manifest: {
+    name: 'Heroes 3 tools',
+    short_name: 'heroes3tools',
+    description: 'Web tools for simplification playing in Heroes of Might and Magic III: Horn of The Abyss',
+    orientation: 'portrait',
+    theme_color: '#ffffff',
+    start_url: '/',
+    id: '/',
+    icons: [
+      {
+        src: 'favicon-192.png',
+        sizes: '192x192',
+        type: 'image/png',
       },
-      workbox: {
-        sourcemap: true,
+      {
+        src: 'favicon-512.png',
+        sizes: '512x512',
+        type: 'image/png',
       },
-    }),
-  ],
+    ],
+  },
+  workbox: {
+    sourcemap: true,
+  },
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), VitePWA(pwaOptions)],
   resolve: {
     alias: [
       {