⚡ perf: Use nextjs pwa feat to gen manifest file (#4042)

* ⚡ perf: Use nextjs pwa feat to gen manifest file * 🐛 fix: Fix review problem * ✅ test: Add test * 💄 style: Update next config * 🐛 fix: Fix test config * 💄 style: Update layout
lobehub · Sep 21, 2024 · 8afb4e2 · 8afb4e2
1 parent d3aa60a
commit 8afb4e2
Show file tree

Hide file tree

Showing 15 changed files with 729 additions and 176 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -101,6 +101,19 @@ const nextConfig = {
         ],
         source: '/apple-touch-icon.png',
       },
+      {
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/javascript; charset=utf-8',
+          },
+          {
+            key: 'Content-Security-Policy',
+            value: "default-src 'self'; script-src 'self'",
+          },
+        ],
+        source: '/sw.js',
+      },
     ];
   },
 
@@ -113,10 +126,42 @@ const nextConfig = {
       source: '/sitemap.xml',
     },
     {
-      destination: '/discover',
+      destination: '/manifest.webmanifest',
+      permanent: true,
+      source: '/manifest.json',
+    },
+    {
+      destination: '/discover/assistant/:slug',
+      has: [
+        {
+          key: 'agent',
+          type: 'query',
+          value: '(?<slug>.*)',
+        },
+      ],
       permanent: true,
       source: '/market',
     },
+    {
+      destination: '/discover/assistants',
+      permanent: true,
+      source: '/discover/assistant',
+    },
+    {
+      destination: '/discover/models',
+      permanent: true,
+      source: '/discover/model',
+    },
+    {
+      destination: '/discover/plugins',
+      permanent: true,
+      source: '/discover/plugin',
+    },
+    {
+      destination: '/discover/providers',
+      permanent: true,
+      source: '/discover/provider',
+    },
     {
       destination: '/settings/common',
       permanent: true,

diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/app/(main)/discover/(detail)/_layout/Desktop.tsx b/src/app/(main)/discover/(detail)/_layout/Desktop.tsx
@@ -9,10 +9,14 @@ const Layout = ({ children }: PropsWithChildren) => {
       align={'center'}
       flex={1}
       padding={24}
-      style={{ overflowX: 'hidden', overflowY: 'scroll', position: 'relative' }}
+      style={{ overflowX: 'hidden', overflowY: 'auto', position: 'relative' }}
       width={'100%'}
     >
-      <Flexbox gap={24} style={{ maxWidth: MAX_WIDTH, position: 'relative' }} width={'100%'}>
+      <Flexbox
+        gap={24}
+        style={{ maxWidth: MAX_WIDTH, minHeight: '100%', position: 'relative' }}
+        width={'100%'}
+      >
         {children}
       </Flexbox>
     </Flexbox>

diff --git a/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx b/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx
@@ -27,7 +27,7 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getAssistantById(locale, identifier);
-  if (!data) return notFound();
+  if (!data) return;
 
   const { meta, createdAt, homepage, author } = data;
 

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/page.tsx
@@ -27,7 +27,7 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getModelById(locale, identifier);
-  if (!data) return notFound();
+  if (!data) return;
 
   const { meta, createdAt, providers } = data;
 

diff --git a/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx b/src/app/(main)/discover/(detail)/plugin/[slug]/page.tsx
@@ -24,7 +24,7 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getPluginById(locale, identifier);
-  if (!data) return notFound();
+  if (!data) return;
 
   const { meta, createdAt, homepage, author } = data;
 

diff --git a/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx b/src/app/(main)/discover/(detail)/provider/[slug]/page.tsx
@@ -27,7 +27,7 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
 
   const discoverService = new DiscoverService();
   const data = await discoverService.getProviderById(locale, identifier);
-  if (!data) return notFound();
+  if (!data) return;
 
   const { meta, createdAt, models } = data;
 

diff --git a/src/app/manifest.ts b/src/app/manifest.ts
@@ -0,0 +1,86 @@
+import { kebabCase } from 'lodash-es';
+import type { MetadataRoute } from 'next';
+
+import { BRANDING_LOGO_URL, BRANDING_NAME } from '@/const/branding';
+import { manifestModule } from '@/server/manifest';
+import { translation } from '@/server/translation';
+
+const manifest = async (): Promise<MetadataRoute.Manifest | any> => {
+  const { t } = await translation('metadata');
+
+  return manifestModule.generate({
+    description: t('chat.description', { appName: BRANDING_NAME }),
+    icons: [
+      {
+        purpose: 'any',
+        sizes: '192x192',
+        url: '/icons/icon-192x192.png',
+      },
+      {
+        purpose: 'maskable',
+        sizes: '192x192',
+        url: '/icons/icon-192x192.maskable.png',
+      },
+      {
+        purpose: 'any',
+        sizes: '512x512',
+        url: '/icons/icon-512x512.png',
+      },
+      {
+        purpose: 'maskable',
+        sizes: '512x512',
+        url: '/icons/icon-512x512.maskable.png',
+      },
+    ],
+    id: kebabCase(BRANDING_NAME),
+    name: BRANDING_NAME,
+    screenshots: BRANDING_LOGO_URL
+      ? []
+      : [
+          {
+            form_factor: 'narrow',
+            url: '/screenshots/shot-1.mobile.png',
+          },
+          {
+            form_factor: 'narrow',
+            url: '/screenshots/shot-2.mobile.png',
+          },
+          {
+            form_factor: 'narrow',
+            sizes: '640x1138',
+
+            url: '/screenshots/shot-3.mobile.png',
+          },
+          {
+            form_factor: 'narrow',
+            url: '/screenshots/shot-4.mobile.png',
+          },
+          {
+            form_factor: 'narrow',
+            url: '/screenshots/shot-5.mobile.png',
+          },
+          {
+            form_factor: 'wide',
+            url: '/screenshots/shot-1.desktop.png',
+          },
+          {
+            form_factor: 'wide',
+            url: '/screenshots/shot-2.desktop.png',
+          },
+          {
+            form_factor: 'wide',
+            url: '/screenshots/shot-3.desktop.png',
+          },
+          {
+            form_factor: 'wide',
+            url: '/screenshots/shot-4.desktop.png',
+          },
+          {
+            form_factor: 'wide',
+            url: '/screenshots/shot-5.desktop.png',
+          },
+        ],
+  });
+};
+
+export default manifest;
diff --git a/src/features/PWAInstall/index.tsx b/src/features/PWAInstall/index.tsx
@@ -68,7 +68,11 @@ const PWAInstall = memo(() => {
 
   if (isPWA) return null;
   return (
-    <PWA description={t('chat.description', { appName: BRANDING_NAME })} id={PWA_INSTALL_ID} />
+    <PWA
+      description={t('chat.description', { appName: BRANDING_NAME })}
+      id={PWA_INSTALL_ID}
+      manifest-url={'/manifest.webmanifest'}
+    />
   );
 });