fix: PWA manifest was never linked, icons 404'd; add install prompt (v0.64.0)

layout.tsx pointed <link rel="manifest"> at /manifest.json, but the actual generated route (app/manifest.ts) serves at /manifest.webmanifest -- the manifest was silently never picked up. Its icons also referenced icon-192.png/icon-512.png, which don't exist (only the .svg versions do). Both together meant Chrome/Android install eligibility was broken with no visible error. Also adds apple-mobile-web-app meta tags + viewport-fit=cover for iOS home-screen installs, and a dismissible install banner driven by the standard beforeinstallprompt event (Chromium-only by spec). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-20 23:55:22 +02:00
parent b17984fbef
commit 5f270dee08
7 changed files with 97 additions and 6 deletions
@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
 import { auth } from "@/lib/auth/server";
 import type { Locale } from "@/lib/i18n/provider";
 import { SwRegister } from "@/components/pwa/sw-register";
+import { InstallPrompt } from "@/components/pwa/install-prompt";
 import { getMarketingLocale } from "@/lib/marketing-locale";
 import "./globals.css";

@@ -22,11 +23,21 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
  title: "Epicure",
  description: "Your personal AI-powered recipe book.",
-  manifest: "/manifest.json",
+  manifest: "/manifest.webmanifest",
+  icons: {
+    icon: "/icon.svg",
+    apple: "/icon.svg",
+  },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Epicure",
+  },
 };

 export const viewport: Viewport = {
  themeColor: "#18181b",
+  viewportFit: "cover",
 };

 export default async function RootLayout({
@@ -47,6 +58,7 @@ export default async function RootLayout({
      <body className="min-h-full flex flex-col">
        <Providers initialLocale={initialLocale}>{children}</Providers>
        <SwRegister />
+        <InstallPrompt />
      </body>
    </html>
  );