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)
2026-09-01 14:00:14 +02:00
parent 55b1a9276a
commit 356c4773fc
12 changed files with 4637 additions and 33 deletions
@@ -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,
+            },
+        }),
    ],
-});
+});