PWA: manifest i service worker

package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vite-plugin-pwa": "^0.20.5"
   }
 }

public/pwa-192x192.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#43C6AC"/>
+      <stop offset="1" stop-color="#191654"/>
+    </linearGradient>
+    <linearGradient id="cell" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#00f2fe"/>
+      <stop offset="1" stop-color="#4facfe"/>
+    </linearGradient>
+  </defs>
+  <rect width="192" height="192" rx="28" fill="url(#bg)"/>
+  <rect x="28" y="28" width="136" height="136" rx="14" fill="rgba(0,0,0,0.35)"/>
+  <g fill="url(#cell)">
+    <rect x="48" y="48" width="20" height="20" rx="4"/>
+    <rect x="76" y="48" width="20" height="20" rx="4"/>
+    <rect x="104" y="48" width="20" height="20" rx="4"/>
+    <rect x="48" y="76" width="20" height="20" rx="4"/>
+    <rect x="104" y="76" width="20" height="20" rx="4"/>
+    <rect x="48" y="104" width="20" height="20" rx="4"/>
+    <rect x="76" y="104" width="20" height="20" rx="4"/>
+    <rect x="104" y="104" width="20" height="20" rx="4"/>
+  </g>
+</svg>

public/pwa-512x512.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#43C6AC"/>
+      <stop offset="1" stop-color="#191654"/>
+    </linearGradient>
+    <linearGradient id="cell" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#00f2fe"/>
+      <stop offset="1" stop-color="#4facfe"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="80" fill="url(#bg)"/>
+  <rect x="74" y="74" width="364" height="364" rx="40" fill="rgba(0,0,0,0.35)"/>
+  <g fill="url(#cell)">
+    <rect x="138" y="138" width="54" height="54" rx="10"/>
+    <rect x="214" y="138" width="54" height="54" rx="10"/>
+    <rect x="290" y="138" width="54" height="54" rx="10"/>
+    <rect x="138" y="214" width="54" height="54" rx="10"/>
+    <rect x="290" y="214" width="54" height="54" rx="10"/>
+    <rect x="138" y="290" width="54" height="54" rx="10"/>
+    <rect x="214" y="290" width="54" height="54" rx="10"/>
+    <rect x="290" y="290" width="54" height="54" rx="10"/>
+  </g>
+</svg>

vite.config.js

@@ -1,12 +1,44 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 import path from 'path'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'auto',
+      devOptions: {
+        enabled: true
+      },
+      manifest: {
+        name: 'Nonograms',
+        short_name: 'Nonograms',
+        description: 'Nonograms',
+        start_url: '/',
+        scope: '/',
+        display: 'standalone',
+        background_color: '#191654',
+        theme_color: '#00f2fe',
+        icons: [
+          {
+            src: '/pwa-192x192.svg',
+            sizes: '192x192',
+            type: 'image/svg+xml'
+          },
+          {
+            src: '/pwa-512x512.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml'
+          }
+        ]
+      }
+    })
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')
     }
   }
-})
+})