Merge pull request 'feat: PWA installable' (#69) from feat/pwa into main

public/manifest.webmanifest

@@ -0,0 +1,60 @@
+{
+  "name": "Karbé — carbets fluviaux de Guyane",
+  "short_name": "Karbé",
+  "description": "Au fil de l'eau : louez des carbets le long des fleuves de Guyane.",
+  "start_url": "/decouvrir",
+  "id": "/decouvrir",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#000000",
+  "theme_color": "#059669",
+  "lang": "fr",
+  "categories": ["travel", "lifestyle"],
+  "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-192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icons/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Au fil de l'eau",
+      "short_name": "Découvrir",
+      "url": "/decouvrir",
+      "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Mes favoris",
+      "short_name": "Favoris",
+      "url": "/mes-favoris",
+      "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
+    },
+    {
+      "name": "Mon compte",
+      "short_name": "Compte",
+      "url": "/mon-compte",
+      "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
+    }
+  ]
+}

src/app/layout.tsx

@@ -52,6 +52,21 @@ export const metadata: Metadata = {
   },
   description:
     "Karbé, la marketplace de location de carbets fluviaux de Guyane.",
+  manifest: "/manifest.webmanifest",
+  applicationName: "Karbé",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "Karbé",
+  },
+  icons: {
+    icon: [
+      { url: "/icons/favicon-32.png", sizes: "32x32", type: "image/png" },
+      { url: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
+      { url: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
+    ],
+    apple: "/icons/apple-touch-icon.png",
+  },
   openGraph: {
     type: "website",
     siteName: "Karbé",
@@ -62,6 +77,13 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport = {
+  themeColor: "#059669",
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover" as const,
+};
+
 export default async function RootLayout({
   children,
 }: Readonly<{