离线环境下iframe加载CacheStorage站点的问题求助

问题核心 #

离线时通过fetch()能正常从CacheStorage获取资源，但<iframe>直接加载相对路径会失败；转成Blob URL后iframe能显示HTML，但关联的脚本、样式等子资源无法加载——因为Blob URL的上下文导致相对路径解析错误，且无法触发Service Worker的缓存拦截。

可行解决方案 #

1. 调整Service Worker确保iframe请求及子资源命中缓存 #

首先确认assets/js.blend/路径下的所有资源（包括index.html和其依赖的脚本、样式）都已被正确缓存，且Service Worker的作用域覆盖该路径。然后在Service Worker的fetch事件中明确匹配这类请求，优先返回缓存内容：

self.addEventListener('fetch', (event) => {
  // 匹配iframe相关资源的请求
  if (event.request.url.includes('assets/js.blend/')) {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // 缓存存在则返回，否则尝试网络（离线时会失败，但需确保资源已预缓存）
          return cachedResponse || fetch(event.request);
        })
    );
  }
  // 保留原有其他请求的处理逻辑
});

如果之前的预缓存列表未包含assets/js.blend/下的子资源，需更新缓存逻辑，用Cache.addAll()将这些资源加入缓存：

// 示例：在Service Worker的install事件中添加缓存
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('your-cache-name')
      .then(cache => {
        return cache.addAll([
          // 原有缓存资源列表
          'assets/js.blend/index.html',
          'assets/js.blend/script.js',
          'assets/js.blend/style.css',
          // 其他关联资源...
        ]);
      })
  );
});

2. 修改HTML内容注入base标签修正路径 #

当用fetch()获取到iframe的HTML后，先在<head>中注入<base>标签，指定原站点的根路径，让HTML中的相对路径基于原站点解析，从而能被Service Worker拦截并从缓存加载：

fetch('assets/js.blend/index.html')
  .then(res => res.text())
  .then(html => {
    // 注入base标签，确保相对路径指向原站点
    const modifiedHtml = html.replace('<head>', `<head><base href="${self.location.origin}/">`);
    const blob = new Blob([modifiedHtml], { type: 'text/html' });
    const blobUrl = URL.createObjectURL(blob);

    // 创建并插入iframe
    const iframe = document.createElement('iframe');
    iframe.src = blobUrl;
    document.body.appendChild(iframe);

    // iframe加载完成后释放Blob URL，避免内存泄漏
    iframe.addEventListener('load', () => {
      URL.revokeObjectURL(blobUrl);
    });
  });

关键排查步骤 #

• 打开Chrome DevTools的Application > Cache Storage，确认assets/js.blend/下的所有关联资源都已被缓存。
• 在Application > Service Workers > Inspect中查看fetch事件日志，确认iframe及其子资源的请求是否被Service Worker正确拦截。
• 检查缓存资源的URL与请求URL是否完全匹配（注意查询参数、大小写差异等细节）。

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