Global-sales/src/views/ReloadPrompt.jsx

// import './ReloadPrompt.css';

import { useRegisterSW } from 'virtual:pwa-register/react';
// import { pwaInfo } from 'virtual:pwa-info';

// console.log(pwaInfo, 'pwaInfo');

function ReloadPrompt({ force }) {

  const {
    offlineReady: [offlineReady, setOfflineReady],
    needRefresh: [needRefresh, setNeedRefresh],
    updateServiceWorker,
  } = useRegisterSW({
    onRegistered(r) {
      r &&
      setTimeout(() => {
        console.log('Checking for sw update, onRegistered', `__BUILD_DATE__`, `__APP_VERSION__`);
        r.update();

        setInterval(() => {
          r.update();
        }, 1000 * 60 * 60 * 8);
      }, 1000 * 3);
    },
    onRegisteredSW(swUrl, r) {
      r &&
      setTimeout(() => {
        console.log('Checking for sw update, onRegisteredSW', `__BUILD_DATE__`, `__APP_VERSION__`);
        r.update();

        setInterval(() => {
          r.update();
        }, 1000 * 60 * 60 * 8);
      }, 1000 * 3);
    },
    onRegisterError(error) {
      console.log('SW registration error', error);
    },
  });

  const close = () => {
    setOfflineReady(false);
    setNeedRefresh(false);
  };

  return (
    <>
      {/* {offlineReady && (<span>{APP_VERSION}</span>) } */}
      { (force || needRefresh) && (
        <a className=' text-sky-600 pr-2' onClick={() => updateServiceWorker(true)}>
          系统更新{needRefresh && '🚀'}
        </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;