PWA

src/app/layout.tsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from '@/components/theme-provider'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { Button } from '@/components/ui/button'
 import { env } from '@/lib/env'
-import type { Metadata } from 'next'
+import type { Metadata, Viewport } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
 import './globals.css'
@@ -40,18 +40,22 @@ export const metadata: Metadata = {
   applicationName: 'Spliit',
   icons: [
     {
-      url: '/public/android-chrome-192x192.png',
+      url: '/android-chrome-192x192.png',
       sizes: '192x192',
       type: 'image/png',
     },
     {
-      url: '/public/android-chrome-512x512.png',
+      url: '/android-chrome-512x512.png',
       sizes: '512x512',
       type: 'image/png',
     },
   ],
 }
 
+export const viewport: Viewport = {
+  themeColor: '#047857',
+}
+
 export default function RootLayout({
   children,
 }: {

src/app/manifest.ts

@@ -0,0 +1,32 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Spliit',
+    short_name: 'Spliit',
+    description:
+      'A minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#047857',
+    icons: [
+      {
+        src: '/android-chrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/android-chrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+      {
+        src: '/logo-512x512-maskable.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'maskable',
+      },
+    ],
+  }
+}