监听部署更新

src/main.js

@@ -5,7 +5,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import directives from './directives';
-import { capsule } from '@/utils/tool';
+import { capsule, appUpdateObserver } from '@/utils/tool';
 import { Loading } from 'tdesign-vue-next';
 import 'virtual:svg-icons-register';
 import 'tdesign-vue-next/es/style/index.css';
@@ -28,3 +28,4 @@ app.config.globalProperties.$title = import.meta.env.VITE_APP_TITLE;
 app.mount('#app');
 
 capsule('质控平台', `v${packageJson.version} release`);
+appUpdateObserver();

src/utils/tool.js

@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash';
 import { useUserStore } from '@/store';
+import { DialogPlugin } from 'tdesign-vue-next';
 
 export const extractFileName = (str) => {
   if (/filename=([^;\s]*)/gi.test(str)) {
@@ -513,3 +514,38 @@ export function isEqual(objA, objB) {
       return false;
   }
 }
+
+export const appUpdateObserver = () => {
+  window.addEventListener(
+    'error',
+    (e) => {
+      if (e.target.localName === 'script' || e.target.localName === 'link') {
+        DialogPlugin({
+          header: '提示',
+          body: `检测到系统功能已升级，点击"确定"自动刷新获取更新`,
+          confirmBtn: '确定',
+          cancelBtn: null,
+          onConfirm: async () => {
+            if ('caches' in window) {
+              caches
+                .keys()
+                .then((cacheNames) => {
+                  const arr = cacheNames.map((cacheName) => {
+                    return caches.delete(cacheName);
+                  });
+                  return arr;
+                })
+                .then(() => {
+                  location.reload();
+                });
+            } else {
+              location.reload();
+            }
+          },
+        });
+      }
+      e.preventDefault();
+    },
+    true
+  );
+};