feat: add pwa support by next-pwa

2026-07-14 00:26:51 +08:00 · 2023-01-03 11:43:59 +08:00
parent b54bbb0aa1
commit 75725beaf3
7 changed files with 2305 additions and 523 deletions
@@ -70,4 +70,9 @@ const withDebugLocal = require('next-debug-local')(
  }
 );

-module.exports = withDebugLocal(nextConfig);
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  disable: process.env.NODE_ENV !== 'production',
+});
+
+module.exports = withDebugLocal(withPWA(nextConfig));
@@ -51,6 +51,7 @@
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "raw-loader": "^4.0.2",
+    "next-pwa": "^5.6.0",
    "typescript": "4.8.3"
  },
  "eslintConfig": {
@@ -0,0 +1,17 @@
+{
+  "name": "AFFiNE",
+  "short_name": "AFFiNE",
+  "icons": [
+    {
+      "src": "/chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}
@@ -17,6 +17,7 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
+import Head from 'next/head';

 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
  ssr: false,
@@ -38,6 +39,15 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {

  return (
    <>
+      <Head>
+        <meta name="theme-color" content="#fafafa" />
+        <link rel="manifest" href="/manifest.json" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/icons/apple-touch-icon.png"
+        />
+      </Head>
      <Logger />
      <ProviderComposer
        contexts={[