如何处理PWA离线页面在子目录下的资源路径问题？

这问题我之前做PWA项目时也碰到过，核心就是相对路径在不同层级页面下的解析逻辑不一样——当你在/sub/other.html页面触发离线时，浏览器会把offline.html里的css/style.css解析成相对于当前页面的路径，也就是/sub/css/style.css，但你的样式实际在根目录的/css/style.css里，自然找不到。给你几个靠谱的解决办法，按推荐优先级排序：

1. 改用根相对路径（最直接高效） #

直接修改offline.html里的样式引用，把相对路径改成以斜杠开头的根相对路径：

<!-- 原来的写法 -->
<link rel="stylesheet" href="css/style.css">

<!-- 修改后的写法 -->
<link rel="stylesheet" href="/css/style.css">

加个斜杠后，不管你在网站的哪个子目录下，浏览器都会从网站根目录开始查找资源，彻底避免路径解析错误。这个方案最简单，几乎没有维护成本，优先推荐。

2. 在Service Worker中拦截并修正请求 #

如果因为项目限制不能修改页面里的路径，可以在service-worker.js中添加请求拦截逻辑，把错误的路径重定向到正确的缓存资源：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      // 如果缓存中找不到当前请求，且请求的是错误的子目录样式路径
      if (!cachedResponse && event.request.url.endsWith('/sub/css/style.css')) {
        // 去缓存中查找根目录的样式文件
        return caches.match('/css/style.css');
      }
      // 正常返回缓存资源或发起网络请求
      return cachedResponse || fetch(event.request);
    })
  );
});

注意：使用这个方法前，要确保你已经在Service Worker的install阶段把/css/style.css正确加入了缓存列表。

3. 优化缓存策略，确保根路径资源被正确缓存 #

检查你的service-worker.js的缓存逻辑，确保所有需要离线访问的资源（包括根路径的样式和离线页面）都被正确缓存：

const CACHE_VERSION = 'pwa-cache-v1';
const CACHED_ASSETS = [
  '/',
  '/index.html',
  '/css/style.css',
  '/offline.html',
  '/sub/other.html'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_VERSION)
      .then((cache) => cache.addAll(CACHED_ASSETS))
      .then(() => self.skipWaiting())
  );
});

这样不管用户从哪个页面进入离线状态，缓存中都有正确路径的资源可供读取。

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