如何在PWA的Service Worker中一次性缓存static目录下所有静态资源？

你说得没错，Service Worker的cache.add()或cache.addAll()确实只接受具体的文件URL，不支持直接传入文件夹路径——直接传/static肯定会失败，因为服务器一般不会把文件夹路径解析成有效的资源响应。不过有几种靠谱的方法能帮你实现“缓存整个static目录”的需求，我给你梳理一下：

1. 用构建工具自动生成资源列表（最推荐） #

如果你的项目用了Webpack、Vite这类构建工具，搭配Workbox（专门为PWA设计的库）就能轻松搞定。不用手动维护资源路径，构建工具会帮你扫描static目录下的所有文件，自动生成缓存列表。

比如用Workbox的GenerateSW插件，只需要在配置里加这么一段：

// webpack.config.js 或 vite.config.js 中的Workbox配置
workbox: {
  globPatterns: ['static/**/*'], // 匹配static目录下所有文件
  swDest: 'service-worker.js',
}

构建后生成的Service Worker会自动包含static目录下所有文件的缓存逻辑，你不用自己写cache.addAll()的资源数组。

2. 后端接口返回目录文件列表 #

如果你的项目有后端服务，可以写一个简单的接口，比如/api/get-static-files，让它返回static目录下所有文件的相对路径数组（比如['static/img1.png', 'static/css/style.css']）。然后在Service Worker的install事件里，先调用这个接口拿到列表，再执行缓存：

self.addEventListener('install', async (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open('static-cache-v1');
      // 从后端获取static目录的文件列表
      const fileListResp = await fetch('/api/get-static-files');
      const fileList = await fileListResp.json();
      // 缓存所有文件
      await cache.addAll(fileList);
    })()
  );
});

注意：后端接口需要正确遍历static目录，返回准确的文件路径，同时要处理好权限和目录遍历的安全问题。

3. 静态生成资源清单（适合纯静态站点） #

如果是没有后端的纯静态站点，比如用Eleventy、Hugo生成的站点，可以在构建阶段写个脚本，扫描static目录，生成一个包含所有文件路径的JSON文件（比如static-manifest.json）。然后在Service Worker里加载这个JSON文件，拿到资源列表再缓存：

构建脚本示例（Node.js）： #

// generate-static-manifest.js
const fs = require('fs');
const path = require('path');

const staticDir = path.join(__dirname, 'static');
const manifest = [];

function scanDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);
    if (stats.isDirectory()) {
      scanDir(fullPath);
    } else {
      // 生成相对路径，比如static/img1.png
      const relativePath = path.relative(__dirname, fullPath);
      manifest.push(`/${relativePath}`);
    }
  });
}

scanDir(staticDir);
fs.writeFileSync('static-manifest.json', JSON.stringify(manifest));

然后在Service Worker里：

self.addEventListener('install', async (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open('static-cache-v1');
      const manifestResp = await fetch('/static-manifest.json');
      const fileList = await manifestResp.json();
      await cache.addAll(fileList);
    })()
  );
});

一些注意事项 #

• 记得给缓存命名加上版本号（比如static-cache-v1），后续更新资源时，修改版本号就能触发Service Worker的更新，避免旧缓存残留。
• 如果static目录下有大量资源，一次性缓存可能会延长Service Worker的install时间，影响用户体验。可以考虑分批次缓存，或者只缓存核心资源，非核心资源用fetch事件动态缓存。
• 如果资源放在CDN上，要确保CDN允许CORS跨域请求，否则cache.addAll()会失败。

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