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>

next.config.ts

@@ -1,7 +1,30 @@
 import type { NextConfig } from "next";
+import withPWAInit from "@ducanh2912/next-pwa";
+
+const withPWA = withPWAInit({
+  dest: "public",
+  cacheOnFrontEndNav: true,
+  aggressiveFrontEndNavCaching: true,
+  reloadOnOnline: true,
+  disable: process.env.NODE_ENV === "development",
+  workboxOptions: {
+    disableDevLogs: true,
+    runtimeCaching: [
+      {
+        urlPattern: /^https?.*/,
+        handler: "NetworkFirst",
+        options: {
+          cacheName: "grow-api-cache",
+          expiration: { maxEntries: 200, maxAgeSeconds: 24 * 60 * 60 },
+          networkTimeoutSeconds: 10,
+        },
+      },
+    ],
+  },
+});
 
 const nextConfig: NextConfig = {
   output: "standalone",
 };
 
-export default nextConfig;
+export default withPWA(nextConfig);

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.11.2",
+    "@ducanh2912/next-pwa": "^10.2.9",
     "@hookform/resolvers": "^5.4.0",
     "@prisma/adapter-pg": "^7.8.0",
     "@prisma/client": "^7.8.0",
@@ -41,6 +42,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.2.9",
+    "sharp": "^0.35.1",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

public/manifest.json

@@ -9,9 +9,15 @@
   "orientation": "portrait",
   "icons": [
     {
-      "src": "/icon.svg",
+      "src": "/icon-192.png",
-      "sizes": "any",
+      "sizes": "192x192",
-      "type": "image/svg+xml",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
       "purpose": "any maskable"
     }
   ]

src/app/layout.tsx

@@ -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",
   },
 };
 

src/app/offline/page.tsx

@@ -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>
+  );
+}