feat: implement PWA, manifest, service worker and offline indicator

2025-12-17 23:15:51 +01:00
parent 5807d949ef
commit 19689ffd2f
71 changed files with 1573 additions and 112 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,34 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import PWARegistration from "@/components/PWARegistration";
+import OfflineIndicator from "@/components/OfflineIndicator";

 const inter = Inter({ subsets: ["latin"] });

 export const metadata: Metadata = {
-    title: "Whisky Vault",
-    description: "Your digital whisky collection",
+    title: {
+        default: "Whisky Vault",
+        template: "%s | Whisky Vault"
+    },
+    description: "Dein persönlicher Whisky-Begleiter zum Scannen und Verkosten.",
    manifest: "/manifest.json",
+    appleWebApp: {
+        capable: true,
+        statusBarStyle: "default",
+        title: "Whisky Vault",
+    },
+    formatDetection: {
+        telephone: false,
+    },
+};
+
+export const viewport = {
+    themeColor: "#000000",
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
 };

 export default function RootLayout({
@@ -16,8 +37,12 @@ export default function RootLayout({
    children: React.ReactNode;
 }>) {
    return (
-        <html lang="en">
-            <body className={inter.className}>{children}</body>
+        <html lang="de">
+            <body className={inter.className}>
+                <PWARegistration />
+                <OfflineIndicator />
+                {children}
+            </body>
        </html>
    );
 }
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -0,0 +1,25 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+    return {
+        name: 'Whisky Vault',
+        short_name: 'WhiskyVault',
+        description: 'Dein persönlicher Whisky-Begleiter zum Scannen und Verkosten.',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#000000',
+        theme_color: '#d97706',
+        icons: [
+            {
+                src: '/icon-192.png',
+                sizes: '192x192',
+                type: 'image/png',
+            },
+            {
+                src: '/icon-512.png',
+                sizes: '512x512',
+                type: 'image/png',
+            },
+        ],
+    }
+}