feat: multi page: maintenance

src/maintenance.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import MaintenancePage from './maintenance/index'
+import MaintenancePage from './maintenance/Index';
+import '@/assets/index.css';
 
 ReactDOM.createRoot(document.getElementById('maintenance-root')).render(
   <React.StrictMode>

src/maintenance/index.jsx

@@ -1,23 +1,44 @@
-const MaintenancePage = (props) => {
-  function handleClearCache() {
-    // Implement your cache clearing logic here
-  }
+import { clearAllCaches } from '@/utils/commons';
 
-  function handleReloadUpdate() {
-    // Implement your update reloading logic here
-  }
+const MaintenancePage = () => {
+  const handleClearCache = async () => {
+    await clearAllCaches();
+  };
 
-  function handleVersionCheck() {
-    // Implement your version checking logic here
-  }
+  const handleReload = () => {
+    const url = new URL(window.location.href);
+    url.searchParams.forEach((value, name) => {
+      url.searchParams.delete(name);
+    });
+    const _num = Date.now();
+    url.searchParams.set('_spam' + _num, _num);
+    window.location.href = url.toString();
+    // window.location.href = window.location.href + '?versionCheck=true';
+    // window.location.reload(true);
+  };
+
+  const handleVersionCheck = () => {};
+
+  const __BUILD_DATE__ = `__BUILD_DATE__`;
+  const __BUILD_VERSION__ = `__BUILD_VERSION__`;
 
   return (
     <>
-      <div>
-        <h1>Maintenance Page</h1>
-        <button onClick={handleClearCache}>Clear Cache</button>
-        <button onClick={handleReloadUpdate}>Reload Update</button>
-        <button onClick={handleVersionCheck}>Check Version</button>
+      <div className='flex flex-col items-center justify-center h-5/6 bg-gray-100'>
+        <h1 className='text-2xl font-bold mb-4 text-slate-800'>Sales CRM Maintenance Page</h1>
+        <button onClick={handleClearCache} className='px-4 py-2 mb-4 bg-blue-500 text-white rounded-md border-0'>
+          清除缓存
+        </button>
+        <button onClick={handleReload} className='px-4 py-2 mb-2 bg-green-500 text-white rounded-md border-0'>
+          重新加载
+        </button>
+        {/* <button onClick={handleVersionCheck} className='px-4 py-2 mb-2 bg-yellow-500 text-white rounded-md border-0'>
+          检查版本
+        </button> */}
+        <p>Version: {__BUILD_VERSION__}</p>
+        <p>
+          Build Date: {__BUILD_DATE__}&nbsp;&nbsp;<span>GMT+00:00</span>
+        </p>
       </div>
     </>
   );

src/utils/commons.js

@@ -467,7 +467,7 @@ export const calcCacheSizes = async () => {
     let indexedDBSize = 0;
 
     // 1. Get the service worker cache size
-    if (navigator.serviceWorker) {
+    if ('caches' in window) {
       const cacheNames = await caches.keys();
       for (const name of cacheNames) {
         const cache = await caches.open(name);
@@ -480,13 +480,13 @@ export const calcCacheSizes = async () => {
     }
 
     // 2. Get the disk cache size
-    const diskCacheName = 'disk-cache';
-    const diskCache = await caches.open(diskCacheName);
-    const diskCacheKeys = await diskCache.keys();
-    for (const request of diskCacheKeys) {
-      const response = await diskCache.match(request);
-      diskCacheSize += Number(response.headers.get('Content-Length')) || 0;
-    }
+    // const diskCacheName = 'disk-cache';
+    // const diskCache = await caches.open(diskCacheName);
+    // const diskCacheKeys = await diskCache.keys();
+    // for (const request of diskCacheKeys) {
+    //   const response = await diskCache.match(request);
+    //   diskCacheSize += Number(response.headers.get('Content-Length')) || 0;
+    // }
 
     // 3. Get the IndexedDB cache size
     // const indexedDBNames = await window.indexedDB.databases();

vite.config.js

@@ -22,6 +22,7 @@ const manifestForPlugIn = {
     enabled: true
   },
   workbox: {
+    navigateFallbackDenylist: [/^\/maintenance/],
     globPatterns: ['**/*.{json,css,js,html,ico,png,svg,woff2}'],
     maximumFileSizeToCacheInBytes: 3000000,
     clientsClaim: true,
@@ -109,6 +110,7 @@ const manifestForPlugIn = {
 export default defineConfig({
   define: {
     __BUILD_DATE__: JSON.stringify(`${new Date().toISOString()}`),
+    __BUILD_VERSION__: JSON.stringify(`${packageJson.version}`),
   },
   plugins: [react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPlugIn)],
   server: {