feat(web): support version upgrade prompt (#1754)

* feat(web): support version upgrade prompt * chore
labring · Jan 2, 2024 · 94e3e82 · 94e3e82
1 parent b9a4c91
commit 94e3e82
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 11 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -698,5 +698,9 @@
     "logs": "Logs"
   },
   "Deprecated": "Deprecated",
-  "All": "All"
+  "All": "All",
+  "UpgradeVersionTip": {
+    "Title": "Laf is ready to update!",
+    "Description": "Click to update"
+  }
 }
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -698,5 +698,9 @@
     "logs": "日志"
   },
   "Deprecated": "已弃用",
-  "All": "全部"
+  "All": "全部",
+  "UpgradeVersionTip": {
+    "Title": "Laf 新版本已经准备好了！",
+    "Description": "点击立即更新"
+  }
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -698,5 +698,9 @@
     "logs": "日志"
   },
   "Deprecated": "已弃用",
-  "All": "全部"
+  "All": "全部",
+  "UpgradeVersionTip": {
+    "Title": "Laf 新版本已经准备好了！",
+    "Description": "点击立即更新"
+  }
 }
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -10,6 +10,7 @@ import { ClickToComponent } from "click-to-react-component";
 
 import "@/utils/i18n";
 
+import UpgradePrompt from "./components/UpgradePrompt";
 import useAuthStore from "./pages/auth/store";
 import useSiteSettingStore from "./pages/siteSetting";
 import theme from "./chakraTheme";
@@ -74,6 +75,7 @@ function APP() {
         {process.env.NODE_ENV === "development" ? <ClickToComponent /> : null}
         <ChakraProvider theme={colorMode === "light" ? theme : darkTheme}>
           <Global styles={GlobalStyles} />
+          <UpgradePrompt />
           <BrowserRouter>
             <RouteElement />
           </BrowserRouter>

diff --git a/web/src/components/UpgradePrompt/index.tsx b/web/src/components/UpgradePrompt/index.tsx
@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, useToast, VStack } from "@chakra-ui/react";
+import { useRegisterSW } from "virtual:pwa-register/react";
+
+const UpgradePrompt = () => {
+  const {
+    needRefresh: [needRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      if (!r) return;
+      r.update();
+
+      setInterval(() => {
+        if (!(!r.installing && navigator)) return;
+        if ("connection" in navigator && !navigator.onLine) return;
+        r.update();
+      }, 5 * 60 * 1000); // check new version every 5 mins
+    },
+  });
+
+  const toast = useToast();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (needRefresh && !toast.isActive("laf-version-upgrade")) {
+      toast({
+        id: "laf-version-upgrade",
+        position: "bottom-right",
+        duration: null,
+        render: () => (
+          <div className="flex justify-end">
+            <Box
+              color="white"
+              w={210}
+              p={3}
+              m={3}
+              bg="primary.500"
+              borderRadius={10}
+              shadow="2xl"
+              className="animate-bounce cursor-pointer select-none hover:scale-105 focus:outline-none active:bg-primary-700"
+              onClick={() => updateServiceWorker(true)}
+            >
+              <VStack>
+                <p className="text-lg font-bold">🎉 {t("UpgradeVersionTip.Title")}</p>
+                <p className="tracking-wider">{t("UpgradeVersionTip.Description")}</p>
+              </VStack>
+            </Box>
+          </div>
+        ),
+      });
+    }
+  }, [needRefresh]);
+
+  return <></>;
+};
+
+export default UpgradePrompt;
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -1,9 +1,16 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "types": ["node"],
+    "types": [
+      "node",
+      "vite-plugin-pwa/client"
+    ],
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -18,10 +25,22 @@
     "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     }
   },
-  "include": ["src", "apis/v1/api-auto.d.ts", "public/locales"],
-  "references": [{ "path": "./tsconfig.node.json" }],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "src",
+    "apis/v1/api-auto.d.ts",
+    "public/locales"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -22,7 +22,7 @@ export default defineConfig(({ command, mode }) => {
       react(),
       pluginRewriteAll(),
       VitePWA({
-        registerType: "autoUpdate",
+        registerType: "prompt",
         includeAssets: ["favicon.ico", "apple-touch-icon.png", "masked-icon.png"],
         devOptions: {
           enabled: false,