Offline indication

[satelllte]

Offline detection can be implemented using:

  useEffect(() => {
    // TODO: notify user that the app is available for offline use
    // ...

    // https://developer.chrome.com/docs/workbox/modules/workbox-window/#register-a-service-worker-and-notify-the-user-the-very-first-time-that-service-worker-is-active
    // @ts-ignore
    const wb = window.workbox
    // @ts-ignore
    wb.addEventListener('activated', (event) => {
      if (!event.isUpdate) {
        console.info('WB | activated | event: ', event)
        
        // READY FOR OFFLINE USE   !!!!!!
        // do something with it ....
      }
    })
  }, [])

Workbox docs reference: https://developer.chrome.com/docs/workbox/modules/workbox-window/#register-a-service-worker-and-notify-the-user-the-very-first-time-that-service-worker-is-active

To turn off page reload after getting back online, reloadOnOnline: false can be set in next-pwa config: https://github.com/shadowwalker/next-pwa#available-options