Progressive Web App (PWA)

.gitignore

@@ -17,4 +17,12 @@ ury/www/urypos.html
 ury/www/URYMosaic.html
 build
 
+
+ury/www/sw.js
+ury/www/manifest.webmanifest
+ury/www/workbox-*.js
+ury/www/urypos-manifest.webmanifest
+ury/www/urypos-sw.js
+
 *.lock
+

pos/package.json

@@ -5,8 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build --base=/assets/ury/pos/ && yarn copy-html-entry",
+    "build": "vite build --base=/assets/ury/pos/ && yarn copy-html-entry && yarn copy-pwa-assets",
     "copy-html-entry": "cp ../ury/public/pos/index.html ../ury/www/pos.html",
+    "copy-pwa-assets": "cp ../ury/public/pos/sw.js ../ury/www/sw.js && cp ../ury/public/pos/workbox-*.js ../ury/www/ 2>/dev/null || : && cp ../ury/public/pos/manifest.webmanifest ../ury/www/manifest.webmanifest",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -43,6 +44,11 @@
     "globals": "^15.15.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vite-plugin-pwa": "^1.2.0"
+  },
+  "resolutions": {
+    "workbox-build": "7.1.0",
+    "workbox-window": "7.1.0"
   }
 }

pos/src/main.tsx

@@ -8,3 +8,16 @@ createRoot(document.getElementById('root')!).render(
     <App />
   </StrictMode>,
 )
+// Register Service Worker
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(
+      (registration) => {
+        console.log('SW registered: ', registration);
+      },
+      (registrationError) => {
+        console.log('SW registration failed: ', registrationError);
+      }
+    );
+  });
+}

pos/vite.config.ts

@@ -2,13 +2,53 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { fileURLToPath } from 'url'
 import { dirname, resolve } from 'path'
+import { VitePWA } from 'vite-plugin-pwa'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  base: '/assets/ury/pos/',
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: null,
+      strategies: 'generateSW',
+
+      manifest: {
+        name: 'URY POS',
+        short_name: 'POS',
+        description: 'Point of Sale System for URY',
+        theme_color: '#ffffff',
+        background_color: '#ffffff',
+        display: 'standalone',
+        start_url: '/pos',
+        scope: '/',
+        icons: [
+          {
+            src: '/assets/ury/pos/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: '/assets/ury/pos/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      },
+      workbox: {
+        navigateFallback: '/pos',
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        modifyURLPrefix: {
+          '': '/assets/ury/pos/'
+        }
+      },
+      outDir: '../ury/public/pos',
+    })
+  ],
   resolve: {
     alias: {
       "@": resolve(__dirname, "./src"),