即使用户不重新加载应用程序，如何显示新应用程序版本可用的消息答案

【问题标题】：How to show a message that a new app version available even if users don't reload the app即使用户不重新加载应用程序，如何显示新应用程序版本可用的消息
【发布时间】：2021-12-02 16:10:48
【问题描述】：

我有一个 Next.js 应用程序，它使用 next-pwa 库将应用程序设置为服务人员。部署新版本后，我想显示一个可用的快餐栏。

目前，当我重新加载应用程序时它确实会显示，但它似乎毫无用处，因为代码库在重新加载后已经是最新的。

我想知道是否有可能在用户将选项卡打开一段时间后显示该小吃栏，部署了一个新版本，然后他们回来查看该小吃栏？

我的代码目前看起来像这样：

const useServiceWorker = () => {
  const { showSnackbar } = useSnackbars()

  useEffect(() => {
    if (window !== 'undefined' && 'serviceWorker' in navigator && window.workbox !== undefined) {
      const wb = window.workbox

      wb.addEventListener('waiting', () => {
        showSnackbar('A newer version of the app is available!', {
          onClick: () => {
            wb.addEventListener('controlling', () => window.location.reload())
            wb.messageSkipWaiting()
          },
          onClose: () => {
            // do smth else
          },
        })
      })

      wb.register()
    }
  }, [])
}

【问题讨论】：

标签： reactjs next.js progressive-web-apps service-worker next-pwa

【解决方案1】：

我想知道是否有可能在用户将选项卡打开一段时间后显示该小吃栏，部署了一个新版本，然后他们回来查看该小吃栏？

您可以致电wb.update() 来检查 Service Worker 更新。如果有，它会安装它，就像wb.register() 一样。您可以使用setInterval 定期调用它。

目前，当我重新加载应用程序时它确实会显示，但它似乎毫无用处，因为代码库在重新加载后已经是最新的。

它需要两次重新加载才能完全更新。第一个在安装组件时再次运行wb.register()，这将安装服务工作者。安装后，'waiting' 事件将被触发，这会显示小吃栏。这根本不是无用的，因为您仍然在旧的 service worker 上运行。需要结合skipWaiting（激活新的Service Worker）和window.location.reload()（更新页面）才能拥有一个完全最新的应用程序。

也就是说，当您第一次部署快餐栏时，您的用户将需要通过关闭所有客户端并重新打开应用来进行艰难的更新。

【讨论】：