离线缓存外部文件、网页及富媒体内容的技术实现问询

嘿，这个问题问得相当实际——离线缓存通过window.open打开的各类富媒体资源，确实是渐进式Web应用（PWA）里高频遇到的需求，我来给你拆解几个靠谱的落地方案：

Service Worker是浏览器提供的标准离线缓存解决方案，它能拦截所有页面（包括window.open打开的新标签页）的网络请求，完全满足你的需求。

第一步：注册Service Worker #

首先在主页面的JS中注册Service Worker，让它接管域名下的资源请求：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker 注册成功，作用域:', registration.scope);
      })
      .catch(err => {
        console.error('Service Worker 注册失败:', err);
      });
  });
}

第二步：配置缓存策略（sw.js） #

新建sw.js文件，编写缓存逻辑，核心是处理install（预缓存）和fetch（拦截请求、返回缓存）两个事件：

1. 预缓存核心资源 #

先把你确定需要离线访问的核心富媒体资源提前缓存：

const CACHE_NAME = 'rich-media-cache-v1';
// 预缓存列表：可以添加常用的图片、PDF、文档路径
const PRECACHE_ASSETS = [
  '/images/banner.jpg',
  '/docs/user-guide.pdf',
  '/slides/intro.pptx'
];

self.addEventListener('install', (event) => {
  // 等待预缓存完成后激活新的Service Worker
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_ASSETS))
      .then(() => self.skipWaiting())
  );
});

2. 拦截请求，实现离线缓存 #

在fetch事件中拦截所有GET请求，优先返回缓存内容，缓存未命中时再请求网络并将资源存入缓存：

self.addEventListener('fetch', (event) => {
  // 只处理GET请求（富媒体资源基本都是GET获取）
  if (event.request.method !== 'GET') return;

  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // 缓存存在，直接返回离线内容
        if (cachedResponse) {
          return cachedResponse;
        }

        // 缓存不存在，发起网络请求并缓存结果
        return fetch(event.request)
          .then(networkResponse => {
            // 只缓存成功的响应（状态码200）
            if (!networkResponse || networkResponse.status !== 200) {
              return networkResponse;
            }

            // 克隆响应（响应流只能被读取一次）
            const responseToCache = networkResponse.clone();
            // 将响应存入缓存
            caches.open(CACHE_NAME)
              .then(cache => cache.put(event.request, responseToCache));

            return networkResponse;
          });
      })
  );
});

3. 精准控制缓存的资源类型 #

如果你只想缓存特定类型的富媒体，可以添加MIME类型判断，避免缓存无关资源：

// 允许缓存的富媒体MIME类型列表
const ALLOWED_MIME_TYPES = [
  'image/jpeg', 'image/png', 'image/gif',
  'application/pdf',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // DOCX
  'application/vnd.openxmlformats-officedocument.presentationml.presentation' // PPTX
];

self.addEventListener('fetch', (event) => {
  if (event.request.method !== 'GET') return;

  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        if (cachedResponse) return cachedResponse;

        return fetch(event.request)
          .then(networkResponse => {
            const contentType = networkResponse.headers.get('Content-Type');
            // 仅缓存允许的类型
            if (contentType && ALLOWED_MIME_TYPES.some(type => contentType.includes(type))) {
              const responseToCache = networkResponse.clone();
              caches.open(CACHE_NAME).then(cache => cache.put(event.request, responseToCache));
            }
            return networkResponse;
          });
      })
  );
});

处理window.open的特殊场景 #

• window.open打开的新标签页请求，会被同域名下的Service Worker自动拦截，只要路径在Service Worker的作用域内（根目录注册的话，整个域名都覆盖）。
• 如果打开的是跨域资源，需要对方服务器配置CORS，且你的fetch请求需设置mode: 'cors'才能缓存；如果无法控制跨域服务器，建议将资源迁移到自己的域名下，或者使用CORS代理。

如果你不想用Service Worker（不推荐，因为功能受限），可以在用户点击链接时手动缓存资源，再打开新标签页：

// 给所有富媒体链接绑定点击事件
document.querySelectorAll('.media-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const resourceUrl = link.href;

    // 先缓存资源，再打开新标签页
    caches.open('manual-media-cache')
      .then(cache => {
        return fetch(resourceUrl)
          .then(response => {
            cache.put(resourceUrl, response.clone());
            window.open(resourceUrl, '_blank');
          });
      })
      .catch(err => {
        // 缓存失败时直接打开链接
        window.open(resourceUrl, '_blank');
      });
  });
});

不过这个方案只能缓存用户主动点击过的链接，无法覆盖自动加载的资源，也不能处理地址栏直接输入的情况，仅适合简单场景。

在Chrome DevTools的Application -> Service Workers面板勾选Offline，然后尝试打开之前访问过的富媒体资源，验证是否能从缓存加载。

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