From 5d1022189815bed3ae4154f380826e902e4a087e Mon Sep 17 00:00:00 2001 From: 0fatal <2816813070@qq.com> Date: Tue, 26 Dec 2023 16:26:47 +0800 Subject: [PATCH 1/2] feat(web): support version upgrade prompt --- web/public/locales/en/translation.json | 6 ++- web/public/locales/zh-CN/translation.json | 6 ++- web/public/locales/zh/translation.json | 6 ++- web/src/App.tsx | 2 + web/src/components/UpgradePrompt/index.tsx | 57 ++++++++++++++++++++++ web/tsconfig.json | 33 ++++++++++--- web/vite.config.ts | 2 +- 7 files changed, 101 insertions(+), 11 deletions(-) create mode 100644 web/src/components/UpgradePrompt/index.tsx diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 0024fb5a46..7d04e39455 100644 --- 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" + } } \ No newline at end of file diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index f5fc61975e..afdc093278 100644 --- 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": "点击立即更新" + } } \ No newline at end of file diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index 56defe8bcc..0388e5c96e 100644 --- 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": "点击立即更新" + } } \ No newline at end of file diff --git a/web/src/App.tsx b/web/src/App.tsx index aa5b81d1c9..b437d2963e 100644 --- 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" ? : null} + diff --git a/web/src/components/UpgradePrompt/index.tsx b/web/src/components/UpgradePrompt/index.tsx new file mode 100644 index 0000000000..448562285e --- /dev/null +++ b/web/src/components/UpgradePrompt/index.tsx @@ -0,0 +1,57 @@ +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) { + r && + 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: () => ( +
+ updateServiceWorker(true)} + > + +

🎉 {t("UpgradeVersionTip.Title")}

+

{t("UpgradeVersionTip.Description")}

+ + +
+ ), + }); + } + }, [needRefresh]); + + return <>; +}; + +export default UpgradePrompt; diff --git a/web/tsconfig.json b/web/tsconfig.json index 007e05ef84..5555528d14 100644 --- 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" + ] +} \ No newline at end of file diff --git a/web/vite.config.ts b/web/vite.config.ts index 86c4afe691..d6b4b27239 100644 --- 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, From d420816b71780ad3e57d69038444dde229cc8ae2 Mon Sep 17 00:00:00 2001 From: 0fatal <2816813070@qq.com> Date: Fri, 29 Dec 2023 17:52:06 +0800 Subject: [PATCH 2/2] chore --- web/src/components/UpgradePrompt/index.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/web/src/components/UpgradePrompt/index.tsx b/web/src/components/UpgradePrompt/index.tsx index 448562285e..57e22fb290 100644 --- a/web/src/components/UpgradePrompt/index.tsx +++ b/web/src/components/UpgradePrompt/index.tsx @@ -9,12 +9,14 @@ const UpgradePrompt = () => { updateServiceWorker, } = useRegisterSW({ onRegistered(r) { - r && - setInterval(() => { - if (!(!r.installing && navigator)) return; - if ("connection" in navigator && !navigator.onLine) return; - r.update(); - }, 5 * 60 * 1000); // check new version every 5 mins + 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 }, }); @@ -37,7 +39,7 @@ const UpgradePrompt = () => { bg="primary.500" borderRadius={10} shadow="2xl" - className="cursor-pointer select-none hover:scale-105 focus:outline-none active:bg-primary-700" + className="animate-bounce cursor-pointer select-none hover:scale-105 focus:outline-none active:bg-primary-700" onClick={() => updateServiceWorker(true)} >