classroom-instruments/src/components/RouterError/index.tsx

import { NButton, NModal, NSpace, useDialog } from 'naive-ui';
import { defineComponent, onBeforeUnmount, ref } from 'vue';
import { useRouter } from 'vue-router';
import downBg from './images/downBg.png'
import rocketIcon from './images/rocketIcon.png'
import styles from './index.module.less'
import axios from 'axios';
export default defineComponent({
  name: 'router-error',
  setup() {
    const router = useRouter();
    const dialog = useDialog();
    let refreshing = false;
    const showModalMask = ref(false)


    // router.onError((error, to, form) => {
    //   const str = error.message + '';
    //   const isChunkLoadFailed = str.indexOf('imported');
    //   console.log(error, to)
    //   // const targetPath = router.history.pending.fullPath

    //   if (isChunkLoadFailed != -1 && !refreshing) {
    //     refreshing = true;
    //     console.log('onError刷新');
    //     sessionStorage.setItem('isRouter','true')
    //       showModalMask.value = true;
    //       router.push(to.path)

    //     setTimeout(()=>{
    //       sessionStorage.removeItem('isRouter')
    //     },60000)
    //   }
    // });
    router.beforeEach(async (to, from, next) => {
      const flag =  await versionCheck()
        if(flag){

            sessionStorage.setItem('isRouter','true')
            showModalMask.value = true
          //   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', () => {
          console.log('controllerchange刷新');
          if (refreshing) {
            return;
          }
          const isRouter = sessionStorage.getItem('isRouter')
          if(!isRouter){
            showModalMask.value = true
          }
          sessionStorage.removeItem('isRouter')
          refreshing = true;

        });
      }
    }
    onBeforeUnmount(()=>{
      sessionStorage.removeItem('isRouter')
    })


    const reloadPage = ()=>{
      checkNewVersion()
      window.location.reload();
    }


    // 版本监控
const versionCheck = async () => {
  if (import.meta.env === 'development') return
  const response = await axios.get('version.json')
  // eslint-disable-next-line no-undef
  console.log(__APP_VERSION__,response.data.version,__APP_VERSION__ !== response.data.version)
  if (__APP_VERSION__ !== response.data.version) {
    // eslint-disable-next-line no-undef
    return true
  }else {
    return false
  }
}

console.log(    versionCheck(),'    versionCheck()')
    return () => <div>
              <NModal v-model:show={showModalMask.value} mask-closable={false}>
          <div class={styles.downMove}>
            <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>
          </div>
        </NModal>

    </div>;
  }
});