feat: add load resource error handle

src/App.tsx

@@ -16,7 +16,7 @@ import type { AppState } from '@/store';
 import { useAppStore } from '@/store';
 
 import {
-  addGlobalListener,
+  assetsLoadHandle,
   getStorage,
   globalEvent,
   hasLocalStorage,
@@ -92,49 +92,52 @@ const App: React.FC<IAppProps> = (props) => {
       }
     }
 
-    function update() {
-      function handleReEnter() {
-        serviceWorkerRef.current?.skipWaiting();
-        notificationApi.destroy();
-      }
-
-      const btn = (
-        <Button type="primary" onClick={handleReEnter}>
-          确认
-        </Button>
-      );
-
-      notificationApi.info({
-        message: '有新内容',
-        description: '网站有更新，请点击确认以获取最新内容。',
-        placement: 'bottomRight',
-        style: { padding: '14px 16px', width: 300 },
-        btn,
-        duration: null
-      });
-
-      if (!frontDesk && enableNotification) {
-        notify({
-          icon: '/favicon.ico',
-          title: '有新内容',
-          data: '网站内容有更新，您可以前往查看更新。'
+    {
+      const update = () => {
+        function handleReEnter() {
+          serviceWorkerRef.current?.skipWaiting();
+          notificationApi.destroy();
+        }
+
+        const btn = (
+          <Button type="primary" onClick={handleReEnter}>
+            确认
+          </Button>
+        );
+
+        notificationApi.info({
+          message: '有新内容',
+          description: '网站有更新，请点击确认以获取最新内容。',
+          placement: 'bottomRight',
+          style: { padding: '14px 16px', width: 300 },
+          btn,
+          duration: null
         });
+
+        if (!frontDesk && enableNotification) {
+          notify({
+            icon: '/favicon.ico',
+            title: '有新内容',
+            data: '网站内容有更新，您可以前往查看更新。'
+          });
+        }
+      };
+      serviceWorkerRef.current = new ServiceWorkerManager({ update });
+      if (import.meta.env.PROD && enableServiceWorkerCache) {
+        serviceWorkerRef.current.registerServiceWorker();
+      } else {
+        serviceWorkerRef.current.unregisterServiceWorker();
       }
     }
-    serviceWorkerRef.current = new ServiceWorkerManager({ update });
-    if (import.meta.env.PROD && enableServiceWorkerCache) {
-      serviceWorkerRef.current.registerServiceWorker();
-    } else {
-      serviceWorkerRef.current.unregisterServiceWorker();
-    }
 
-    const removePageShowListener = addGlobalListener('pageshow', () => {
-      setFrontDesk(true);
-    });
-    const removePageHideListener = addGlobalListener('pagehide', () => {
-      setFrontDesk(false);
-    });
     darkModeQuery.addEventListener('change', listenerColorSchemeChange);
+    const listenerVisibilityChange = () => {
+      setFrontDesk(!window.document.hidden);
+    };
+    window.document.addEventListener(
+      'visibilitychange',
+      listenerVisibilityChange
+    );
 
     const cancelGlobalUserTipsEventListener = globalEvent.on(
       'user_tips',
@@ -149,12 +152,19 @@ const App: React.FC<IAppProps> = (props) => {
       }
     );
 
+    const cancelListenerReLoad = assetsLoadHandle.reLoadByOnline(
+      () => !enableServiceWorkerCache
+    );
+
     return () => {
-      removePageShowListener();
-      removePageHideListener();
+      cancelListenerReLoad();
       cancelGlobalUserTipsEventListener();
       cancelGlobalUserAlertEventListener();
       darkModeQuery.removeEventListener('change', listenerColorSchemeChange);
+      window.document.removeEventListener(
+        'visibilitychange',
+        listenerVisibilityChange
+      );
     };
   }, []);
 

src/router/components/Error.tsx

@@ -1,6 +1,14 @@
+import { useEffect } from 'react';
+
 import { Button, Typography } from 'antd';
 
-import { copy, serializeError, success, UnknownError } from '@/utils';
+import {
+  assetsLoadHandle,
+  copy,
+  serializeError,
+  success,
+  UnknownError
+} from '@/utils';
 
 import { Icon } from '@/components';
 
@@ -13,10 +21,15 @@ interface IErrorProps {
 }
 
 const ErrorCom: React.FC<IErrorProps> = (props) => {
-  const { errorInfo: { error } = { hasError: false } } = props;
+  const { errorInfo: { hasError, error } = { hasError: true } } = props;
 
   const history = useHistory();
 
+  useEffect(() => {
+    // When rendering errors, we need to know that sending the error to the resource load processor
+    hasError && assetsLoadHandle.emitRenderError();
+  }, []);
+
   const handleReload = () => {
     history.go(0);
   };

src/utils/index.ts

@@ -5,6 +5,7 @@ export { default as globalEvent } from './globalEventEmitter';
 export * from './globalEventEmitter';
 export * from './localStorageTools';
 export * from './notification';
+export { default as assetsLoadHandle } from './online.ts';
 export * from './permissions';
 export { default as ServiceWorkerManager } from './serviceWorker';
 export * from './serviceWorker';

src/utils/online.ts

@@ -0,0 +1,49 @@
+import EventEmitter from './event';
+import { warning } from './globalEventEmitter';
+import { addGlobalListener } from './windowEvent';
+
+import { sleep } from '.';
+
+const LOAD_ERROR_KEY = 'load_error';
+
+class AssetsLoadHandle {
+  event = new EventEmitter();
+
+  private cb = () => false;
+
+  private listener = () => {
+    if (!window.navigator.onLine) {
+      const _listener = () => {
+        cancelOnlineListener();
+
+        if (this.cb()) {
+          warning('即将在三秒后重载页面。');
+          sleep(3000, () => window.location.reload());
+        }
+      };
+
+      const cancelOnlineListener = addGlobalListener('online', _listener);
+    }
+  };
+
+  emitRenderError() {
+    this.event.emit(LOAD_ERROR_KEY);
+  }
+
+  reLoadByOnline(cb: () => boolean) {
+    this.cb = cb;
+
+    const cancelGlobalErrorListener = addGlobalListener('error', this.listener);
+    const cancelRenderErrorListener = this.event.on(
+      LOAD_ERROR_KEY,
+      this.listener
+    );
+
+    return () => {
+      cancelGlobalErrorListener();
+      cancelRenderErrorListener();
+    };
+  }
+}
+
+export default new AssetsLoadHandle();