feat(pwa): full PWA setup with service worker and PNG icons

- Add @ducanh2912/next-pwa with NetworkFirst runtime caching (24h, 200 entries)
- Disabled in development to avoid SW interference
- Generate icon-192.png, icon-512.png, apple-touch-icon.png from SVG
- Update manifest.json to use PNG icons (required for Android install prompt)
- Add apple-touch-icon + appleWebApp metadata to layout
- Add /offline fallback page shown when network unavailable

Offline behavior: cached reads work on all platforms; background sync
for new events not supported (iOS Safari has no Background Sync API).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-15 15:50:29 +02:00
parent 78fc31252e
commit 95e02aca57
9 changed files with 2659 additions and 8 deletions
+4
View File
@@ -10,6 +10,10 @@ export const metadata: Metadata = {
capable: true,
statusBarStyle: "default",
title: "Grow",
startupImage: "/apple-touch-icon.png",
},
icons: {
apple: "/apple-touch-icon.png",
},
};
+21
View File
@@ -0,0 +1,21 @@
"use client";
export default function OfflinePage() {
return (
<div className="min-h-screen flex flex-col items-center justify-center gap-4 px-6 text-center bg-slate-50 dark:bg-slate-900">
<div className="w-16 h-16 rounded-2xl bg-indigo-100 dark:bg-indigo-950 flex items-center justify-center text-3xl">
🌿
</div>
<h1 className="text-xl font-semibold text-slate-800 dark:text-slate-100">Hors ligne</h1>
<p className="text-sm text-slate-500 dark:text-slate-400 max-w-xs">
Impossible de se connecter. Les données affichées sont peut-être en cache.
</p>
<button
onClick={() => window.location.reload()}
className="mt-2 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-xl hover:bg-indigo-700 transition"
>
Réessayer
</button>
</div>
);
}