Serve offline navigation fallback document

Author: feedthejim

packages/next/src/build/index.ts

@@ -4146,6 +4146,7 @@ export default async function build(
               createOfflineNavigationServiceWorker({
                 buildId,
                 cacheNamespace: manifest.cacheNamespace,
+                fallbackDocumentHref: manifest.fallbackDocument.href,
                 manifestHref: manifest.manifest.href,
               })
             )

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

@@ -12,15 +12,18 @@ export function getOfflineNavigationServiceWorkerFilePath(): string {
 export function createOfflineNavigationServiceWorker({
   buildId,
   cacheNamespace,
+  fallbackDocumentHref,
   manifestHref,
 }: {
   buildId: string
   cacheNamespace: string
+  fallbackDocumentHref: string
   manifestHref: string
 }): string {
   const metadata = JSON.stringify({
     buildId,
     cacheNamespace,
+    fallbackDocumentHref,
     manifestHref,
     source: 'offline-navigation-service-worker',
   })
@@ -53,6 +56,26 @@ async function cacheOfflineNavigationResources(){
   const fallbackResponse=await fetchRequiredResource(manifest.fallbackDocument.href);
   await cache.put(manifest.fallbackDocument.href,fallbackResponse);
 }
+function isDocumentNavigationRequest(request){
+  if(request.method!=='GET'||request.mode!=='navigate'||request.destination!=='document'){
+    return false;
+  }
+  const url=new URL(request.url);
+  return url.origin===self.location.origin;
+}
+async function fetchDocumentNavigation(request){
+  try{
+    return await fetch(request);
+  }catch(err){
+    const metadata=self.__NEXT_OFFLINE_NAVIGATION_SW;
+    const cache=await caches.open(metadata.cacheNamespace);
+    const fallbackResponse=await cache.match(metadata.fallbackDocumentHref);
+    if(fallbackResponse){
+      return fallbackResponse;
+    }
+    throw err;
+  }
+}
 self.addEventListener('install',(event)=>{
   event.waitUntil((async()=>{
     await cacheOfflineNavigationResources();
@@ -71,5 +94,10 @@ self.addEventListener('activate',(event)=>{
     await self.clients.claim();
   })());
 });
+self.addEventListener('fetch',(event)=>{
+  if(isDocumentNavigationRequest(event.request)){
+    event.respondWith(fetchDocumentNavigation(event.request));
+  }
+});
 `
 }

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

@@ -2,6 +2,7 @@ import { existsSync } from 'fs'
 import { join } from 'path'
 import { nextTestSetup } from 'e2e-utils'
 import { retry } from 'next-test-utils'
+import type * as Playwright from 'playwright'
 
 describe('offlineNavigations build artifacts', () => {
   const { next } = nextTestSetup({
@@ -67,14 +68,18 @@ describe('offlineNavigations build artifacts', () => {
     expect(serviceWorkerScript).toContain(
       `"cacheNamespace":"next-offline-navigation-v1:${buildId}:/docs"`
     )
+    expect(serviceWorkerScript).toContain(
+      `"fallbackDocumentHref":"/docs/_next/static/${buildId}/_offline-navigation-fallback.html"`
+    )
     expect(serviceWorkerScript).toContain(
       `"manifestHref":"/docs/_next/static/${buildId}/_offline-navigation-manifest.json"`
     )
     expect(serviceWorkerScript).toContain('cacheOfflineNavigationResources')
     expect(serviceWorkerScript).toContain('caches.delete')
+    expect(serviceWorkerScript).toContain('isDocumentNavigationRequest')
     expect(serviceWorkerScript).toContain('skipWaiting')
     expect(serviceWorkerScript).toContain('clients.claim')
-    expect(serviceWorkerScript).not.toContain('respondWith')
+    expect(serviceWorkerScript).toContain('respondWith')
 
     expect(manifestJson).toEqual({
       version: 1,
@@ -107,6 +112,7 @@ describe('offlineNavigations build artifacts', () => {
     const { buildId } = await getOfflineNavigationArtifactPaths()
     await next.start({ skipBuild: true })
 
+    let page: Playwright.Page | undefined
     try {
       const swResponse = await next.fetch(
         `/docs/_next/static/_offline-navigation-service-worker.js${next.getDeploymentIdQuery()}`
@@ -117,7 +123,11 @@ describe('offlineNavigations build artifacts', () => {
       )
       expect(swResponse.headers.get('service-worker-allowed')).toBe('/docs/')
 
-      const browser = await next.browser('/docs')
+      const browser = await next.browser('/docs', {
+        beforePageLoad(p: Playwright.Page) {
+          page = p
+        },
+      })
       await retry(async () => {
         const registration = await browser.eval(async () => {
           if (!('serviceWorker' in navigator)) {
@@ -144,6 +154,11 @@ describe('offlineNavigations build artifacts', () => {
           scriptURL: `${next.url}/docs/_next/static/_offline-navigation-service-worker.js${next.getDeploymentIdQuery()}`,
         })
       })
+      await retry(async () => {
+        expect(
+          await browser.eval(() => Boolean(navigator.serviceWorker.controller))
+        ).toBe(true)
+      })
 
       const cacheState = await browser.eval(async () => {
         const cacheNames = (await caches.keys()).filter((cacheName) =>
@@ -181,6 +196,33 @@ describe('offlineNavigations build artifacts', () => {
         ])
       )
 
+      await page!.context().setOffline(true)
+      const nonNavigationResult = await browser.eval(async () => {
+        try {
+          await fetch('/docs?__next_offline_probe=1', {
+            headers: { rsc: '1' },
+          })
+          return 'resolved'
+        } catch {
+          return 'rejected'
+        }
+      })
+      expect(nonNavigationResult).toBe('rejected')
+
+      const offlineResponse = await page!.goto(
+        `${next.url}/docs/offline-navigation-cache-miss`,
+        { waitUntil: 'domcontentloaded' }
+      )
+      expect(offlineResponse?.status()).toBe(200)
+      expect(
+        await browser.eval(() =>
+          document.documentElement.hasAttribute(
+            'data-next-offline-navigation-fallback'
+          )
+        )
+      ).toBe(true)
+      await page!.context().setOffline(false)
+
       await browser.eval(async () => {
         if (!('serviceWorker' in navigator)) {
           return
@@ -201,6 +243,9 @@ describe('offlineNavigations build artifacts', () => {
         )
       })
     } finally {
+      if (page) {
+        await page.context().setOffline(false)
+      }
       await next.stop()
     }
   })