更新

src/App.tsx

@@ -12,21 +12,22 @@ import UpdateTips from './update-tips';
 export default defineComponent({
   name: 'App',
   setup() {
-    const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
-      onRegistered(r: any) {
-        console.log(r, 'registered');
-        // if (r) {
-        //   setInterval(() => {
-        //     r.update(); // 手动触发更新检查
-        //   }, 30000); // 每 30 秒检查一次
-        // }
+    const { needRefresh, updateServiceWorker } = useRegisterSW({
+      onRegistered(r) {
+        console.log(r, 'Service Worker 已注册');
+        // 你可以在这里使用定时器手动检查更新
+        if (r) {
+          setInterval(() => {
+            r.update(); // 每 30 秒检查一次更新
+          }, 30000);
+        }
       },
       onNeedRefresh() {
-        console.log('新版本可用！');
-        alert('新版本可用！');
+        console.log('onNeedRefresh 事件触发');
+        console.log('needRefresh 状态:', needRefresh); // 确认 needRefresh 是否为 true
       },
       onOfflineReady() {
-        console.log('离线功能就绪。');
+        console.log('离线功能已就绪');
       }
     });
 
@@ -194,26 +195,26 @@ export default defineComponent({
 
       // console.log('app - onounted - test interval');
 
-      if ('serviceWorker' in navigator) {
-        // navigator.serviceWorker.addEventListener('message', event => {
-        //   console.log('messageType: ', event.data?.type);
-        //   if (event.data?.type === 'NEW_VERSION_AVAILABLE') {
-        //     console.log('New version available, refresh the page.');
-        //     // 可以提示用户刷新页面
-        //   }
-        // });
-        // navigator.serviceWorker.getRegistrations().then(registrations => {
-        //   for (const registration of registrations) {
-        //     if (registration.scope.startsWith(`https://${location.host}/`)) {
-        //       registration.unregister().then(() => {
-        //         console.log(
-        //           `Service Worker unregistered for https://${location.host}/`
-        //         );
-        //       });
-        //     }
-        //   }
-        // });
-      }
+      // if ('serviceWorker' in navigator) {
+      // navigator.serviceWorker.addEventListener('message', event => {
+      //   console.log('messageType: ', event.data?.type);
+      //   if (event.data?.type === 'NEW_VERSION_AVAILABLE') {
+      //     console.log('New version available, refresh the page.');
+      //     // 可以提示用户刷新页面
+      //   }
+      // });
+      // navigator.serviceWorker.getRegistrations().then(registrations => {
+      //   for (const registration of registrations) {
+      //     if (registration.scope.startsWith(`https://${location.host}/`)) {
+      //       registration.unregister().then(() => {
+      //         console.log(
+      //           `Service Worker unregistered for https://${location.host}/`
+      //         );
+      //       });
+      //     }
+      //   }
+      // });
+      // }
     });
     onUnmounted(() => {
       // window.removeEventListener('resize', resize);
@@ -234,15 +235,15 @@ export default defineComponent({
           </AppProvider>
         </NConfigProvider>
         <NModal maskClosable={false} v-model:show={needRefresh.value}>
-          <UpdateTips onConfirm={() => updateServiceWorker(true)} />
+          <UpdateTips
+            onConfirm={() => {
+              needRefresh.value = false;
+              setTimeout(() => {
+                updateServiceWorker(true);
+              }, 0);
+            }}
+          />
         </NModal>
-
-        <span style={{ display: 'none' }}>
-          {needRefresh.value ? '新内容可用，点击刷新页面' : '没有新内容'}
-        </span>
-        <span style={{ display: 'none' }}>
-          {offlineReady.value ? '应用已离线可用' : '没有离线'}
-        </span>
         {/* <NModal
           show={showModal.value}
           closeOnEsc={false}