0

我有一个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()
    }
  }, [])
}
4

1 回答 1

0

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

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

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

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

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

于 2021-11-24T01:06:23.010 回答