feat: use vite plugin pwa for generate right sw.js (#2658)

Co-authored-by: boojack <stevenlgtm@gmail.com>
1 year ago · be2db3f170
parent eefce6ade3
commit be2db3f170
7 changed files with 49 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,3 +17,5 @@ build
 .idea

 bin/air
+
+dev-dist
--- a/docs/development.md
+++ b/docs/development.md
@ -21,7 +21,7 @@ Memos is built with a curated tech stack. It is optimized for developer experien
   git clone https://github.com/usememos/memos
   ```

-2. Start backend server with `air`(with live reload)
+2. Start backend server with [`air`](https://github.com/cosmtrek/air) (with live reload)

   ```bash
   air -c scripts/.air.toml
--- a/web/index.html
+++ b/web/index.html
@ -6,20 +6,11 @@
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f4f4f5" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <link rel="manifest" href="/manifest.json" />
    <title>Memos</title>
    <!-- memos.metadata -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
-    <script>
-      var global = global || window;
-      window.addEventListener("load", () => {
-        if ("serviceWorker" in navigator) {
-          navigator.serviceWorker.register("/sw.js");
-        }
-      });
-    </script>
  </body>
 </html>
--- a/web/package.json
+++ b/web/package.json
@ -59,7 +59,8 @@
    "postcss": "^8.4.32",
    "prettier": "2.6.2",
    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vite-plugin-pwa": "^0.17.4"
  },
  "resolutions": {
    "csstype": "3.1.2"
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@ -1,33 +0,0 @@
-{
-  "short_name": "memos",
-  "name": "memos",
-  "description": "usememos/memos",
-  "start_url": "/",
-  "scope": "/",
-  "display": "standalone",
-  "theme_color": "#f4f4f5",
-  "background_color": "#f4f4f5",
-  "icons": [
-    {
-        "src": "/logo.png",
-        "type": "image/png",
-        "sizes": "16x16"
-    },
-    {
-        "src": "/logo.png",
-        "type": "image/png",
-        "sizes": "32x32"
-    },
-    {
-        "src": "/logo.png",
-        "sizes": "192x192",
-        "type": "image/png"
-    },
-    {
-        "src": "/logo.png",
-        "sizes": "512x512",
-        "type": "image/png",
-        "purpose": "any maskable"
-    }
-  ]
-}
--- a/web/public/sw.js
+++ b/web/public/sw.js
@ -1,10 +0,0 @@
-self.addEventListener("install", (event) => {
-    event.waitUntil((async () => {})());
-  });
-  
-  self.addEventListener("activate", (event) => {
-    event.waitUntil((async () => {})());
-  });
-  
-  self.addEventListener("fetch", (event) => {});
-  
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@ -1,6 +1,7 @@
 import react from "@vitejs/plugin-react-swc";
 import { resolve } from "path";
 import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";

 let devProxyServer = "http://localhost:8081/";
 if (process.env.DEV_PROXY_SERVER && process.env.DEV_PROXY_SERVER.length > 0) {
@ -10,7 +11,49 @@ if (process.env.DEV_PROXY_SERVER && process.env.DEV_PROXY_SERVER.length > 0) {

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      manifestFilename: "manifest.json",
+      registerType: "autoUpdate",
+      devOptions: {
+        enabled: true,
+      },
+      manifest: {
+        short_name: "memos",
+        name: "memos",
+        description: "usememos/memos",
+        start_url: "/",
+        scope: "/",
+        display: "standalone",
+        theme_color: "#f4f4f5",
+        background_color: "#f4f4f5",
+        icons: [
+          {
+            src: "/logo.png",
+            type: "image/png",
+            sizes: "16x16",
+          },
+          {
+            src: "/logo.png",
+            type: "image/png",
+            sizes: "32x32",
+          },
+          {
+            src: "/logo.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/logo.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+    }),
+  ],
  server: {
    host: "0.0.0.0",
    port: 3001,