once load splash

src/app/[name]/api/logo/route.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { fetchWithTimeout } from "@/lib/helpers/fetchWithTimeout";
+import { PWA_ICON_192 } from "@/lib/helpers/pwaIcons";
 import { NextRequest, NextResponse } from "next/server";
 import sharp from "sharp";
 
@@ -7,7 +8,7 @@ export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
 const FETCH_TIMEOUT_MS = 5000;
-const DEFAULT_ICON = "/icons/web-app-manifest-192x192.png";
+const DEFAULT_ICON = PWA_ICON_192;
 
 export async function GET(
   request: NextRequest,

src/app/[name]/layout.tsx

@@ -5,6 +5,7 @@ import { getRestaurant } from './lib/getRestaurant'
 import { notFound } from 'next/navigation'
 import CartChecker from '@/components/CartChecker'
 import ActiveChecker from '@/components/ActiveChecker'
+import { PWA_ICON_192, PWA_ICON_512 } from '@/lib/helpers/pwaIcons'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
@@ -17,8 +18,8 @@ export async function generateMetadata({
   params: Promise<LayoutParams>
 }): Promise<Metadata> {
   const { name } = await params
-  const defaultIcon = "/icons/web-app-manifest-192x192.png"
-  const defaultIcon512 = "/icons/web-app-manifest-512x512.png"
+  const defaultIcon = PWA_ICON_192
+  const defaultIcon512 = PWA_ICON_512
 
   try {
     const restaurant = await getRestaurant(name)
@@ -56,12 +57,12 @@ export async function generateMetadata({
       manifest: `/${name}/manifest.webmanifest`,
       icons: {
         icon: [
-          { url: "/icons/web-app-manifest-192x192.png" },
-          { url: "/icons/web-app-manifest-192x192.png", sizes: "192x192", type: "image/png" },
-          { url: "/icons/web-app-manifest-512x512.png", sizes: "512x512", type: "image/png" },
+          { url: PWA_ICON_192 },
+          { url: PWA_ICON_192, sizes: "192x192", type: "image/png" },
+          { url: PWA_ICON_512, sizes: "512x512", type: "image/png" },
         ],
-        shortcut: "/icons/web-app-manifest-192x192.png",
-        apple: "/icons/web-app-manifest-192x192.png",
+        shortcut: PWA_ICON_192,
+        apple: PWA_ICON_192,
       },
     }
   }

src/app/[name]/manifest.webmanifest/route.ts

@@ -1,47 +1,18 @@
 import { NextResponse } from "next/server";
+import { buildPwaManifestIcons } from "@/lib/helpers/pwaIcons";
 import { getRestaurant } from "../lib/getRestaurant";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
 function buildManifestIcons(name: string, logo?: string | null) {
-  const default192 = "/icons/web-app-manifest-192x192.png";
-  const default512 = "/icons/web-app-manifest-512x512.png";
-
   if (logo && logo.trim() !== "") {
     const logo192 = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=192`;
     const logo512 = `/${name}/api/logo?url=${encodeURIComponent(logo)}&size=512`;
-
-    return [
-      {
-        src: logo192,
-        sizes: "192x192",
-        type: "image/png",
-        purpose: "any",
-      },
-      {
-        src: logo512,
-        sizes: "512x512",
-        type: "image/png",
-        purpose: "any",
-      },
-    ];
+    return buildPwaManifestIcons(logo192, logo512);
   }
 
-  return [
-    {
-      src: default192,
-      sizes: "192x192",
-      type: "image/png",
-      purpose: "any",
-    },
-    {
-      src: default512,
-      sizes: "512x512",
-      type: "image/png",
-      purpose: "any",
-    },
-  ];
+  return buildPwaManifestIcons();
 }
 
 export async function GET(

src/app/api/pwa-icon/[size]/route.ts

@@ -0,0 +1,34 @@
+import { readFile } from 'fs/promises';
+import path from 'path';
+import sharp from 'sharp';
+import { NextRequest, NextResponse } from 'next/server';
+
+const VALID_SIZES = [192, 512] as const;
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ size: string }> },
+) {
+  const { size: sizeParam } = await params;
+  const size = parseInt(sizeParam, 10);
+
+  if (!VALID_SIZES.includes(size as (typeof VALID_SIZES)[number])) {
+    return new NextResponse('Invalid size', { status: 400 });
+  }
+
+  try {
+    const svgPath = path.join(process.cwd(), 'public', 'icon0.svg');
+    const svgBuffer = await readFile(svgPath);
+    const pngBuffer = await sharp(svgBuffer).resize(size, size).png().toBuffer();
+
+    return new NextResponse(new Uint8Array(pngBuffer), {
+      headers: {
+        'Content-Type': 'image/png',
+        'Cache-Control': 'public, max-age=31536000, immutable',
+      },
+    });
+  } catch (error) {
+    console.error('Error generating PWA icon:', error);
+    return new NextResponse('Failed to generate icon', { status: 500 });
+  }
+}

src/app/layout.tsx

@@ -7,11 +7,11 @@ import initTranslations from '@/lib/i18n';
 import TranslationsProvider from "@/components/utils/TranslationsProdiver";
 import ToastContainer from "@/components/Toast";
 import { ThemeColorSetter } from "@/components/ThemeColorSetter";
+import PwaServiceWorker from "@/components/PwaServiceWorker";
 
 export const metadata: Metadata = {
   title: 'Dashboard',
   description: 'Webapp dashboard',
-  manifest: '/manifest.json',
 }
 
 export const viewport: Viewport = {
@@ -54,6 +54,7 @@ export default async function RootLayout({
             locale={locale}
             resources={resources}>
             <ThemeColorSetter />
+            <PwaServiceWorker />
             <div id="root" className="h-svh overflow-hidden">
               {children}
             </div>