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() {

  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 &&
      setTimeout(() => {
        r.update();

        setInterval(() => {
          // console.log('Checking for sw update');
          r.update();
        }, 1000 * 60 * 60 * 8);
      }, 1000 * 3);
      // } 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;