Add PWA support with manifest and TWA integration. Update Vite PWA plugin configuration and scripts for building and updating TWA.

index.html

@@ -6,6 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
     <link rel="shortcut icon" href="/favicons/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="apple-mobile-web-app-title" content="Truck Wash Kundeportal" />
     <link rel="stylesheet" href="bulma/css/bulma.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview",
     "test:mobile": "wdio run wdio.conf.js --exclude safari",
     "test:android": "wdio run wdio.conf.js --spec test/specs/*.spec.js",
-    "wdio": "wdio run ./wdio.conf.js"
+    "wdio": "wdio run ./wdio.conf.js",
+    "twa:build": "bubblewrap build",
+    "twa:update": "bubblewrap update"
   },
   "dependencies": {
     "@azure/msal-browser": "^4.12.0",

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "name": "Truck Wash Kundeportal",
+  "short_name": "Truck Wash",
+  "description": "Access your Truck Wash accounts and transactions from anywhere.",
+  "icons": [
+    {
+      "src": "/favicons/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/favicons/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0787bb",
+  "theme_color": "#063651",
+  "orientation": "portrait",
+  "scope": "/"
+}

twa-manifest.json

@@ -0,0 +1,28 @@
+{
+  "packageId": "dk.truckwash.kundeportal.twa",
+  "host": "kundeportal.truckwash.dk",
+  "name": "Truck Wash Kundeportal",
+  "launcherName": "Truck Wash",
+  "displayMode": "standalone",
+  "themeColor": "#063651",
+  "backgroundColor": "#0787bb",
+  "startUrl": "/",
+  "iconUrl": "https://kundeportal.truckwash.dk/favicons/web-app-manifest-512x512.png",
+  "maskableIconUrl": "https://kundeportal.truckwash.dk/favicons/web-app-manifest-512x512.png",
+  "splashScreenFadeOutDuration": 300,
+  "signingKey": {
+    "path": "./android.keystore",
+    "alias": "android"
+  },
+  "appVersionCode": 1,
+  "appVersionName": "1.0.0",
+  "generatorApp": "bubblewrap-cli",
+  "webManifestUrl": "https://kundeportal.truckwash.dk/manifest.json",
+  "fallbackType": "customtabs",
+  "enableNotifications": true,
+  "enableSiteSettingsShortcut": true,
+  "isRtl": false,
+  "orientation": "portrait",
+  "thumbnails": false,
+  "shareTarget": false
+}

vite.config.js

@@ -60,6 +60,8 @@ export default defineConfig(({ mode }) => {
             enableSingleFile && viteSingleFile(),
             VitePWA({
                 registerType: 'autoUpdate',
+                injectRegister: 'auto',
+                strategies: 'generateSW',
                 devOptions: {
                     enabled: true // keep for local dev
                 },
@@ -140,7 +142,8 @@ export default defineConfig(({ mode }) => {
                         // { src: 'icons/icon-512x512-maskable.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' }
                     ],
                     id: 'pleno-pwa-test'
-                }
+                },
+                useCredentials: true
             })
         ].filter(Boolean),
         resolve: {