feat(ui): FRO-36 PWA

Added Knockoutwhist with manifest + worker to be downloadable. Offline screen can be improved

package.json

@@ -2,18 +2,14 @@
   "name": "knockoutwhistfrontend",
   "version": "0.0.0",
   "private": true,
-  "type": "module",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
   "scripts": {
-    "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build",
     "lint": "eslint . --fix --cache",
-    "format": "prettier --write --experimental-cli src/"
+    "build-only": "vite build",
+    "dev": "vite",
+    "format": "prettier --write --experimental-cli src/",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --build"
   },
   "dependencies": {
     "@quasar/extras": "^1.17.0",
@@ -22,6 +18,7 @@
     "axios": "^1.13.2",
     "pinia": "^3.0.4",
     "quasar": "^2.18.6",
+    "register-service-worker": "^1.7.2",
     "tsparticles": "~3.9.1",
     "vue": "^3.5.25",
     "vue-axios": "^3.5.2",
@@ -30,7 +27,7 @@
   "devDependencies": {
     "@quasar/vite-plugin": "^1.10.0",
     "@tsconfig/node24": "^24.0.3",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -44,7 +41,12 @@
     "sass-embedded": "^1.93.3",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
+    "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-vue-devtools": "^8.0.5",
     "vue-tsc": "^3.1.5"
-  }
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "type": "module"
 }

src/App.vue

@@ -1,5 +1,22 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { onMounted, onUnmounted } from 'vue';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+
+const handleOnlineStatusChange = () => {
+  if (navigator.onLine) {
+    if (route.name === 'offline') {
+      window.location.reload();
+    }
+  }
+};
+onMounted(() => {
+  window.addEventListener('online', handleOnlineStatusChange);
+});
+onUnmounted(() => {
+  window.removeEventListener('online', handleOnlineStatusChange);
+});
 </script>
 
 <template>

src/router/index.ts

@@ -8,6 +8,7 @@ import axios from "axios";
 import { useUserInfo } from "@/composables/useUserInfo";
 import rulesView from "../components/Rules.vue";
 import Game from "@/views/Game.vue";
+import OfflineView from "@/views/OfflineView.vue";
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
@@ -55,12 +56,40 @@ const router = createRouter({
       name: 'game',
       component: Game,
       meta: {requiresAuth: true }
+    },
+    {
+      path: '/offline',
+      name: 'offline',
+      component: OfflineView,
+      meta: {requiresAuth: false }
     }
   ],
 })
 
 router.beforeEach(async (to, from, next) => {
   const info = useUserInfo();
+  const isOnline = navigator.onLine;
+  if (to.name === 'offline') {
+    if (isOnline) {
+
+      try {
+        const response = await axios.get(`${api}/userInfo`, { withCredentials: true });
+        info.setUserInfo(response.data.username, response.data.userId);
+
+        return next({ name: 'mainmenu' });
+
+      } catch (err) {
+        info.clearUserInfo();
+        return next('/login');
+      }
+    } else {
+      return next();
+    }
+  }
+  if (!isOnline) {
+    return next({ name: 'offline' });
+  }
+
   if (!to.meta.requiresAuth) return next();
   try {
     await axios.get(`${api}/userInfo`, { withCredentials: true }).then(
@@ -72,6 +101,7 @@ router.beforeEach(async (to, from, next) => {
   } catch (err) {
       info.clearUserInfo();
       next('/login');
+
   }
 });
 

src/views/OfflineView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+<template>
+<h1> DU BIST OFFLINE!!!</h1>
+</template>
+<style scoped>
+
+</style>

vite.config.ts

@@ -1,18 +1,62 @@
 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',
+      injectRegister: 'auto',
+
+      workbox: {
+        globDirectory: 'dist/',
+        globPatterns: [
+          '**/*.{js,css,html,ico,png,svg,webmanifest}',
+        ],
+        globIgnores: [
+          '**/node_modules/**/*',
+          'sw.js',
+        ],
+        swDest: 'dist/sw.js',
+      },
+
+      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: {