Merge branch 'iteration-hot-pwa' into tempDev

dev-dist/sw.js

@@ -1,95 +1,13 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  const registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    const exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-16108a29'], (function (workbox) { 'use strict';
-
-  self.addEventListener('message', event => {
-    if (event.data && event.data.type === 'SKIP_WAITING') {
-      self.skipWaiting();
-    }
-  });
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "url": "index.html",
-    "revision": "0.15qi5i9v94g"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));
+
+self.addEventListener('install', function(e) {
+  self.skipWaiting();
+});
+self.addEventListener('activate', function(e) {
+  self.registration.unregister()
+    .then(function() {
+      return self.clients.matchAll();
+    })
+    .then(function(clients) {
+      clients.forEach(client => client.navigate(client.url))
+    });
+});

src/App.tsx

@@ -4,10 +4,10 @@ import { AppProvider } from './components/Application';
 import { RouterView } from 'vue-router';
 import setting from './settings/designSetting';
 import { lighten } from './utils';
-// import RouterError from './components/RouterError';
-import { useRegisterSW } from 'virtual:pwa-register/vue';
+import RouterError from './components/RouterError';
+// import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { useUserStore } from './store/modules/users';
-import UpdateTips from './update-tips';
+// import UpdateTips from './update-tips';
 
 export default defineComponent({
   name: 'App',
@@ -29,24 +29,24 @@ export default defineComponent({
     //     console.log('离线功能就绪。');
     //   }
     // });
-    const { needRefresh, updateServiceWorker } = useRegisterSW({
-      onRegistered(r) {
-        console.log(r, 'Service Worker 已注册');
-        // 你可以在这里使用定时器手动检查更新
-        if (r) {
-          setInterval(() => {
-            r.update(); // 每 30 秒检查一次更新
-          }, 30000);
-        }
-      },
-      onNeedRefresh() {
-        console.log('onNeedRefresh 事件触发');
-        console.log('needRefresh 状态:', needRefresh); // 确认 needRefresh 是否为 true
-      },
-      onOfflineReady() {
-        console.log('离线功能已就绪');
-      }
-    });
+    // const { needRefresh, updateServiceWorker } = useRegisterSW({
+    //   onRegistered(r) {
+    //     console.log(r, 'Service Worker 已注册');
+    //     // 你可以在这里使用定时器手动检查更新
+    //     if (r) {
+    //       setInterval(() => {
+    //         r.update(); // 每 30 秒检查一次更新
+    //       }, 30000);
+    //     }
+    //   },
+    //   onNeedRefresh() {
+    //     console.log('onNeedRefresh 事件触发');
+    //     console.log('needRefresh 状态:', needRefresh); // 确认 needRefresh 是否为 true
+    //   },
+    //   onOfflineReady() {
+    //     console.log('离线功能已就绪');
+    //   }
+    // });
 
     // const isIOSChrome = ref();
     // const showModalMask = ref(false);
@@ -211,27 +211,6 @@ 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}/`
-        //         );
-        //       });
-        //     }
-        //   }
-        // });
-      }
     });
     onUnmounted(() => {
       // window.removeEventListener('resize', resize);
@@ -248,10 +227,10 @@ export default defineComponent({
           dateLocale={dateZhCN}>
           <AppProvider>
             <RouterView />
-            {/* <RouterError /> */}
+            <RouterError />
           </AppProvider>
         </NConfigProvider>
-        <NModal maskClosable={false} v-model:show={needRefresh.value}>
+        {/* <NModal maskClosable={false} v-model:show={needRefresh.value}>
           <UpdateTips
             onConfirm={() => {
               needRefresh.value = false;
@@ -263,7 +242,7 @@ export default defineComponent({
               }, 0);
             }}
           />
-        </NModal>
+        </NModal> */}
 
         {/* <NModal
           show={showModal.value}

src/components/RouterError/index.module.less

@@ -1,8 +1,7 @@
-.downMove {
+.commonWork {
   width: 400px;
-  // height: 309px;
-  background: #FFFFFF;
-  border-radius: 16px;
+  background: #ffffff;
+  border-radius: 18px;
   position: relative;
   padding: 0 30px 35px;
 
@@ -15,61 +14,49 @@
   }
 
   .dingPng {
-    width: 160px;
-    height: 160px;
+    width: 159px;
+    height: 159px;
     position: absolute;
     left: 50%;
-    margin-left: -80px;
-    top: -80px;
+    margin-left: -81px;
+    top: -57px;
     z-index: 100;
   }
 
-  .closeAble {
-    cursor: pointer;
-    width: 25px;
-    height: 25px;
-    position: absolute;
-    top: 18px;
-    right: 20px;
-  }
-
   h2 {
-    margin-top: 96px;
-    height: 33px;
-    font-size: 24px;
-    font-family: PingFangSC-Semibold, PingFang SC;
+    margin-top: 120px;
     font-weight: 600;
+    font-size: 24px;
     color: #131415;
     line-height: 33px;
     text-align: center;
-    margin-bottom: 15px;
   }
 
-  p {
+  .header {
     text-align: center;
+    padding: 20px 0 30px;
     font-size: 18px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
     color: #777777;
     line-height: 30px;
-  }
-
-  .submitAppBtn {
-    width: 256px;
-    height: 47px;
-    background: linear-gradient(305deg, #40C8FF 0%, #3192FF 100%);
-    border-radius: 24px;
-    border: none;
 
-    :global {
-      .n-button__border {
-        display: none;
-      }
-
-      .n-button__state-border {
-        display: none;
-      }
+    span {
+      color: #2784ff;
     }
+  }
 
+  .btn {
+    cursor: pointer;
+    width: 256px;
+    border-radius: 50px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 25px;
+    line-height: 47px;
+    margin: 0 auto;
+    --n-color: #40c8ff !important;
+    background: linear-gradient(305deg, #40c8ff 0%, #3192ff 100%);
   }
-}
+}
+

src/components/RouterError/index.tsx

@@ -1,174 +1,49 @@
-import { NButton, NModal, NSpace, useDialog } from 'naive-ui';
-import { defineComponent, onBeforeUnmount, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import downBg from './images/downBg.png';
-import rocketIcon from './images/rocketIcon.png';
+import { NModal } from 'naive-ui';
+import { defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import styles from './index.module.less';
-import axios from 'axios';
-let refreshing = false;
-let isError = false;
-const reloadPage = async () => {
-  if ('serviceWorker' in navigator) {
-    // let refreshing = false
-    const flag = (await caches.keys()).length > 0;
-    // console.log(caches.keys(), `0904路由更新有缓存${flag}`);
-    caches.keys().then(function (cacheNames) {
-      cacheNames.forEach(function (cacheName) {
-        caches.delete(cacheName);
-      });
-    });
-    // 尝试监听install
-  }
-  console.log('route index');
-  window.location.reload();
-};
+import commentBg from './images/tip-bg.png';
+import commentTop from './images/tip-dang.png';
 
-const isChromeError = (error: any) => {
-  console.log(error, 'error===>isChromeError', refreshing);
-  isError = true;
-  const tagName = error.target.tagName;
-  const notIncoudle = ['IMG'];
-  setTimeout(() => {
-    if (!refreshing && !error.message && !notIncoudle.includes(tagName)) {
-      refreshing = true;
-      sessionStorage.setItem('isRouter', 'true');
-      // reloadPage();
-    }
-  }, 500);
-};
-window.addEventListener('error', isChromeError, true);
+let refreshing = false;
 export default defineComponent({
   name: 'router-error',
   setup() {
     const router = useRouter();
-    const dialog = useDialog();
 
     const showModalMask = ref(false);
-    const route = useRoute();
 
     router.onError((error, to) => {
       const str = error.message + '';
       const isChunkLoadFailed = str.indexOf('imported');
-      console.log(error, to);
+      console.log(error, to, str);
       const targetPath = router.currentRoute.value.fullPath;
       if (isChunkLoadFailed != -1 && !refreshing) {
         refreshing = true;
-        // console.log('onError刷新');
-        // sessionStorage.setItem('isRouter', 'true');
-        // showModalMask.value = true;
-        // router.push(to.path)
         location.hash = targetPath;
-        window.location.reload();
-      }
-    });
-    router.beforeEach(async (to, from, next) => {
-      // const flag = await versionCheck();
-      // console.log('路由之前弹窗', `refreshing${refreshing},flag:${flag}`);
-      // if (flag && !refreshing) {
-      //   refreshing = true;
-      //   // console.log('修改刷新',refreshing)
-      //   sessionStorage.setItem('isRouter', 'true');
-      //   // reloadPage();
-      //   //   showModalMask.value = true
-      //   // setTimeout(()=>{
-      //   //   const dom = document.getElementById('updateModel')
-      //   //   if(isError&&!dom){
-      //   //     reloadPage()
-      //   //   }
-      //   // },1000)
-
-      //   //   setTimeout(()=>{
-      //   //    sessionStorage.removeItem('isRouter')
-      //   //  },60000)
-      // }
-      next();
-    });
-    const checkNewVersion = async () => {
-      if ('serviceWorker' in navigator) {
-        // let refreshing = false
-        const flag = (await caches.keys()).length > 0;
-        // console.log(caches.keys(), `0904路由更新有缓存${flag}`);
-        caches.keys().then(function (cacheNames) {
-          cacheNames.forEach(function (cacheName) {
-            caches.delete(cacheName);
-          });
-          if (flag) {
-            // window.location.reload();
-            // dialog.warning({
-            //   title: '更新提示',
-            //   content: '网站有更新请点击确定刷新页面?',
-            //   positiveText: '确定',
-            //   negativeText: '取消',
-            //   onPositiveClick: () => {
-            //   }
-            // });
-          }
-        });
-
-        // 尝试监听install
-
-        // navigator.serviceWorker.addEventListener(
-        //   'controllerchange',
-        //   async () => {
-        //     console.log('controllerchange刷新', route.path, 'path');
-        //     const flag = await versionCheck();
-        //     if (refreshing || route.path == '/attend-class' || !flag) {
-        //       return;
-        //     }
-        //     const isRouter = sessionStorage.getItem('isRouter');
-        //     if (!isRouter) {
-        //       // showModalMask.value = true
-        //       // reloadPage();
-        //     }
-        //     refreshing = true;
-        //   }
-        // );
+        // window.location.reload();
+        showModalMask.value = true;
       }
-    };
-
-    console.log(route.path, 'route.path');
-    // checkNewVersion();
-    onBeforeUnmount(() => {
-      sessionStorage.removeItem('isRouter');
-      window.removeEventListener('error', isChromeError);
     });
-
-    // 版本监控
-    const versionCheck = async () => {
-      // console.log(import.meta.env.MODE, 'import.meta.env', __APP_VERSION__);
-      if (import.meta.env.MODE === 'development') return;
-      const response = await axios.get('version.json');
-      // eslint-disable-next-line no-undef
-      // console.log(__APP_VERSION__, response.data.version);
-      if (__APP_VERSION__ !== response.data.version) {
-        // eslint-disable-next-line no-undef
-        return true;
-      } else {
-        return false;
-      }
-    };
-
     return () => (
-      <div>
-        <NModal v-model:show={showModalMask.value} mask-closable={false}>
-          <div class={styles.downMove} id="updateModel">
-            <img src={rocketIcon} class={styles.dingPng} alt="" />
-            <img src={downBg} class={styles.downMoveBg} alt="" />
-            <h2>发现新版本</h2>
-            <p>为提升您的用户体验，请刷新页面后使用</p>
-            {/* <NButton>确定</NButton> */}
-            <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
-              <NButton
-                class={styles.submitAppBtn}
-                round
-                type="primary"
-                onClick={reloadPage}>
-                立即刷新
-              </NButton>
-            </NSpace>
+      <NModal v-model:show={showModalMask.value} mask-closable={false}>
+        <div class={styles.commonWork}>
+          <img src={commentTop} class={styles.dingPng} alt="" />
+          <img src={commentBg} class={styles.downMoveBg} alt="" />
+          <h2>发现新版本</h2>
+
+          <div class={styles.header}>系统已更新版本，请刷新界面后继续使用</div>
+
+          <div
+            class={styles.btn}
+            onClick={() => {
+              showModalMask.value = false;
+              window.location.reload();
+            }}>
+            立即刷新
           </div>
-        </NModal>
-      </div>
+        </div>
+      </NModal>
     );
   }
 });

src/update-tips/index.module.less

@@ -1,62 +0,0 @@
-.commonWork {
-  width: 400px;
-  background: #ffffff;
-  border-radius: 18px;
-  position: relative;
-  padding: 0 30px 35px;
-
-  .downMoveBg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 400px;
-    height: 104px;
-  }
-
-  .dingPng {
-    width: 159px;
-    height: 159px;
-    position: absolute;
-    left: 50%;
-    margin-left: -81px;
-    top: -57px;
-    z-index: 100;
-  }
-
-  h2 {
-    margin-top: 120px;
-    font-weight: 600;
-    font-size: 24px;
-    color: #131415;
-    line-height: 33px;
-    text-align: center;
-  }
-
-  .header {
-    text-align: center;
-    padding: 20px 0 30px;
-    font-size: 18px;
-    color: #777777;
-    line-height: 30px;
-
-    span {
-      color: #2784ff;
-    }
-  }
-
-  .btn {
-    cursor: pointer;
-    width: 256px;
-    border-radius: 50px;
-    text-align: center;
-    font-weight: 600;
-    font-size: 18px;
-    color: #ffffff;
-    line-height: 25px;
-    line-height: 47px;
-    margin: 0 auto;
-    --n-color: #40c8ff !important;
-    background: linear-gradient(305deg, #40c8ff 0%, #3192ff 100%);
-  }
-}
-

src/update-tips/index.tsx

@@ -1,24 +0,0 @@
-import { defineComponent } from 'vue';
-import styles from './index.module.less';
-import commentBg from './images/tip-bg.png';
-import commentTop from './images/tip-dang.png';
-
-export default defineComponent({
-  name: 'screen-tips',
-  emits: ['confirm'],
-  setup(props, { emit }) {
-    return () => (
-      <div class={styles.commonWork}>
-        <img src={commentTop} class={styles.dingPng} alt="" />
-        <img src={commentBg} class={styles.downMoveBg} alt="" />
-        <h2>发现新版本</h2>
-
-        <div class={styles.header}>系统已更新版本，请刷新界面后继续使用</div>
-
-        <div class={styles.btn} onClick={() => emit('confirm')}>
-          立即刷新
-        </div>
-      </div>
-    );
-  }
-});

vite.config.ts

@@ -67,7 +67,7 @@ export default defineConfig(() => {
         registerType: 'prompt',
         includeAssets: ['./logo.png'],
         strategies: "generateSW", // 使用 Service Worker 默认策略
-        selfDestroying: true,
+        selfDestroying: true, // 卸载pwa
         workbox: {
           // skipWaiting: false, // 强制跳过等待
           // clientsClaim: false // 让新的 Service Worker 立即控制所有页面