feat: Phase 5.3 - PWA Offline Support with Workbox

- Add vite-plugin-pwa + workbox-window
- Configure PWA manifest with icons (SVG)
- Configure Workbox runtime caching:
  - API routes: NetworkFirst (10s timeout, 100 entries, 24h)
  - Media files: CacheFirst (50 entries, 7 days)
  - Pages: NetworkFirst (10s timeout, 50 entries, 24h)
- Register service worker in app.js with update notification
- Generate icons (SVG) for all sizes

Tests: 101 passing (319 assertions)

package.json

@@ -18,7 +18,9 @@
         "postcss": "^8.5.12",
         "pusher-js": "^8.6.0",
         "tailwindcss": "^3.4.19",
-        "vite": "^7.0.7"
+        "vite": "^7.0.7",
+        "vite-plugin-pwa": "^1.3.0",
+        "workbox-window": "^7.4.1"
     },
     "dependencies": {
         "@tailwindcss/typography": "^0.5.19",

public/icons/icon-128x128.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-144x144.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="144" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-152x152.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="152" height="152" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-192x192.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-384x384.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384" height="384" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-512x512.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-72x72.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

public/icons/icon-96x96.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#2563eb"/>
+  <text x="50" y="62" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">CP</text>
+</svg>

resources/js/app.js

@@ -14,6 +14,31 @@ window.Echo = new Echo({
     enabledTransports: ['ws', 'wss'],
 });
 
+// Register service worker for PWA
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/sw.js')
+            .then(registration => {
+                console.log('SW registered:', registration.scope);
+
+                registration.addEventListener('updatefound', () => {
+                    const newWorker = registration.installing;
+                    newWorker.addEventListener('statechange', () => {
+                        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                            console.log('New version available!');
+                            if (confirm('Hay una nueva versión disponible. ¿Recargar?')) {
+                                window.location.reload();
+                            }
+                        }
+                    });
+                });
+            })
+            .catch(error => {
+                console.log('SW registration failed:', error);
+            });
+    });
+}
+
 import localforage from 'localforage';
 
 // Generic function to queue any offline action

vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
     plugins: [
@@ -7,5 +8,122 @@ export default defineConfig({
             input: ['resources/css/app.css', 'resources/js/app.js'],
             refresh: true,
         }),
+        VitePWA({
+            registerType: 'autoUpdate',
+            includeAssets: ['favicon.ico', 'robots.txt'],
+            manifest: {
+                name: 'ConstruProgress',
+                short_name: 'CP',
+                description: 'Sistema de Gestión de Obras - ConstruProgress',
+                theme_color: '#2563eb',
+                background_color: '#ffffff',
+                display: 'standalone',
+                orientation: 'portrait-primary',
+                scope: '/',
+                start_url: '/',
+                icons: [
+                    {
+                        src: '/icons/icon-72x72.svg',
+                        sizes: '72x72',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-96x96.svg',
+                        sizes: '96x96',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-128x128.svg',
+                        sizes: '128x128',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-144x144.svg',
+                        sizes: '144x144',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-152x152.svg',
+                        sizes: '152x152',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-192x192.svg',
+                        sizes: '192x192',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-384x384.svg',
+                        sizes: '384x384',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    },
+                    {
+                        src: '/icons/icon-512x512.svg',
+                        sizes: '512x512',
+                        type: 'image/svg+xml',
+                        purpose: 'maskable any'
+                    }
+                ],
+            },
+            workbox: {
+                globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2,json}'],
+                runtimeCaching: [
+                    {
+                        urlPattern: /^https:\/\/.*\/api\/v1\/.*/,
+                        handler: 'NetworkFirst',
+                        options: {
+                            cacheName: 'api-cache',
+                            expiration: {
+                                maxEntries: 100,
+                                maxAgeSeconds: 86400
+                            },
+                            networkTimeoutSeconds: 10,
+                            cacheableResponse: {
+                                statuses: [0, 200]
+                            }
+                        }
+                    },
+                    {
+                        urlPattern: /^https:\/\/.*\/storage\/.*/,
+                        handler: 'CacheFirst',
+                        options: {
+                            cacheName: 'media-cache',
+                            expiration: {
+                                maxEntries: 50,
+                                maxAgeSeconds: 604800
+                            },
+                            cacheableResponse: {
+                                statuses: [0, 200]
+                            }
+                        }
+                    },
+                    {
+                        urlPattern: ({ request }) => request.destination === 'document',
+                        handler: 'NetworkFirst',
+                        options: {
+                            cacheName: 'pages-cache',
+                            expiration: {
+                                maxEntries: 50,
+                                maxAgeSeconds: 86400
+                            },
+                            networkTimeoutSeconds: 10,
+                            cacheableResponse: {
+                                statuses: [0, 200]
+                            }
+                        }
+                    }
+                ],
+                cleanupOutdatedCaches: true,
+                clientsClaim: true,
+                skipWaiting: true,
+            },
+        }),
     ],
-});
+});