feat/FRO-36: PWA (#25)

Added a PWA for knockoutwhist including a special offline screen.

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #25
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

vite.config.ts

@@ -1,18 +1,55 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ template: { transformAssetUrls } }),
+    vue({
+      template: { transformAssetUrls }
+    }),
     vueJsx(),
     vueDevTools(),
     quasar(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        globDirectory: 'dist/',
+        globPatterns: [
+          '**/*.{js,css,html,ico,png,svg,webmanifest}',
+        ],
+      },
+
+      manifest: {
+        name: 'Knockout Whist PWA',
+        short_name: 'Whist PWA',
+        description: 'The Knockout Whist card game as a Progressive Web App.',
+        theme_color: '#4A4A4A',
+        background_color: '#ffffff',
+        display: 'standalone',
+        icons: [
+          {
+            src: 'logo192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'logo512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      },
+      devOptions: {
+        enabled: true,
+        type: 'module',
+      }
+    })
   ],
   resolve: {
     alias: {