feat(web-ui): PWA capabilities (#348)

MaskingTechnology · Nov 27, 2024 · ddc920b · ddc920b
1 parent e2d035f
commit ddc920b
Show file tree

Hide file tree

Showing 9 changed files with 5,558 additions and 3,083 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,13 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/assets/appicon.png" />
+  <link rel="icon" type="image/png" href="/assets/appicon32.png" />
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Comify">
   <title>Comify</title>
 </head>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "changelog-debug": "auto-changelog --template changelog.hbs -p --template json --output changelog-data.json",
     "review": "npm run compile && npm run lint && npm run test",
     "rebuild": "npm run clean && npm run build && npm run standalone",
-
     "standalone": "jitar start --env-file=development.env --service=services/standalone.json --http-body-limit=512000",
     "repository": "jitar start --env-file=development.env --service=services/repository.json",
     "proxy": "jitar start --env-file=development.env --service=services/proxy.json --http-body-limit=512000",
@@ -69,6 +68,7 @@
     "tsc-alias": "^1.8.10",
     "typescript": "5.6.2",
     "vite": "^5.4.6",
+    "vite-plugin-pwa": "^0.20.5",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1"
   },

diff --git a/services/standalone.json b/services/standalone.json
@@ -21,6 +21,6 @@
         "segments": ["bff"],
 
         "serveIndexOnNotFound": true,
-        "assets": ["index.html", "main.js", "assets/**/*", "webui/**/*"]
+        "assets": ["index.html", "main.js", "assets/**/*", "webui/**/*", "registerSW.js", "sw.js", "workbox-*.js", "manifest.webmanifest" ]
     }
 }
diff --git a/src/assets/appicon192.png b/src/assets/appicon192.png
diff --git a/src/assets/appicon.png → src/assets/appicon32.png b/src/assets/appicon.png → src/assets/appicon32.png
diff --git a/src/assets/appicon512.png b/src/assets/appicon512.png
diff --git a/src/webui/public/manifest.webmanifest b/src/webui/public/manifest.webmanifest
@@ -0,0 +1,41 @@
+
+{
+    "name": "Comify",
+    "short_name": "Comify",
+    "theme_color": "#ffffff",
+
+    "icons": [
+
+      {
+        "src": "/assets/appicon32.png",
+        "type": "image/png",
+        "sizes": "32x32"
+      },
+
+      {
+        "src": "/assets/appicon192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+
+      {
+        "src": "/assets/appicon512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+
+    ],
+
+   "start_url": "/",
+
+    "id": "/",
+
+    "display": "standalone",
+    "description": "Take or upload a picture. Add speech bubbles. Share with friends.",
+    "background_color": "#ffffff",
+    "dir": "ltr",
+    "lang": "en-US",
+    "orientation": "portrait-primary"
+
+
+  }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,7 @@
 import jitar, { JitarConfig } from '@jitar/plugin-vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 const JITAR_URL = 'http://localhost:3000';
@@ -24,6 +25,27 @@ export default defineConfig({
   },
   plugins: [
     react(),
+    VitePWA({
+      strategies: 'generateSW',
+      manifest: false,
+      workbox: {
+        additionalManifestEntries:
+          [
+            { url: '/manifest.webmanifest', revision: null }
+          ],
+        globPatterns: ['index.html', 'registerSW.js', 'assets/*', 'webui/**/*.{js,css,html,png,svg}']
+      },
+    }),
+    {
+      name: 'add-manifest-link',
+      transformIndexHtml(html)
+      {
+        return html.replace(
+          '</head>',
+          '<link rel="manifest" href="/manifest.webmanifest"></head>'
+        );
+      }
+    },
     tsconfigPaths(),
     jitar(jitarConfig)
   ]