javier/construprogress
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat: Phase 5.3 - PWA Offline Support with Workbox
Code Style & Quality / Laravel Pint (push) Waiting to run
Details
Code Style & Quality / PHPStan Static Analysis (push) Waiting to run
Details
Code Style & Quality / Test Suite (push) Waiting to run
Details
Code Style & Quality / Browser Tests (Dusk) (push) Waiting to run
Details

Browse Source 
- 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)
This commit is contained in:
Javier Braña
2026-09-01 14:00:14 +02:00
parent 55b1a9276a
commit 356c4773fc
12 changed files with 4637 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+4458 -31
View File
File diff suppressed because it is too large Load Diff
package.json
+3 -1
View File
@@ -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
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

public/icons/icon-144x144.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

public/icons/icon-152x152.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

public/icons/icon-192x192.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

public/icons/icon-384x384.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

public/icons/icon-512x512.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

public/icons/icon-72x72.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

public/icons/icon-96x96.svg
+4
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

resources/js/app.js
+25
View File
@@ -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
+118
View File
@@ -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,
},
}),
],
});