From 0e3abc2b53afb0b0496debc2d29afd558b0f2916 Mon Sep 17 00:00:00 2001 From: Joeshu <1442702103@qq.com> Date: Mon, 31 Mar 2025 19:28:28 +0800 Subject: [PATCH] docs: add third-party libraries to check update methods (#5819) --- docs/src/guide/in-depth/check-updates.md | 44 ++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/docs/src/guide/in-depth/check-updates.md b/docs/src/guide/in-depth/check-updates.md index 4af9e333..d4a74da6 100644 --- a/docs/src/guide/in-depth/check-updates.md +++ b/docs/src/guide/in-depth/check-updates.md @@ -46,3 +46,47 @@ async function getVersionTag() { } } ``` + +## 替换为第三方库检查更新方式 + +如果需要通过其他方式检查更新,例如使用其他版本控制方式(chunkHash、version.json)、使用`Web Worker`在后台轮询更新、自定义检查更新时机(不使用轮询),你可以通过JS库`version-polling`来实现。 + +```bash +pnpm add version-polling +``` + +以`apps/web-antd`项目为例,在项目入口文件`main.ts`或者`app.vue`添加以下代码 + +```ts +import { h } from 'vue'; + +import { Button, notification } from 'ant-design-vue'; +import { createVersionPolling } from 'version-polling'; + +createVersionPolling({ + silent: import.meta.env.MODE === 'development', // 开发环境下不检测 + onUpdate: (self) => { + const key = `open${Date.now()}`; + notification.info({ + message: '提示', + description: '检测到网页有更新, 是否刷新页面加载最新版本?', + btn: () => + h( + Button, + { + type: 'primary', + size: 'small', + onClick: () => { + notification.close(key); + self.onRefresh(); + }, + }, + { default: () => '刷新' }, + ), + key, + duration: null, + placement: 'bottomRight', + }); + }, +}); +```