修改显示

src/App.tsx

@@ -13,8 +13,25 @@ import ScreenTips from './screen-tips';
 export default defineComponent({
   name: 'App',
   setup() {
+    const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
+      onRegistered(r: any) {
+        console.log(r, 'registered');
+
+        // r &&
+        //   setInterval(() => {
+        //     r.update();
+        //   }, 30000);
+      },
+      onNeedRefresh() {
+        console.log('新版本可用！');
+      },
+      onOfflineReady() {
+        console.log('离线功能就绪。');
+      }
+    });
+
     // const isIOSChrome = ref();
-    const showModalMask = ref(false);
+    // const showModalMask = ref(false);
     const getThemeOverrides = computed(() => {
       const appTheme = setting.appTheme;
       const lightenStr = lighten(setting.appTheme, 6);
@@ -33,96 +50,96 @@ export default defineComponent({
       };
     });
     // const showModal = ref(false);
-    const showModalMsg = ref('');
-    // 判断浏览器
-    // 是否是360
-    const check360 = () => {
-      const result = false;
-      for (const key in navigator.plugins) {
-        // np-mswmp.dll只在360浏览器下存在
-        if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
-          return !result;
-        }
-      }
-      return result;
-    };
+    // const showModalMsg = ref('');
+    // // 判断浏览器
+    // // 是否是360
+    // const check360 = () => {
+    //   const result = false;
+    //   for (const key in navigator.plugins) {
+    //     // np-mswmp.dll只在360浏览器下存在
+    //     if (navigator.plugins[key].filename == 'internal-nacl-plugin') {
+    //       return !result;
+    //     }
+    //   }
+    //   return result;
+    // };
     //
 
-    const isChrome = () => {
-      const isChromium = (window as any).chrome,
-        winNav = window.navigator,
-        vendorName = winNav.vendor,
-        isOpera = winNav.userAgent.indexOf('OPR') > -1,
-        isIEedge = winNav.userAgent.indexOf('Edge') > -1,
-        isIOSChrome = winNav.userAgent.match('CriOS'),
-        // QQ
-        isQQBriwser =
-          winNav.userAgent.indexOf('QQBrowser') > -1 ||
-          winNav.userAgent.indexOf('QQ') > -1,
-        // 搜狗
-        isSouggou =
-          winNav.userAgent.indexOf('se 2.x') > -1 ||
-          winNav.userAgent.indexOf('MetaSr') > -1,
-        // 360
-        is360 = check360() && winNav.userAgent.indexOf('Safari') > -1,
-        // 遨游
-        isMaxthon = winNav.userAgent.indexOf('Maxthon') > -1,
-        // 是否为2345浏览器
-        is2345Explorer = winNav.userAgent.includes('2345Explorer'),
-        // 世界之窗
-        isTheWorld = winNav.userAgent.indexOf('TheWorld') > -1,
-        // 猎豹
-        isLiebao = winNav.userAgent.indexOf('LBBROWSER') > -1;
-      // console.log(isQQBriwser, isSouggou, is360, isMaxthon, is2345Explorer, isTheWorld, isLiebao)
-      if (isIOSChrome) {
-        return true;
-      } else if (
-        isChromium !== null &&
-        typeof isChromium !== 'undefined' &&
-        vendorName === 'Google Inc.' &&
-        isOpera === false &&
-        isIEedge === false &&
-        isQQBriwser === false &&
-        isSouggou === false &&
-        is360 === false &&
-        isMaxthon === false &&
-        is2345Explorer === false &&
-        isTheWorld === false &&
-        isLiebao === false
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    };
+    // const isChrome = () => {
+    //   const isChromium = (window as any).chrome,
+    //     winNav = window.navigator,
+    //     vendorName = winNav.vendor,
+    //     isOpera = winNav.userAgent.indexOf('OPR') > -1,
+    //     isIEedge = winNav.userAgent.indexOf('Edge') > -1,
+    //     isIOSChrome = winNav.userAgent.match('CriOS'),
+    //     // QQ
+    //     isQQBriwser =
+    //       winNav.userAgent.indexOf('QQBrowser') > -1 ||
+    //       winNav.userAgent.indexOf('QQ') > -1,
+    //     // 搜狗
+    //     isSouggou =
+    //       winNav.userAgent.indexOf('se 2.x') > -1 ||
+    //       winNav.userAgent.indexOf('MetaSr') > -1,
+    //     // 360
+    //     is360 = check360() && winNav.userAgent.indexOf('Safari') > -1,
+    //     // 遨游
+    //     isMaxthon = winNav.userAgent.indexOf('Maxthon') > -1,
+    //     // 是否为2345浏览器
+    //     is2345Explorer = winNav.userAgent.includes('2345Explorer'),
+    //     // 世界之窗
+    //     isTheWorld = winNav.userAgent.indexOf('TheWorld') > -1,
+    //     // 猎豹
+    //     isLiebao = winNav.userAgent.indexOf('LBBROWSER') > -1;
+    //   // console.log(isQQBriwser, isSouggou, is360, isMaxthon, is2345Explorer, isTheWorld, isLiebao)
+    //   if (isIOSChrome) {
+    //     return true;
+    //   } else if (
+    //     isChromium !== null &&
+    //     typeof isChromium !== 'undefined' &&
+    //     vendorName === 'Google Inc.' &&
+    //     isOpera === false &&
+    //     isIEedge === false &&
+    //     isQQBriwser === false &&
+    //     isSouggou === false &&
+    //     is360 === false &&
+    //     isMaxthon === false &&
+    //     is2345Explorer === false &&
+    //     isTheWorld === false &&
+    //     isLiebao === false
+    //   ) {
+    //     return true;
+    //   } else {
+    //     return false;
+    //   }
+    // };
 
-    // 获取谷歌版本
-    const getChromeVersion = () => {
-      const arr = navigator.userAgent.split(' ');
-      let chromeVersion = '' as any;
-      for (let i = 0; i < arr.length; i++) {
-        if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
-      }
-      if (chromeVersion) {
-        return Number(chromeVersion.split('/')[1].split('.')[0]);
-      } else {
-        return false;
-      }
-    };
+    // // 获取谷歌版本
+    // const getChromeVersion = () => {
+    //   const arr = navigator.userAgent.split(' ');
+    //   let chromeVersion = '' as any;
+    //   for (let i = 0; i < arr.length; i++) {
+    //     if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
+    //   }
+    //   if (chromeVersion) {
+    //     return Number(chromeVersion.split('/')[1].split('.')[0]);
+    //   } else {
+    //     return false;
+    //   }
+    // };
 
-    const isChromeFlag = isChrome();
-    // console.log('isChromeFlag', isChromeFlag);
-    if (isChromeFlag) {
-      const chromeVersion = getChromeVersion();
-      if (!chromeVersion || (chromeVersion && chromeVersion < 100)) {
-        showModalMsg.value =
-          '您当前的chrome版本过低,为了保证您的用户体验请升级后使用';
-      }
-    } else {
-      showModalMsg.value = '为了保证您的用户体验,请使用chrome打开,点击确定下载';
-      // showModal.value = true;
-      console.log('---');
-    }
+    // const isChromeFlag = isChrome();
+    // // console.log('isChromeFlag', isChromeFlag);
+    // if (isChromeFlag) {
+    //   const chromeVersion = getChromeVersion();
+    //   if (!chromeVersion || (chromeVersion && chromeVersion < 100)) {
+    //     showModalMsg.value =
+    //       '您当前的chrome版本过低,为了保证您的用户体验请升级后使用';
+    //   }
+    // } else {
+    //   showModalMsg.value = '为了保证您的用户体验,请使用chrome打开,点击确定下载';
+    //   // showModal.value = true;
+    //   console.log('---');
+    // }
     // const submitCallback = () => {
     //   window.open('https://www.google.cn/intl/zh-CN/chrome/');
     // };
@@ -175,26 +192,6 @@ export default defineComponent({
         }
       });
 
-      // const intervalMS = 60 * 60 * 1000;
-
-      // console.log(useRegisterSW, '1');
-      const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
-        onRegistered(r: any) {
-          console.log(r, 'registered');
-
-          // r &&
-          //   setInterval(() => {
-          //     r.update();
-          //   }, 30000);
-        },
-        onNeedRefresh() {
-          console.log('新版本可用！');
-        },
-        onOfflineReady() {
-          console.log('离线功能就绪。');
-        }
-      });
-
       // console.log('app - onounted - test interval');
 
       // if ('serviceWorker' in navigator) {
@@ -229,11 +226,18 @@ export default defineComponent({
             <RouterError />
           </AppProvider>
         </NConfigProvider>
-        <NModal
+        {/* <NModal
           maskClosable={modalClickMask}
           v-model:show={showModalMask.value}>
           <ScreenTips />
-        </NModal>
+        </NModal> */}
+
+        <span style={{ display: 'none' }}>
+          {needRefresh.value ? '新内容可用，点击刷新页面' : '没有新内容'}
+        </span>
+        <span style={{ display: 'none' }}>
+          {offlineReady.value ? '应用已离线可用' : '没有离线'}
+        </span>
         {/* <NModal
           show={showModal.value}
           closeOnEsc={false}