fix: support PWA on Netlify (#79)

Co-authored-by: yzh990918 <251205668@qq.com>
anse-app · Jul 4, 2023 · 7904c91 · 7904c91
1 parent 071158c
commit 7904c91
Show file tree

Hide file tree

Showing 12 changed files with 2,320 additions and 2,533 deletions.
diff --git a/README.md b/README.md
@@ -65,9 +65,6 @@ Q: Accelerate domestic access without the need for proxy deployment tutorial?
 
 A: You can refer to this tutorial: https://github.com/anse-app/chatgpt-demo/discussions/270
 
-Q: `PWA` is not working?
-
-A: Current `PWA` does not support deployment on Netlify, you can choose vercel or node deployment.
 ## Contributing
 
 This project exists thanks to all those who contributed.

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -67,10 +67,6 @@ Q: 无需代理部署教程即可加速国内访问？?
 
 A: 你可以参考此教程: https://github.com/anse-app/chatgpt-demo/discussions/270
 
-Q: `PWA` 不工作？
-
-A: 当前的 PWA 不支持 Netlify 部署，您可以选择 vercel 或 node 部署。
-
 ## 参与贡献
 
 这个项目的存在要感谢所有做出贡献的人。

diff --git a/README_JA-JP.md b/README_JA-JP.md
@@ -65,9 +65,6 @@ Q: プロキシを導入することなく国内アクセスを高速化する
 
 A: こちらのチュートリアルをご参照ください: https://github.com/anse-app/chatgpt-demo/discussions/270
 
-Q: `PWA` が動作しません。
-
-A: 現在の `PWA` は Netlify へのデプロイをサポートしていません。
 ## コントリビュート
 
 このプロジェクトが存在するのは、コントリビュートしてくださったすべての方々のおかげです。

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -2,20 +2,16 @@ import { defineConfig } from 'astro/config'
 import unocss from 'unocss/astro'
 import solidJs from '@astrojs/solid-js'
 import node from '@astrojs/node'
-import { VitePWA } from 'vite-plugin-pwa'
+import AstroPWA from '@vite-pwa/astro'
 import vercel from '@astrojs/vercel/edge'
 import netlify from '@astrojs/netlify/edge-functions'
 import disableBlocks from './plugins/disableBlocks'
 
 const envAdapter = () => {
-  if (process.env.OUTPUT === 'vercel') {
-    return vercel()
-  } else if (process.env.OUTPUT === 'netlify') {
-    return netlify()
-  } else {
-    return node({
-      mode: 'standalone',
-    })
+  switch (process.env.OUTPUT) {
+    case 'vercel': return vercel()
+    case 'netlify': return netlify()
+    default: return node({ mode: 'standalone' })
   }
 }
 
@@ -24,6 +20,42 @@ export default defineConfig({
   integrations: [
     unocss(),
     solidJs(),
+    AstroPWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'inline',
+      manifest: {
+        name: 'Anse',
+        short_name: 'Anse',
+        description: 'Anse is a fully optimized UI for AI Chats.',
+        theme_color: '#101010',
+        background_color: '#ffffff',
+        icons: [
+          {
+            src: 'pwa-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'pwa-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: 'logo.svg',
+            sizes: '32x32',
+            type: 'image/svg',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+      client: {
+        installPrompt: true,
+        periodicSyncForUpdates: 20,
+      },
+      devOptions: {
+        enabled: false,
+      },
+    }),
   ],
   output: 'server',
   adapter: envAdapter(),
@@ -33,42 +65,7 @@ export default defineConfig({
   vite: {
     plugins: [
       process.env.OUTPUT === 'vercel' && disableBlocks(),
-      process.env.OUTPUT === 'netlify' && disableBlocks('netlify'),
-      process.env.OUTPUT !== 'netlify' && VitePWA({
-        registerType: 'autoUpdate',
-        manifest: {
-          name: 'Anse',
-          short_name: 'Anse',
-          description: 'Anse is a fully optimized UI for AI Chats.',
-          theme_color: '#101010',
-          background_color: '#ffffff',
-          icons: [
-            {
-              src: 'pwa-192.png',
-              sizes: '192x192',
-              type: 'image/png',
-            },
-            {
-              src: 'pwa-512.png',
-              sizes: '512x512',
-              type: 'image/png',
-            },
-            {
-              src: 'logo.svg',
-              sizes: '32x32',
-              type: 'image/svg',
-              purpose: 'any maskable',
-            },
-          ],
-        },
-        client: {
-          installPrompt: true,
-          periodicSyncForUpdates: 20,
-        },
-        devOptions: {
-          enabled: false,
-        },
-      }),
+      process.env.OUTPUT === 'netlify' && disableBlocks(),
     ],
   },
 })
diff --git a/package.json b/package.json
@@ -16,65 +16,63 @@
     "postinstall": "npx simple-git-hooks"
   },
   "dependencies": {
-    "@astrojs/netlify": "2.0.0",
-    "@astrojs/node": "^5.1.1",
-    "@astrojs/solid-js": "^2.1.0",
-    "@astrojs/vercel": "^3.2.2",
+    "@astrojs/netlify": "2.3.0",
+    "@astrojs/node": "^5.3.0",
+    "@astrojs/solid-js": "^2.2.0",
+    "@astrojs/vercel": "^3.6.0",
     "@mapbox/rehype-prism": "^0.8.0",
-    "@nanostores/solid": "^0.3.2",
-    "@solid-primitives/clipboard": "^1.5.4",
-    "@solid-primitives/keyboard": "^1.1.0",
+    "@nanostores/solid": "^0.4.2",
+    "@solid-primitives/clipboard": "^1.5.6",
+    "@solid-primitives/keyboard": "^1.2.3",
     "@solid-primitives/scheduled": "^1.3.2",
-    "@solid-primitives/scroll": "^2.0.14",
-    "@unocss/reset": "^0.50.6",
-    "@zag-js/checkbox": "^0.9.2",
-    "@zag-js/dialog": "^0.9.2",
-    "@zag-js/menu": "^0.9.2",
-    "@zag-js/select": "^0.9.2",
-    "@zag-js/slider": "^0.9.2",
-    "@zag-js/solid": "^0.9.2",
-    "@zag-js/switch": "^0.9.2",
-    "@zag-js/tabs": "^0.9.2",
-    "@zag-js/toast": "^0.9.2",
-    "@zag-js/toggle": "^0.9.2",
-    "@zag-js/tooltip": "^0.9.2",
-    "astro": "^2.2.0",
-    "bumpp": "^9.1.0",
-    "destr": "^1.2.2",
-    "eslint": "^8.37.0",
-    "eventsource-parser": "^0.1.0",
-    "idb-keyval": "^6.2.0",
+    "@solid-primitives/scroll": "^2.0.17",
+    "@unocss/reset": "^0.53.4",
+    "@zag-js/checkbox": "^0.10.3",
+    "@zag-js/dialog": "^0.10.3",
+    "@zag-js/menu": "^0.10.3",
+    "@zag-js/select": "^0.10.3",
+    "@zag-js/slider": "^0.10.3",
+    "@zag-js/solid": "^0.10.3",
+    "@zag-js/switch": "^0.10.3",
+    "@zag-js/tabs": "^0.10.3",
+    "@zag-js/toast": "^0.10.3",
+    "@zag-js/toggle": "^0.10.3",
+    "@zag-js/tooltip": "^0.10.3",
+    "astro": "^2.7.3",
+    "bumpp": "^9.1.1",
+    "destr": "^2.0.0",
+    "eslint": "^8.44.0",
+    "eventsource-parser": "^1.0.0",
+    "idb-keyval": "^6.2.1",
     "js-sha256": "^0.9.0",
-    "katex": "^0.16.4",
-    "nanostores": "^0.7.4",
+    "katex": "^0.16.8",
+    "nanostores": "^0.9.3",
     "prism-theme-vars": "^0.2.4",
-    "rehype-katex": "^6.0.2",
+    "rehype-katex": "^6.0.3",
     "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "remark-parse": "^10.0.1",
+    "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "solid-emoji-picker": "^0.2.0",
-    "solid-js": "1.6.12",
+    "solid-js": "1.7.7",
     "solid-transition-group": "^0.2.2",
     "unified": "^10.1.2"
   },
   "devDependencies": {
     "@evan-yang/eslint-config": "^1.0.9",
-    "@iconify-json/carbon": "^1.1.16",
-    "@iconify-json/simple-icons": "^1.1.48",
+    "@iconify-json/carbon": "^1.1.18",
+    "@iconify-json/simple-icons": "^1.1.58",
     "@types/mapbox__rehype-prism": "^0.8.0",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@unocss/preset-attributify": "^0.50.6",
-    "@unocss/preset-icons": "^0.50.6",
-    "@unocss/preset-typography": "^0.50.6",
-    "eslint-plugin-astro": "^0.24.0",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@vite-pwa/astro": "^0.1.1",
+    "eslint-plugin-astro": "^0.27.2",
     "html2canvas": "^1.4.1",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^13.2.3",
     "punycode": "^2.3.0",
     "simple-git-hooks": "^2.8.1",
-    "unocss": "^0.50.6",
-    "vite-plugin-pwa": "^0.14.7"
+    "unocss": "^0.50.8",
+    "vite-plugin-pwa": "^0.16.4"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

diff --git a/plugins/disableBlocks.ts b/plugins/disableBlocks.ts
@@ -1,17 +1,11 @@
-export default function plugin(platform?: string) {
+export default function plugin() {
   const transform = (code: string, id: string) => {
     if (id.includes('pages/api/generate.ts')) {
       return {
         code: code.replace(/^.*?#vercel-disable-blocks([\s\S]+?)#vercel-end.*?$/gm, ''),
         map: null,
       }
     }
-    if (platform === 'netlify' && id.includes('layouts/Layout.astro')) {
-      return {
-        code: code.replace(/^.*?<!-- netlify-disable-blocks -->([\s\S]+?)<!-- netlify-disable-end -->.*?$/gm, ''),
-        map: null,
-      }
-    }
   }
 
   return {