Cache offline navigation artifacts in service worker

Author: feedthejim

packages/next/src/build/index.ts

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

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

@@ -9,19 +9,65 @@ export function getOfflineNavigationServiceWorkerFilePath(): string {
 
 export function createOfflineNavigationServiceWorker({
   buildId,
+  cacheNamespace,
   manifestHref,
 }: {
   buildId: string
+  cacheNamespace: string
   manifestHref: string
 }): string {
   const metadata = JSON.stringify({
     buildId,
+    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

@@ -64,9 +64,14 @@ describe('offlineNavigations build artifacts', () => {
     expect(html).not.toContain('offline navigations page')
 
     expect(serviceWorkerScript).toContain(`"buildId":"${buildId}"`)
+    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')
@@ -99,6 +104,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 {
@@ -139,11 +145,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())