arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
2026-07-20 23:55:22 +02:00
parent b17984fbef
commit 5f270dee08
7 changed files with 97 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+9
View File
@@ -2,6 +2,15 @@
All notable changes to Epicure are documented here. This file is mirrored in-app at `/changelog` (and in the admin dashboard) via `apps/web/lib/changelog.ts` — update both together. All notable changes to Epicure are documented here. This file is mirrored in-app at `/changelog` (and in the admin dashboard) via `apps/web/lib/changelog.ts` — update both together.
## 0.64.0 — 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.
## 0.63.0 — 2026-07-21 00:15 ## 0.63.0 — 2026-07-21 00:15
### Added ### Added
apps/web/app/layout.tsx
+13 -1
View File
@@ -5,6 +5,7 @@ import { Providers } from "@/components/providers";
import { auth } from "@/lib/auth/server"; import { auth } from "@/lib/auth/server";
import type { Locale } from "@/lib/i18n/provider"; import type { Locale } from "@/lib/i18n/provider";
import { SwRegister } from "@/components/pwa/sw-register"; import { SwRegister } from "@/components/pwa/sw-register";
import { InstallPrompt } from "@/components/pwa/install-prompt";
import { getMarketingLocale } from "@/lib/marketing-locale"; import { getMarketingLocale } from "@/lib/marketing-locale";
import "./globals.css"; import "./globals.css";
@@ -22,11 +23,21 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Epicure", title: "Epicure",
description: "Your personal AI-powered recipe book.", 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 = { export const viewport: Viewport = {
themeColor: "#18181b", themeColor: "#18181b",
viewportFit: "cover",
}; };
export default async function RootLayout({ export default async function RootLayout({
@@ -47,6 +58,7 @@ export default async function RootLayout({
<body className="min-h-full flex flex-col"> <body className="min-h-full flex flex-col">
<Providers initialLocale={initialLocale}>{children}</Providers> <Providers initialLocale={initialLocale}>{children}</Providers>
<SwRegister /> <SwRegister />
<InstallPrompt />
</body> </body>
</html> </html>
); );
apps/web/app/manifest.ts
+2 -2
View File
@@ -10,8 +10,8 @@ export default function manifest(): MetadataRoute.Manifest {
background_color: "#ffffff", background_color: "#ffffff",
theme_color: "#18181b", theme_color: "#18181b",
icons: [ icons: [
{ src: "/icon-192.png", sizes: "192x192", type: "image/png" }, { src: "/icon-192.svg", sizes: "192x192", type: "image/svg+xml", purpose: "any" },
{ src: "/icon-512.png", sizes: "512x512", type: "image/png" }, { src: "/icon-512.svg", sizes: "512x512", type: "image/svg+xml", purpose: "any" },
], ],
}; };
} }
apps/web/components/pwa/install-prompt.tsx
+59
View File
@@ -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>
);
}
apps/web/lib/changelog.ts
+12 -1
View File
@@ -1,5 +1,5 @@
// Mirrors CHANGELOG.md at the repo root — update both together. // 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 = { export type ChangelogEntry = {
version: string; version: string;
@@ -11,6 +11,17 @@ export type ChangelogEntry = {
}; };
export const CHANGELOG: 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", version: "0.63.0",
date: "2026-07-21 00:15", date: "2026-07-21 00:15",
apps/web/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@epicure/web", "name": "@epicure/web",
"version": "0.63.0", "version": "0.64.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "epicure", "name": "epicure",
"version": "0.63.0", "version": "0.64.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "pnpm --filter web dev", "dev": "pnpm --filter web dev",