Make SuiviCPT an installable PWA

Adds what iOS/Android need to treat the site as an installable app from Safari's "Add to Home Screen": a manifest.json, apple-touch-icon set generated from the existing logo mark (scripts/generate-icons.mjs, sharp as a dev dependency), and the apple-mobile-web-app-* meta tags iOS Safari requires since it ignores manifest.json entirely. The service worker is deliberately minimal — this app shows live financial data, so navigations always hit the network first. It only caches enough to serve offline.html when there's no connection, not a full offline-first app shell. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-03 11:03:37 +02:00
parent 6a776b0042
commit 5352f39887
15 changed files with 788 additions and 0 deletions
@@ -0,0 +1,32 @@
+{
+    "name": "SuiviCPT",
+    "short_name": "SuiviCPT",
+    "description": "Suivi budgétaire et transactions pour le foyer",
+    "start_url": "/dashboard",
+    "scope": "/",
+    "display": "standalone",
+    "orientation": "portrait",
+    "background_color": "#f5ead8",
+    "theme_color": "#c67139",
+    "lang": "fr",
+    "icons": [
+        {
+            "src": "/icons/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/icons/icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SuiviCPT — Hors ligne</title>
+    <style>
+        body {
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #f5ead8;
+            color: #201e1d;
+            font-family: system-ui, -apple-system, sans-serif;
+            text-align: center;
+            padding: 24px;
+            box-sizing: border-box;
+        }
+        .card { max-width: 320px; }
+        .badge {
+            width: 64px; height: 64px; border-radius: 50%;
+            background: #c67139; margin: 0 auto 20px;
+            display: flex; align-items: center; justify-content: center;
+        }
+        h1 { font-size: 20px; margin: 0 0 8px; }
+        p { font-size: 14px; color: #645c50; margin: 0 0 20px; }
+        button {
+            border: none; border-radius: 999px; padding: 12px 24px;
+            background: #c67139; color: #fff8ee; font-size: 14px; font-weight: 700;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <div class="badge">
+            <svg width="28" height="28" viewBox="0 0 316 316" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="158" cy="158" r="140" stroke="#fff8ee" stroke-width="16"/>
+                <path d="M90 196 L134 142 L172 174 L238 96" stroke="#fff8ee" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M238 96 L238 138 M238 96 L196 96" stroke="#fff8ee" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </div>
+        <h1>Pas de connexion</h1>
+        <p>SuiviCPT a besoin d'internet pour afficher tes données à jour.</p>
+        <button onclick="location.reload()">Réessayer</button>
+    </div>
+</body>
+</html>
@@ -0,0 +1,33 @@
+// Minimal service worker: exists only to satisfy PWA installability criteria
+// and give a usable offline fallback. Deliberately not a full offline-first
+// cache — this app shows live financial data, so navigations always go to
+// the network first; only the built Vite assets and the offline page are
+// cached, never HTML page content.
+const CACHE = 'suivicpt-shell-v1';
+const OFFLINE_URL = '/offline.html';
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE).then((cache) => cache.add(OFFLINE_URL))
+    );
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) =>
+            Promise.all(keys.filter((key) => key !== CACHE).map((key) => caches.delete(key)))
+        )
+    );
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+    if (event.request.mode !== 'navigate') {
+        return;
+    }
+
+    event.respondWith(
+        fetch(event.request).catch(() => caches.match(OFFLINE_URL))
+    );
+});