Как показать сообщение о том, что доступна новая версия приложения, даже если пользователи не перезагружают приложение

Question

у меня есть 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()
    }
  }, [])
}

Answer 1

Интересно, можно ли показать эту закусочную, когда пользователь оставил вкладку открытой на некоторое время, была развернута новая версия, а затем они вернулись и увидели закусочную?

Вы можете позвонить wb.update()для проверки обновлений сервис-воркера. Если он есть, он установит его, как и делает. Вы могли бы использовать setIntervalвызывать его через равные промежутки времени.

В настоящее время он появляется, когда я перезагружаю приложение, но тогда он кажется довольно бесполезным, потому что после перезагрузки кодовая база уже обновлена.

Для полного обновления требуется две перезагрузки. Первые прогоны wb.register()снова, когда компонент смонтирован, который устанавливает сервис-воркер. После установки 'waiting'запускается событие, которое показывает закусочную. Это вовсе не бесполезно, потому что вы все еще работаете на старом сервис-воркере. Требуется сочетание skipWaiting(чтобы активировать нового работника службы) и window.location.reload()(чтобы обновить страницу), чтобы иметь полностью обновленное приложение.

Тем не менее, при первом развертывании панели закусок вашим пользователям необходимо будет выполнить сложное обновление, закрыв все клиенты и повторно открыв приложение.