offline navigations: cache fallback artifacts (4/11)

Author: feedthejim

packages/next/src/build/index.ts

@@ -4144,6 +4144,7 @@ export default async function build(
             await writeFileUtf8(
               serviceWorkerPath,
               createOfflineNavigationServiceWorker({
+                cacheNamespace: manifest.cacheNamespace,
                 manifestHref: manifest.manifest.href,
               })
             )

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

@@ -7,21 +7,67 @@ export function getOfflineNavigationServiceWorkerFilePath(): string {
   return path.join(CLIENT_STATIC_FILES_PATH, OFFLINE_NAVIGATION_SERVICE_WORKER)
 }
 
-// Generate an app-local service worker for offline navigations. This slice is
-// pass-through: it only installs and claims clients so later slices can add
-// cache population and fallback document handling.
+// Offline navigations use a generated, app-local service worker. It caches the
+// bootstrap manifest and fallback document during installation; document
+// navigations still go to the network until fallback handling is enabled.
 export function createOfflineNavigationServiceWorker({
+  cacheNamespace,
   manifestHref,
 }: {
+  cacheNamespace: string
   manifestHref: string
 }): string {
   const metadata = JSON.stringify({
+    cacheNamespace,
     manifestHref,
     source: 'offline-navigation-service-worker',
   })
 
   return `self.__NEXT_OFFLINE_NAVIGATION_SW=${metadata};
-self.addEventListener('install',(event)=>{event.waitUntil(self.skipWaiting())});
-self.addEventListener('activate',(event)=>{event.waitUntil(self.clients.claim())});
+const CACHE_PREFIX='next-offline-navigation-v1:';
+function withDeploymentQuery(href){
+  const url=new URL(href,self.location.origin);
+  const deploymentParams=new URLSearchParams(self.location.search);
+  deploymentParams.forEach((value,key)=>{
+    if(!url.searchParams.has(key)){
+      url.searchParams.set(key,value);
+    }
+  });
+  return url.href;
+}
+async function fetchRequiredResource(href){
+  const response=await fetch(withDeploymentQuery(href),{cache:'no-store'});
+  if(!response.ok){
+    throw new Error('Failed to cache offline navigation resource: '+href);
+  }
+  return response;
+}
+async function cacheOfflineNavigationResources(){
+  const metadata=self.__NEXT_OFFLINE_NAVIGATION_SW;
+  const cache=await caches.open(metadata.cacheNamespace);
+  const manifestResponse=await fetchRequiredResource(metadata.manifestHref);
+  const manifest=await manifestResponse.clone().json();
+  await cache.put(metadata.manifestHref,manifestResponse);
+  const fallbackResponse=await fetchRequiredResource(manifest.fallbackDocument.href);
+  await cache.put(manifest.fallbackDocument.href,fallbackResponse);
+}
+self.addEventListener('install',(event)=>{
+  event.waitUntil((async()=>{
+    await cacheOfflineNavigationResources();
+    await self.skipWaiting();
+  })());
+});
+self.addEventListener('activate',(event)=>{
+  event.waitUntil((async()=>{
+    const metadata=self.__NEXT_OFFLINE_NAVIGATION_SW;
+    const cacheNames=await caches.keys();
+    await Promise.all(cacheNames.map((cacheName)=>{
+      if(cacheName.startsWith(CACHE_PREFIX)&&cacheName!==metadata.cacheNamespace){
+        return caches.delete(cacheName);
+      }
+    }));
+    await self.clients.claim();
+  })());
+});
 `
 }

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

@@ -63,9 +63,14 @@ describe('offlineNavigations build artifacts', () => {
     expect(html).toContain('/app-assets/_next/static/')
     expect(html).not.toContain('offline navigations page')
 
+    expect(serviceWorkerScript).toContain(
+      `"cacheNamespace":"next-offline-navigation-v1:${buildId}:/docs"`
+    )
     expect(serviceWorkerScript).toContain(
       `"manifestHref":"/docs/_next/static/${buildId}/_offline-navigation-manifest.json"`
     )
+    expect(serviceWorkerScript).toContain('cacheOfflineNavigationResources')
+    expect(serviceWorkerScript).toContain('caches.delete')
     expect(serviceWorkerScript).toContain('skipWaiting')
     expect(serviceWorkerScript).toContain('clients.claim')
     expect(serviceWorkerScript).not.toContain('respondWith')
@@ -98,6 +103,7 @@ describe('offlineNavigations build artifacts', () => {
     const buildResult = await next.build()
     expect(buildResult.exitCode).toBe(0)
 
+    const { buildId } = await getOfflineNavigationArtifactPaths()
     await next.start({ skipBuild: true })
 
     try {
@@ -138,11 +144,56 @@ describe('offlineNavigations build artifacts', () => {
         })
       })
 
+      const cacheState = await browser.eval(async () => {
+        const cacheNames = (await caches.keys()).filter((cacheName) =>
+          cacheName.startsWith('next-offline-navigation-v1:')
+        )
+        const entries: Array<{ cacheName: string; pathname: string }> = []
+
+        for (const cacheName of cacheNames) {
+          const cache = await caches.open(cacheName)
+          const requests = await cache.keys()
+
+          for (const request of requests) {
+            entries.push({
+              cacheName,
+              pathname: new URL(request.url).pathname,
+            })
+          }
+        }
+
+        return { cacheNames, entries }
+      })
+
+      const cacheName = `next-offline-navigation-v1:${buildId}:/docs`
+      expect(cacheState.cacheNames).toContain(cacheName)
+      expect(cacheState.entries).toEqual(
+        expect.arrayContaining([
+          {
+            cacheName,
+            pathname: `/docs/_next/static/${buildId}/_offline-navigation-manifest.json`,
+          },
+          {
+            cacheName,
+            pathname: `/docs/_next/static/${buildId}/_offline-navigation-fallback.html`,
+          },
+        ])
+      )
+
       await browser.eval(async () => {
         if (!('serviceWorker' in navigator)) {
           return
         }
 
+        const cacheNames = await caches.keys()
+        await Promise.all(
+          cacheNames
+            .filter((cacheName) =>
+              cacheName.startsWith('next-offline-navigation-v1:')
+            )
+            .map((cacheName) => caches.delete(cacheName))
+        )
+
         const registrations = await navigator.serviceWorker.getRegistrations()
         await Promise.all(
           registrations.map((registration) => registration.unregister())