如何显示一条消息，指出即使用户未重新加载应用，也有新的应用版本可用

Question

我有一个Next.js应用程序，它使用next-pwa库来设置应用程序的service worker。在部署了一个新版本之后，我想向一个零食栏显示它是可用的。

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

我想知道是否有可能显示当用户将标签页打开一段时间时，新版本已经部署，然后他们回来看到零食栏?

我的代码现在看起来像这样:

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()
}
}, [])
}

Answer 1

我想知道是否有可能显示，当用户离开选项卡打开一段时间，一个新的版本已经部署，然后他们回来，看到零食栏?

你可以调用wb.update()来检查service worker的更新。如果有，它将安装它，就像wb.register()一样。您可以使用setInterval定期调用它。

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

需要两次重新加载才能完全更新。第一个在挂载组件时再次运行wb.register()，它会安装service worker。安装完成后，'waiting'事件被触发，它显示了零食栏。这并不是毫无用处，因为你仍然在运行旧的service worker。它需要skipWaiting(激活新的service worker)和window.location.reload()(更新页面)的组合来拥有一个完全最新的应用程序。

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