如何检查 React PWA 是不是使用最新版本？

Posted 2023-03-16

【中文标题】如何检查 React PWA 是不是使用最新版本？

【英文标题】：How to check if React PWA uses latest version?如何检查 React PWA 是否使用最新版本？

【发布时间】：2021-12-29 18:44:14

【问题描述】：

我想告诉我的用户有可用的更新。因此我需要知道如何检查他是否已经使用最新版本。

目前，只要 serviceWorker 告诉我有新版本可用，我就会在 localStorage 中设置一个名为“updateAvailable”的项目。效果很好。

当我想将“updateAvailable”设置为 false 时，无法正常工作。该项目未在 localStorage 中设置。

使用最新版本的 PWA 时如何在 localStorage 中设置此项？

function registerValidSW(swUrl: string, config?: Config) 
  console.log("test 5")
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => 
      registration.onupdatefound = () => 
        const installingWorker = registration.installing;
        if (installingWorker == null) 
          return;
        
        installingWorker.onstatechange = () => 
          if (installingWorker.state === 'installed') 
            if (navigator.serviceWorker.controller) 
              // At this point, the updated precached content has been fetched,
              // but the previous service worker will still serve the older
              // content until all client tabs are closed.
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed. See [hidden link]'
              );
              localStorage.setItem("updateAvailable", "true")

              // Execute callback
              if (config && config.onUpdate) 
                config.onUpdate(registration);
              
             else 
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
              localStorage.setItem("updateAvailable", "false")

              // Execute callback
              if (config && config.onSuccess) 
                config.onSuccess(registration);
              
            
          
        ;
      ;
    )
    .catch(error => 
      console.error('Error during service worker registration:', error);
    );

【问题讨论】：

您是否遇到任何错误？您是否尝试过使用调试器来查明问题？您是否尝试过其他任何可能有助于解决此问题的方法？

是的，我在 serviceworker 文件中添加了 console.logs，但在使用最新版本时没有人登录到控制台。唯一对我有部分帮助的是它告诉我安装了最新版本。但是我需要知道这个版本什么时候也可以使用。

【参考方案1】：

该代码块仅在“onupdatefound”事件中执行。

【讨论】：

谢谢！那我应该把它放在哪里呢？