PWA [sw-toolbox]：如何批量缓存含全量资源的离线回退页面？

当然支持！手动维护预缓存清单确实是个糟心的事儿，尤其是当页面依赖的JS、CSS、图片变来变去的时候，每次都要更新sw.js简直是重复劳动。下面给你两种靠谱的方案，帮你彻底摆脱这个麻烦：

方案一：用Workbox自动生成预缓存清单 #

Workbox是官方推荐的Service Worker工具库，能自动扫描你的页面及其所有依赖资源，帮你生成预缓存配置，完全不用手动一个个加资源路径。

步骤很简单：

1. 先安装Workbox CLI：

   npm install workbox-cli --save-dev
   

2. 在项目根目录创建一个workbox-config.js配置文件，内容如下：

   module.exports = {
     globDirectory: './dist/', // 替换成你的静态文件输出目录
     globPatterns: [
       '**/*.html',
       '**/*.js',
       '**/*.css',
       '**/*.png'
     ],
     swDest: './dist/sw.js', // 生成的Service Worker文件路径
     navigateFallback: '/offline.html', // 指定你的离线回退页面
     runtimeCaching: [] // 暂时不需要运行时缓存的话留空即可
   };
   

3. 运行命令自动生成sw.js：

   npx workbox generateSW workbox-config.js
   

   执行完后，Workbox会自动扫描dist目录下所有匹配的资源，包括offline.html本身以及它引用的所有JS、CSS、PNG，全部加入预缓存清单。以后只要HTML里的资源变了，重新跑一遍这个命令就能更新sw.js，再也不用手动修改了。

方案二：手动写构建脚本提取资源 #

要是你不想引入额外工具，也可以在项目构建阶段写个小脚本，自动解析offline.html的DOM，提取所有依赖资源的路径，然后生成预缓存数组写入sw.js。

比如用Node.js的cheerio库来做这件事：

1. 先装依赖：

   npm install cheerio --save-dev
   

2. 写一个generate-sw.js脚本：

   const fs = require('fs');
   const cheerio = require('cheerio');
   
   // 读取离线页面的内容
   const offlineHtmlPath = './dist/offline.html';
   const htmlContent = fs.readFileSync(offlineHtmlPath, 'utf8');
   const $ = cheerio.load(htmlContent);
   
   // 收集所有需要预缓存的资源路径
   const resourcesToPrecache = ['/offline.html']; // 先把页面本身加进去
   
   // 提取所有JS资源
   $('script[src]').each((_, elem) => {
     resourcesToPrecache.push($(elem).attr('src'));
   });
   
   // 提取所有CSS资源
   $('link[rel="stylesheet"][href]').each((_, elem) => {
     resourcesToPrecache.push($(elem).attr('href'));
   });
   
   // 提取所有图片资源
   $('img[src]').each((_, elem) => {
     resourcesToPrecache.push($(elem).attr('src'));
   });
   
   // 生成Service Worker的内容
   const swContent = `
   importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');
   workbox.precaching.precacheAndRoute(${JSON.stringify(resourcesToPrecache)});
   `;
   
   // 写入sw.js文件
   fs.writeFileSync('./dist/sw.js', swContent);
   

3. 把这个脚本加入你的构建流程，比如在package.json的scripts里加一行：

   "scripts": {
     "build": "your-existing-build-command && node generate-sw.js"
   }
   

   这样每次构建项目时，脚本都会自动更新sw.js里的预缓存清单，完全不用手动干预。

几个关键注意事项 #

• 确保资源路径的正确性：相对路径要和sw.js的位置匹配，否则会导致缓存失败。
• 资源哈希值：如果你的资源文件名里带有哈希（比如app.abc123.js），Workbox会自动识别并处理缓存更新，不用担心旧资源残留。
• 测试时记得清空浏览器缓存，或者用Chrome DevTools的Application面板强制刷新Service Worker，确保新的预缓存清单生效。

内容的提问来源于stack exchange，提问作者arkhamvm