classroom-instruments/src/App.tsx

import { computed, defineComponent, onMounted, ref, onUnmounted } from 'vue';
import { NConfigProvider, zhCN, dateZhCN, NModal } from 'naive-ui';
import { AppProvider } from './components/Application';
import { RouterView, useRouter } 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 { useUserStore } from './store/modules/users';
export function unregister() {
  if ('serviceWorker' in navigator) {
    console.log('unregister - pwa');
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });

    navigator.serviceWorker
      .getRegistrations()
      .then(registrations => {
        for (const registration of registrations) {
          registration.unregister().then(boolean => {
            if (boolean) {
              console.log('Service Worker unregistered successfully');
            } else {
              console.log('Service Worker unregistration failed');
            }
          });
        }
      })
      .catch(error => {
        console.error('Error getting Service Worker registrations:', error);
      });
  } else {
    console.log('Service Workers are not supported in this browser');
  }
}

export default defineComponent({
  name: 'App',
  setup() {
    const isIOSChrome = ref();
    const getThemeOverrides = computed(() => {
      const appTheme = setting.appTheme;
      const lightenStr = lighten(setting.appTheme, 6);

      return {
        common: {
          primaryColor: appTheme,
          primaryColorHover: lightenStr,
          primaryColorPressed: lightenStr
        },
        LoadingBar: {
          colorLoading: appTheme
        }
      };
    });
    // 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 isChrome = () => {
      const isChromium = window.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 isChromeFlag = isChrome();
    // console.log('isChromeFlag', isChromeFlag);
    if (isChromeFlag) {
      const chromeVersion = getChromeVersion();
      if (!chromeVersion || (chromeVersion && chromeVersion < 100)) {
        showModalMsg.value =
          '您当前的chrome版本过低,为了保证您的用户体验请升级后使用';
        // showModal.value = true;
      }
      // if (chromeVersion) {
      //   return Number(chromeVersion.split('/')[1].split('.')[0]);
      // } else {
      //   return false;
      // }
    } else {
      showModalMsg.value = '为了保证您的用户体验,请使用chrome打开,点击确定下载';
      // showModal.value = true;
      console.log('---');
    }
    const submitCallback = () => {
      window.open('https://www.google.cn/intl/zh-CN/chrome/');
    };
    const handleOpen = (e: MessageEvent) => {
      if (e.data?.api === 'onLogin') {
        const userStore = useUserStore();
        const router = useRouter();
        const documentDom: any = document;
        documentDom.exitFullscreen
          ? documentDom.exitFullscreen()
          : documentDom.mozCancelFullScreen
          ? documentDom.mozCancelFullScreen()
          : documentDom.webkitExitFullscreen
          ? documentDom.webkitExitFullscreen()
          : '';
        userStore.logout();
        history.go(0);
      }
    };

    onMounted(() => {
      window.addEventListener('message', handleOpen);

      // 禁用右键菜单
      document.addEventListener('contextmenu', function (event) {
        event.preventDefault();
      });
      // 禁用浏览器快捷键
      document.addEventListener('keydown', function (event) {
        // 屏蔽 F12 和 Ctrl+Shift+I
        if (
          event.key === 'F12' ||
          (event.ctrlKey && event.shiftKey && event.key === 'I') ||
          (event.metaKey && event.altKey && event.key === 'I')
        ) {
          event.preventDefault();
        }
      });

      // const intervalMS = 60 * 60 * 1000;

      // console.log(useRegisterSW, '1');
      // const updateServiceWorker =
      // useRegisterSW({
      //   onRegistered(r: any) {
      //     console.log(r, 'registered');

      //     r &&
      //       setInterval(() => {
      //         console.log('registered interval:', r);
      //         r.update();
      //       }, 30000);
      //   }
      // });
    });
    onUnmounted(() => {
      window.removeEventListener('message', handleOpen);
    });

    // 卸载 pwa
    unregister();
    return () => (
      <>
        <NConfigProvider
          locale={zhCN}
          themeOverrides={getThemeOverrides.value}
          // :theme="getDarkTheme"
          // :theme-overrides="getThemeOverrides"
          dateLocale={dateZhCN}>
          <AppProvider>
            <RouterView />
            <RouterError />
          </AppProvider>
        </NConfigProvider>
        {/* <NModal
          show={showModal.value}
          closeOnEsc={false}
          closable={false}
          maskClosable={false}
          preset="dialog"
          title="确认"
          content={showModalMsg.value}
          positive-text="确认"
          onPositiveClick={submitCallback}></NModal> */}
      </>
    );
  }
});