Add service worker with Workbox: cache manifest, image cache, font cache, skip_waiting

- sw.js with network-first strategy, versioned cache, auto-purge old caches
- Workbox: cache_manifest, image_cache (30 days, 200 entries), font_cache (30 days, 10 entries)
- skip_waiting + clients.claim for instant updates
- CSP nonce for SW registration script
- Remove sw.js and workbox from .gitignore

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.gitignore

@@ -39,9 +39,7 @@ node_modules/
 ###> spomky-labs/pwa-bundle ###
 /public/idb
 /public/pwa
-/public/workbox
 /public/favicon.ico
 /public/site.webmanifest
 /public/site.*.webmanifest
-/public/sw.js
 ###< spomky-labs/pwa-bundle ###

config/packages/pwa.yaml

@@ -70,6 +70,24 @@ pwa:
                   - src: '%kernel.project_dir%/public/favicon.png'
                     sizes: 96x96
                     type: image/png
+    serviceworker:
+        enabled: true
+        src: '%kernel.project_dir%/public/sw.js'
+        dest: /sw.js
+        scope: /
+        use_cache: false
+        skip_waiting: true
+        workbox:
+            cache_manifest: true
+            image_cache:
+                enabled: true
+                max_age: 2592000
+                max_entries: 200
+                regex: '/\.(png|jpe?g|svg|webp)$/'
+            font_cache:
+                enabled: true
+                max_entries: 10
+                max_age: 2592000
     favicons:
         enabled: true
         default:

public/sw.js

@@ -0,0 +1,47 @@
+const CACHE_VERSION = 'v1-' + Date.now()
+const CACHE_NAME = 'e-ticket-' + CACHE_VERSION
+
+const PRECACHE_URLS = [
+    '/',
+    '/evenements',
+    '/organisateurs',
+    '/favicon.png',
+    '/logo.png',
+]
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then((cache) => cache.addAll(PRECACHE_URLS))
+            .then(() => self.skipWaiting())
+    )
+})
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) =>
+            Promise.all(
+                cacheNames
+                    .filter((name) => name.startsWith('e-ticket-') && name !== CACHE_NAME)
+                    .map((name) => caches.delete(name))
+            )
+        ).then(() => self.clients.claim())
+    )
+})
+
+self.addEventListener('fetch', (event) => {
+    if (event.request.method !== 'GET') return
+
+    event.respondWith(
+        fetch(event.request)
+            .then((response) => {
+                if (response.ok) {
+                    const clone = response.clone()
+                    caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone))
+                }
+
+                return response
+            })
+            .catch(() => caches.match(event.request))
+    )
+})

templates/base.html.twig

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{% endblock %}</title>
-    {{ pwa(injectThemeColor: true, injectFavicons: true, injectSW: false, injectResourceHints: true, injectSpeculationRules: true) }}
+    {{ pwa(injectThemeColor: true, injectFavicons: true, injectSW: true, swAttributes: {nonce: csp_nonce('script')}, injectResourceHints: true, injectSpeculationRules: true) }}
     {% block meta %}
         <meta name="description" content="{% block description %}E-Ticket - Plateforme de vente de tickets evenementiels pour associations{% endblock %}">
     {% endblock %}