feat: add PWA support with service worker and install prompt

2026-04-03 04:39:19 +02:00
parent 081c865018
commit 5aad97d64e
6 changed files with 255 additions and 0 deletions
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { headers } from "next/headers";
 import { getLocale } from "next-intl/server";
+import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
+import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
 import "./globals.css";

 const geistSans = Geist({
@@ -20,6 +22,15 @@ export async function generateMetadata(): Promise<Metadata> {
  return {
    title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
    description: "Minimalist webmail client using JMAP protocol",
+    manifest: "/manifest.json",
+    appleWebApp: {
+      capable: true,
+      statusBarStyle: "black-translucent",
+      title: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail",
+    },
+    formatDetection: {
+      telephone: false,
+    },
    ...(faviconUrl ? { icons: { icon: faviconUrl } } : {}),
  };
 }
@@ -36,6 +47,14 @@ export default async function RootLayout({
  return (
    <html lang={locale} suppressHydrationWarning>
      <head>
+        <meta name="theme-color" content="#ffffff" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-title"
+          content={process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || "Webmail"}
+        />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        {parentOrigin && (
          <meta name="parent-origin" content={parentOrigin} />
        )}
@@ -63,7 +82,9 @@ export default async function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
+        <ServiceWorkerRegistration />
        {children}
+        <PWAInstallPrompt />
      </body>
    </html>
  );