feat: 检查更新, update service worker cahce

src/views/DesktopApp.jsx

@@ -10,6 +10,7 @@ import { Link, NavLink, Outlet, useHref } from 'react-router-dom'
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
 import 'react-chat-elements/dist/main.css'
+import ReloadPrompt from './ReloadPrompt';
 
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
@@ -83,6 +84,7 @@ function DesktopApp() {
             />
           </Col>
           <Col flex='auto' style={{ color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end' }}>
+            <ReloadPrompt />
             <Dropdown
               menu={{
                 items: [

src/views/MobileApp.jsx

@@ -6,6 +6,7 @@ import useAuthStore from '@/stores/AuthStore';
 import { Col, Layout, Row, Typography, theme, Space, Avatar, Dropdown, Flex } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { NavLink, Outlet, Link } from 'react-router-dom';
+import ReloadPrompt from './ReloadPrompt';
 const { Header, Footer, Content } = Layout;
 const { Title } = Typography;
 
@@ -50,6 +51,7 @@ function MobileApp() {
             <img src={AppLogo} className='logo' alt='App logo' />
             {!('Notification' in window) && <span>🔕</span>}
           </NavLink>
+          <ReloadPrompt />
           <Dropdown
             menu={{
               items: [

src/views/ReloadPrompt.css

@@ -0,0 +1,32 @@
+.ReloadPrompt-container {
+    padding: 0;
+    margin: 0;
+    width: 0;
+    height: 0;
+}
+.ReloadPrompt-date {
+    visibility: hidden;
+}
+.ReloadPrompt-toast {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    margin: 16px;
+    padding: 12px;
+    border: 1px solid #8885;
+    border-radius: 4px;
+    z-index: 1;
+    text-align: left;
+    box-shadow: 3px 4px 5px 0 #8885;
+    background-color: white;
+}
+.ReloadPrompt-toast-message {
+    margin-bottom: 8px;
+}
+.ReloadPrompt-toast-button {
+    border: 1px solid #8885;
+    outline: none;
+    margin-right: 5px;
+    border-radius: 2px;
+    padding: 3px 10px;
+}

src/views/ReloadPrompt.jsx

@@ -0,0 +1,67 @@
+// import './ReloadPrompt.css';
+
+import { useRegisterSW } from 'virtual:pwa-register/react';
+// import { pwaInfo } from 'virtual:pwa-info';
+
+// console.log(pwaInfo, 'pwaInfo');
+
+function ReloadPrompt() {
+
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl, r) {
+      // console.log(`Service Worker at: ${swUrl}`);
+      // @ts-expect-error just ignore
+      // if (reloadSW === 'true') {
+      r &&
+        setInterval(() => {
+          // console.log('Checking for sw update');
+          r.update();
+        }, 1000 * 60 * 60 * 8);
+      // } else {
+      // eslint-disable-next-line prefer-template
+      // console.log('SW Registered: ' + r);
+      // }
+    },
+    onRegisterError(error) {
+      console.log('SW registration error', error);
+    },
+  });
+
+  const close = () => {
+    setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  return (
+    <>
+      {needRefresh && (
+        <a className=' text-sky-600 px-2' onClick={() => updateServiceWorker(true)}>
+          有新版本~点击更新🚀
+        </a>
+      )}
+    </>
+
+    // <div className='ReloadPrompt-container'>
+    //   {(offlineReady || needRefresh) && (
+    //     <div className='ReloadPrompt-toast'>
+    //       <div className='ReloadPrompt-message'>{offlineReady ? <span>可安装</span> : <span>新版本发布了，点击重新加载按钮更新。</span>}</div>
+    //       {needRefresh && (
+    //         <button className='ReloadPrompt-toast-button' onClick={() => updateServiceWorker(true)}>
+    //           重新加载
+    //         </button>
+    //       )}
+    //       <button className='ReloadPrompt-toast-button' onClick={() => close()}>
+    //         关闭
+    //       </button>
+    //     </div>
+    //   )}
+    //   <div className='ReloadPrompt-date'>__BUILD_DATE__ GMT</div>
+    // </div>
+  );
+}
+
+export default ReloadPrompt;

vite.config.js

@@ -17,7 +17,7 @@ const manifestForPlugIn = {
   // includeAssests: ['/src/assets/logo-gh.png'],
   // registerType: 'autoUpdate',
   workbox: {
-    globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+    globPatterns: ['**/*.{json,js,css,html,ico,png,svg,woff2}'],
   },
   manifest: {
     name: 'Sales CRM',
@@ -55,6 +55,9 @@ const manifestForPlugIn = {
 };
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    __BUILD_DATE__: JSON.stringify(`${new Date().toISOString()}`),
+  },
   plugins: [react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPlugIn)],
   server: {
     host: '0.0.0.0',