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>
This commit is contained in:
Arnaud
+13
-1
@@ -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>
|
||||
);
|
||||
|
||||
@@ -10,8 +10,8 @@ export default function manifest(): MetadataRoute.Manifest {
|
||||
background_color: "#ffffff",
|
||||
theme_color: "#18181b",
|
||||
icons: [
|
||||
{ src: "/icon-192.png", sizes: "192x192", type: "image/png" },
|
||||
{ src: "/icon-512.png", sizes: "512x512", type: "image/png" },
|
||||
{ src: "/icon-192.svg", sizes: "192x192", type: "image/svg+xml", purpose: "any" },
|
||||
{ src: "/icon-512.svg", sizes: "512x512", type: "image/svg+xml", purpose: "any" },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { X, Download } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const DISMISSED_KEY = "epicure:install-prompt-dismissed";
|
||||
|
||||
type BeforeInstallPromptEvent = Event & {
|
||||
prompt: () => Promise<void>;
|
||||
userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
|
||||
};
|
||||
|
||||
/** Only fires on Chromium-based browsers (Chrome/Edge/Android) — Safari and
|
||||
* Firefox never dispatch beforeinstallprompt, so this banner simply never
|
||||
* appears there, which is the correct behavior (no fallback UI to build). */
|
||||
export function InstallPrompt() {
|
||||
const [deferredEvent, setDeferredEvent] = useState<BeforeInstallPromptEvent | null>(null);
|
||||
const [dismissed, setDismissed] = useState(() => typeof localStorage !== "undefined" && localStorage.getItem(DISMISSED_KEY) === "true");
|
||||
|
||||
useEffect(() => {
|
||||
function handler(e: Event) {
|
||||
e.preventDefault();
|
||||
setDeferredEvent(e as BeforeInstallPromptEvent);
|
||||
}
|
||||
window.addEventListener("beforeinstallprompt", handler);
|
||||
return () => window.removeEventListener("beforeinstallprompt", handler);
|
||||
}, []);
|
||||
|
||||
function dismiss() {
|
||||
localStorage.setItem(DISMISSED_KEY, "true");
|
||||
setDismissed(true);
|
||||
}
|
||||
|
||||
async function install() {
|
||||
if (!deferredEvent) return;
|
||||
await deferredEvent.prompt();
|
||||
await deferredEvent.userChoice;
|
||||
setDeferredEvent(null);
|
||||
}
|
||||
|
||||
if (!deferredEvent || dismissed) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 left-1/2 z-50 flex w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 items-center gap-3 rounded-lg border bg-background p-3 shadow-lg">
|
||||
<Download className="h-5 w-5 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">Install Epicure</p>
|
||||
<p className="text-xs text-muted-foreground">Add to your home screen for quick access.</p>
|
||||
</div>
|
||||
<Button type="button" size="sm" onClick={() => { void install(); }}>
|
||||
Install
|
||||
</Button>
|
||||
<button type="button" onClick={dismiss} aria-label="Dismiss" className="text-muted-foreground hover:text-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
// Mirrors CHANGELOG.md at the repo root — update both together.
|
||||
export const APP_VERSION = "0.63.0";
|
||||
export const APP_VERSION = "0.64.0";
|
||||
|
||||
export type ChangelogEntry = {
|
||||
version: string;
|
||||
@@ -11,6 +11,17 @@ export type ChangelogEntry = {
|
||||
};
|
||||
|
||||
export const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "0.64.0",
|
||||
date: "2026-07-21 00:30",
|
||||
fixed: [
|
||||
"The web app manifest was never actually linked into the page (pointed at /manifest.json, but the real route is /manifest.webmanifest) and its icons referenced PNGs that don't exist in the repo — both silently broke install eligibility on Chrome/Android. Manifest now links correctly and icons point at the existing SVGs.",
|
||||
],
|
||||
added: [
|
||||
"Added apple-mobile-web-app meta tags and a viewport-fit=cover safe-area setting for iOS home-screen installs.",
|
||||
"Added an install-app banner (Chrome/Edge/Android only, via the standard beforeinstallprompt event) so the PWA install prompt is a first-class, dismissible UI element instead of relying on the browser's own icon.",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "0.63.0",
|
||||
date: "2026-07-21 00:15",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@epicure/web",
|
||||
"version": "0.63.0",
|
||||
"version": "0.64.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
Reference in New Issue
Block a user