Bridge offline navigation messages to useOffline

Author: feedthejim

packages/next/src/build/offline-navigation-service-worker.ts

@@ -1,6 +1,7 @@
 import path from 'node:path'
 
 import { CLIENT_STATIC_FILES_PATH } from '../shared/lib/constants'
+import { OFFLINE_NAVIGATION_FALLBACK_SERVED } from '../shared/lib/offline-navigation-constants'
 
 export const OFFLINE_NAVIGATION_SERVICE_WORKER =
   '_offline-navigation-service-worker.js'
@@ -27,6 +28,9 @@ export function createOfflineNavigationServiceWorker({
     manifestHref,
     source: 'offline-navigation-service-worker',
   })
+  const fallbackServedMessageType = JSON.stringify(
+    OFFLINE_NAVIGATION_FALLBACK_SERVED
+  )
 
   return `self.__NEXT_OFFLINE_NAVIGATION_SW=${metadata};
 const CACHE_PREFIX='next-offline-navigation-v1:';
@@ -71,11 +75,21 @@ async function fetchDocumentNavigation(request){
     const cache=await caches.open(metadata.cacheNamespace);
     const fallbackResponse=await cache.match(metadata.fallbackDocumentHref);
     if(fallbackResponse){
+      await notifyClients({
+        type:${fallbackServedMessageType},
+        buildId:metadata.buildId,
+        reason:'network-error',
+        url:request.url
+      });
       return fallbackResponse;
     }
     throw err;
   }
 }
+async function notifyClients(message){
+  const clients=await self.clients.matchAll({type:'window',includeUncontrolled:true});
+  await Promise.all(clients.map((client)=>client.postMessage(message)));
+}
 self.addEventListener('install',(event)=>{
   event.waitUntil((async()=>{
     await cacheOfflineNavigationResources();

packages/next/src/client/components/offline.ts

@@ -77,7 +77,7 @@ export function getOffline(): OfflineState | null {
  * Enters the offline state if not already in it, and starts the
  * connectivity polling loop.
  */
-function notifyOffline(): OfflineState {
+export function notifyOffline(): OfflineState {
   if (offlineState !== null) {
     return offlineState
   }

packages/next/src/client/offline-navigation-service-worker.ts

@@ -1,8 +1,18 @@
 import { getDeploymentIdQuery } from '../shared/lib/deployment-id'
+import { OFFLINE_NAVIGATION_FALLBACK_SERVED } from '../shared/lib/offline-navigation-constants'
 
 const OFFLINE_NAVIGATION_SERVICE_WORKER =
   '_offline-navigation-service-worker.js'
 
+let isListeningForServiceWorkerMessages = false
+
+type OfflineNavigationFallbackServedMessage = {
+  type: typeof OFFLINE_NAVIGATION_FALLBACK_SERVED
+  buildId?: string
+  reason?: 'network-error'
+  url?: string
+}
+
 function getBasePath(): string {
   return (process.env.__NEXT_ROUTER_BASEPATH as string) || ''
 }
@@ -16,6 +26,38 @@ function getServiceWorkerScope(): string {
   return basePath ? `${basePath}/` : '/'
 }
 
+function listenForOfflineNavigationMessages(): void {
+  if (isListeningForServiceWorkerMessages) {
+    return
+  }
+  isListeningForServiceWorkerMessages = true
+
+  navigator.serviceWorker.addEventListener('message', (event) => {
+    handleOfflineNavigationServiceWorkerMessage(event.data)
+  })
+}
+
+export function handleOfflineNavigationServiceWorkerMessage(data: unknown) {
+  if (!isOfflineNavigationFallbackServedMessage(data)) {
+    return
+  }
+
+  const { notifyOffline } =
+    require('./components/offline') as typeof import('./components/offline')
+  notifyOffline()
+}
+
+function isOfflineNavigationFallbackServedMessage(
+  data: unknown
+): data is OfflineNavigationFallbackServedMessage {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    (data as Partial<OfflineNavigationFallbackServedMessage>).type ===
+      OFFLINE_NAVIGATION_FALLBACK_SERVED
+  )
+}
+
 export function registerOfflineNavigationServiceWorker(): void {
   if (
     process.env.__NEXT_DEV_SERVER ||
@@ -26,6 +68,8 @@ export function registerOfflineNavigationServiceWorker(): void {
     return
   }
 
+  listenForOfflineNavigationMessages()
+
   navigator.serviceWorker
     .register(getServiceWorkerHref(), {
       scope: getServiceWorkerScope(),

packages/next/src/shared/lib/offline-navigation-constants.ts

@@ -0,0 +1,2 @@
+export const OFFLINE_NAVIGATION_FALLBACK_SERVED =
+  'next-offline-navigation-fallback-served'

test/production/app-dir/offline-navigations/app/offline-status.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { useOffline } from 'next/offline'
+
+export function OfflineStatus() {
+  const isOffline = useOffline()
+  return <p id="offline-status">{isOffline ? 'offline' : 'online'}</p>
+}

test/production/app-dir/offline-navigations/app/page.tsx

@@ -1,3 +1,10 @@
+import { OfflineStatus } from './offline-status'
+
 export default function Page() {
-  return <p>offline navigations page</p>
+  return (
+    <>
+      <p>offline navigations page</p>
+      <OfflineStatus />
+    </>
+  )
 }

test/production/app-dir/offline-navigations/offline-navigations.test.ts

@@ -4,6 +4,9 @@ import { nextTestSetup } from 'e2e-utils'
 import { retry } from 'next-test-utils'
 import type * as Playwright from 'playwright'
 
+const OFFLINE_NAVIGATION_FALLBACK_SERVED =
+  'next-offline-navigation-fallback-served'
+
 describe('offlineNavigations build artifacts', () => {
   const { next } = nextTestSetup({
     files: __dirname,
@@ -76,6 +79,7 @@ describe('offlineNavigations build artifacts', () => {
     )
     expect(serviceWorkerScript).toContain('cacheOfflineNavigationResources')
     expect(serviceWorkerScript).toContain('caches.delete')
+    expect(serviceWorkerScript).toContain(OFFLINE_NAVIGATION_FALLBACK_SERVED)
     expect(serviceWorkerScript).toContain('isDocumentNavigationRequest')
     expect(serviceWorkerScript).toContain('skipWaiting')
     expect(serviceWorkerScript).toContain('clients.claim')
@@ -159,6 +163,59 @@ describe('offlineNavigations build artifacts', () => {
           await browser.eval(() => Boolean(navigator.serviceWorker.controller))
         ).toBe(true)
       })
+      expect(await browser.elementById('offline-status').text()).toBe('online')
+
+      await browser.eval((messageType) => {
+        const win = window as typeof window & {
+          __restoreOfflineNavigationFetch?: () => void
+        }
+        const originalFetch = window.fetch
+        win.__restoreOfflineNavigationFetch = () => {
+          window.fetch = originalFetch
+          delete win.__restoreOfflineNavigationFetch
+        }
+        window.fetch = async () => {
+          throw new TypeError('offline navigation test')
+        }
+        navigator.serviceWorker.dispatchEvent(
+          new MessageEvent('message', {
+            data: {
+              type: messageType,
+              reason: 'network-error',
+              url: location.href,
+            },
+          })
+        )
+      }, OFFLINE_NAVIGATION_FALLBACK_SERVED)
+      await retry(async () => {
+        expect(await browser.elementById('offline-status').text()).toBe(
+          'offline'
+        )
+      })
+      await browser.eval(() => {
+        const win = window as typeof window & {
+          __restoreOfflineNavigationFetch?: () => void
+        }
+        win.__restoreOfflineNavigationFetch?.()
+        window.dispatchEvent(new Event('online'))
+      })
+      await retry(async () => {
+        expect(await browser.elementById('offline-status').text()).toBe(
+          'online'
+        )
+      })
+
+      await browser.eval((messageType) => {
+        localStorage.removeItem('__nextOfflineNavigationMessage')
+        navigator.serviceWorker.addEventListener('message', (event) => {
+          if (event.data?.type === messageType) {
+            localStorage.setItem(
+              '__nextOfflineNavigationMessage',
+              JSON.stringify(event.data)
+            )
+          }
+        })
+      }, OFFLINE_NAVIGATION_FALLBACK_SERVED)
 
       const cacheState = await browser.eval(async () => {
         const cacheNames = (await caches.keys()).filter((cacheName) =>
@@ -221,6 +278,16 @@ describe('offlineNavigations build artifacts', () => {
           )
         )
       ).toBe(true)
+      const serviceWorkerMessage = await browser.eval(() => {
+        const message = localStorage.getItem('__nextOfflineNavigationMessage')
+        return message === null ? null : JSON.parse(message)
+      })
+      expect(serviceWorkerMessage).toMatchObject({
+        type: OFFLINE_NAVIGATION_FALLBACK_SERVED,
+        buildId,
+        reason: 'network-error',
+        url: `${next.url}/docs/offline-navigation-cache-miss`,
+      })
       await page!.context().setOffline(false)
 
       await browser.eval(async () => {