Cache static assets in service worker

Author: hkarani

next.config.js

@@ -1,6 +1,6 @@
 const { withPlausibleProxy } = require('next-plausible')
 const { InjectManifest } = require('workbox-webpack-plugin')
-const { generatePrecacheManifest } = require('./sw/build.js')
+const { generatePrecacheManifest, addStaticAssetsInServiceWorker } = require('./sw/build.js')
 const webpack = require('webpack')
 
 let isProd = process.env.NODE_ENV === 'production'
@@ -258,6 +258,25 @@ module.exports = withPlausibleProxy()({
 
       config.plugins.push(workboxPlugin)
     }
+    // Static assets cannot be added in server build they are emitted in the client build phase https://nextjs.org/docs/14/app/api-reference/next-config-js/webpack
+    // and are not needed in dev
+    // The service worker ONLY includes the assets in precache-manifest.json injected by Workbox plugin when the build starts
+    // but our static assets only exist later in the build.
+    // However the precache-manifest.json assets are hardcoded in an array in the generated service worker by Worbox in public/sw.js
+    // So we patch it to include our own custom assets
+
+    if (!dev) {
+      config.plugins.push({
+        apply: (compiler) => {
+          compiler.hooks.afterEmit.tapPromise(
+            'AddEmittedStaticAssetUrlsToServiceWorker',
+            async () => {
+              await addStaticAssetsInServiceWorker()
+            }
+          )
+        }
+      })
+    }
 
     config.module.rules.push(
       {

sw/build.js

@@ -1,6 +1,6 @@
 const { createHash } = require('crypto')
-const { readdirSync, readFileSync, statSync, writeFileSync } = require('fs')
-const { join } = require('path')
+const { readdirSync, readFileSync, statSync, writeFileSync, existsSync } = require('fs')
+const { join, resolve } = require('path')
 
 const getRevision = filePath => createHash('md5').update(readFileSync(filePath)).digest('hex')
 const walkSync = dir => readdirSync(dir, { withFileTypes: true }).flatMap(file =>
@@ -58,4 +58,101 @@ function generatePrecacheManifest () {
   console.log(`Created precache manifest at ${output}. Cache will include ${manifest.length} URLs with a size of ${formatBytes(size)}.`)
 }
 
-module.exports = { generatePrecacheManifest }
+function patchSwAssetsURL (assestUrlsArray) {
+  const fullPath = resolve('public/sw.js')
+  let content = readFileSync(fullPath, 'utf-8')
+  // Workbox puts cached items in Q=JSON('[{precache-manifest.json contents}]') in public/sw.js
+  // so we patch it to include our built static assets urls
+  const patchedArray = JSON.stringify(assestUrlsArray)
+  content = content.replace(
+    /Q=JSON\.parse\(\s*'(.*?)'\s*\);/s,
+    `Q=JSON.parse('${patchedArray}');`
+  )
+
+  writeFileSync(fullPath, content, 'utf-8')
+  console.log('✅ Patched service worker cached assets')
+}
+
+async function addStaticAssetsInServiceWorker () {
+  const manifest = []
+  let size = 0
+  const addToManifest = (filePath, url, s) => {
+    const revision = getRevision(filePath)
+    manifest.push({ url, revision })
+    size += s
+  }
+
+  const staticDir = join(__dirname, '../public')
+  const staticFiles = walkSync(staticDir)
+  const staticMatch = f => [/\.(gif|jpe?g|ico|png|ttf|woff|woff2)$/].some(m => m.test(f))
+  staticFiles.filter(staticMatch).forEach(file => {
+    const stats = statSync(file)
+    // Normalize path separators for URLs
+    const url = file.slice(staticDir.length).replace(/\\/g, '/')
+    addToManifest(file, url, stats.size)
+  })
+
+  const pagesDir = join(__dirname, '../pages')
+  const precacheURLs = ['/offline']
+  const pagesFiles = walkSync(pagesDir)
+  const fileToUrl = f => f.slice(pagesDir.length).replace(/\.js$/, '')
+  const pageMatch = f => precacheURLs.some(url => fileToUrl(f) === url)
+  pagesFiles.filter(pageMatch).forEach(file => {
+    const stats = statSync(file)
+    addToManifest(file, fileToUrl(file), stats.size)
+  })
+
+  const nextStaticDir = join(__dirname, '../.next/static')
+  // Wait until folder is emitted
+  console.log('⏳ Waiting for .next/static to be emitted...')
+  let folderRetries = 0
+  while (!existsSync(nextStaticDir) && folderRetries < 10) {
+    // eslint-disable-next-line no-await-in-loop
+    await new Promise(resolve => setTimeout(resolve, 500))
+    folderRetries++
+  }
+
+  if (!existsSync(nextStaticDir)) {
+    // Still write the manifest with whatever was collected from public/ and pages/
+    const output = 'sw/precache-manifest.json'
+    writeFileSync(output, JSON.stringify(manifest, null, 2))
+    console.warn(
+      `⚠️ .next/static not found. Created precache manifest at ${output} with only public/ and pages/ assets.`
+    )
+    return
+  }
+  // Now watch for stabilization (files are emitted asynchronously)
+  let lastFileCount = 0
+  let stableCount = 0
+  const maxWaitMs = 60000
+  const startTime = Date.now()
+  while (stableCount < 3 && (Date.now() - startTime) < maxWaitMs) {
+    const files = walkSync(nextStaticDir)
+    if (files.length === lastFileCount) {
+      stableCount++
+    } else {
+      stableCount = 0
+      lastFileCount = files.length
+    }
+    await new Promise(resolve => setTimeout(resolve, 500))
+  }
+  // finally generate manifest
+  const nextStaticFiles = walkSync(nextStaticDir)
+  nextStaticFiles.forEach(file => {
+    const stats = statSync(file)
+    // Normalize path separators for URLs
+    const url = `/_next/static${file.slice(nextStaticDir.length).replace(/\\/g, '/')}`
+    addToManifest(file, url, stats.size)
+  })
+  // write manifest
+  const output = 'sw/precache-manifest.json'
+  writeFileSync(output, JSON.stringify(manifest, null, 2))
+  console.log(
+    `✅ Created precache manifest at ${output}. Cache will include ${manifest.length} URLs with a size of ${formatBytes(size)}.`
+  )
+  const data = readFileSync('sw/precache-manifest.json', 'utf-8')
+  const manifestArray = JSON.parse(data)
+  patchSwAssetsURL(manifestArray)
+}
+
+module.exports = { generatePrecacheManifest, addStaticAssetsInServiceWorker }