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,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>