Add offline page, navigation preload, page cache, and pwa:create:sw commands

- Create /offline route and neo-brutalist offline page with retry button
- Add navigation_preload: true for faster SW navigation
- Add page_cache: 50 entries, 24h, 3s network timeout
- Add pwa_dev/pwa_prod Makefile commands using pwa:create:sw

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

Makefile

@@ -52,6 +52,13 @@ run_test: ## Lance les tests PHP et JS via Docker dev
 	docker compose -f docker-compose-dev.yml exec php php bin/phpunit
 	docker compose -f docker-compose-dev.yml exec bun bun run test
 
+## —— PWA —————————————————————————————————————————
+pwa_dev: ## Compile le service worker en dev via Docker
+	docker compose -f docker-compose-dev.yml exec php php bin/console pwa:create:sw
+
+pwa_prod: ## Compile le service worker en prod via Docker
+	docker compose -f docker-compose-prod.yml exec php php bin/console pwa:create:sw --env=prod
+
 ## —— Qualite ——————————————————————————————————————
 hadolint: ## Lance Hadolint sur les Dockerfiles
 	hadolint docker/php/dev/Dockerfile

config/packages/pwa.yaml

@@ -77,6 +77,7 @@ pwa:
         scope: /
         use_cache: false
         skip_waiting: true
+        navigation_preload: true
         workbox:
             cache_manifest: true
             image_cache:
@@ -91,6 +92,11 @@ pwa:
             asset_cache:
                 enabled: true
                 regex: '/\.(css|jsx?)$/'
+            page_cache:
+                enabled: true
+                max_entries: 50
+                max_age: 86400
+                network_timeout: 3
     favicons:
         enabled: true
         default:

src/Controller/HomeController.php

@@ -218,4 +218,10 @@ class HomeController extends AbstractController
             ],
         ]);
     }
+
+    #[Route('/offline', name: 'app_offline_page')]
+    public function offline(): Response
+    {
+        return $this->render('home/offline.html.twig');
+    }
 }

templates/home/offline.html.twig

@@ -0,0 +1,24 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hors ligne - E-Ticket{% endblock %}
+
+{% block body %}
+<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">
+    <section class="relative flex items-center justify-center px-4 pt-20 pb-16 min-h-[60vh]">
+        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
+            <span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">OFFLINE</span>
+        </div>
+
+        <div class="max-w-2xl mx-auto relative z-10 text-center">
+            <div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-6 md:p-12">
+                <div class="text-3xl md:text-5xl mb-4">&#128268;</div>
+                <h1 class="text-2xl md:text-3xl font-black uppercase tracking-tighter italic mb-4">Vous etes hors ligne</h1>
+                <p class="font-bold text-gray-500 italic mb-8">Verifiez votre connexion internet et reessayez.</p>
+                <button onclick="location.reload()" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all cursor-pointer">
+                    Reessayer
+                </button>
+            </div>
+        </div>
+    </section>
+</div>
+{% endblock %}