基于Workbox的PWA：iOS端Service Worker无法处理CDN CSS引用图片

这确实是iOS Safari的已知行为限制：当CSS文件来自跨域CDN时，其中引用的图片等子资源请求不会被Service Worker拦截处理，导致直接发起网络请求，而不会走缓存逻辑。

以下是几种可行的修复方案：

• 将CSS文件迁移至站点同源域名：这是你已经验证有效的方案，把CSS从CDN移到和主站同域名下后，CSS里的子资源请求会被视为同源请求，Service Worker就能正常拦截并处理缓存。
• 自定义Workbox路由拦截图片请求：在Service Worker中针对图片资源添加全局路由规则，强制捕获所有图片请求（包括跨域CSS发起的），并应用缓存策略。示例代码：

// 拦截所有图片请求，使用CacheFirst策略
workbox.routing.registerRoute(
  ({ request }) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'site-images',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200], // 允许缓存CORS请求的0状态码
      }),
    ],
  })
);

注意必须确保CDN返回的图片资源包含正确的Access-Control-Allow-Origin响应头，否则Service Worker无法缓存跨域资源。

• 配置CDN为站点子域名：如果你的CDN支持，将CDN域名设置为主站的子域名（如cdn.yourdomain.com），这样CSS资源属于同源范围，其引用的图片请求会被Service Worker正常处理。
• 预缓存关键图片资源：在Service Worker安装阶段，提前预缓存需要的图片资源，这样即使后续请求未被拦截，也能直接从缓存读取。示例代码：

workbox.precaching.precacheAndRoute([
  { url: 'https://your-cdn.com/hero.jpg', revision: 'v1' },
  { url: 'https://your-cdn.com/icon.png', revision: 'v1' },
]);

这种方式适合资源列表相对固定的场景，需要定期维护预缓存清单。

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