使用Cache API缓存AWS S3大文件后，如何读取并优先加载？

一、处理缓存返回的响应（ReadableStream转可用资源） #

cache.match()返回的其实是Response对象，它的body属性是ReadableStream。你可以通过Response的内置方法将其转换为Blob，再生成可直接用于页面元素的临时URL，适合大文件场景（无需一次性加载全部内容到内存）：

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

let cachedResponse = await cache.match('/example.png', options);
if (cachedResponse) {
  // 将响应流转为Blob格式
  const blob = await cachedResponse.blob();
  // 生成可用于img标签的临时URL
  const imgUrl = URL.createObjectURL(blob);
  
  // 绑定到页面图片元素
  const imgElement = document.querySelector('#target-image');
  imgElement.src = imgUrl;
  
  // 图片加载完成后释放临时URL，避免内存泄漏
  imgElement.onload = () => {
    URL.revokeObjectURL(imgUrl);
  };
}

二、实现默认从缓存加载（用Service Worker拦截请求） #

要让页面默认优先从缓存加载资源，最可靠的方式是用Service Worker拦截页面的网络请求，优先返回缓存内容，缓存未命中时再走网络（可选同步缓存新资源）。

1. 主页面注册Service Worker #

在你的页面脚本中添加注册逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
    } catch (err) {
      console.error('Service Worker注册失败:', err);
    }
  });
}

2. 编写Service Worker脚本（sw.js） #

const CACHE_NAME = 'my-cache';

// 拦截所有fetch请求
self.addEventListener('fetch', (event) => {
  // 只处理图片请求，可根据需求调整匹配规则（比如匹配特定路径）
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.match(event.request, {
        ignoreSearch: true,
        ignoreMethod: true,
        ignoreVary: true
      }).then((cachedResponse) => {
        // 缓存命中直接返回
        if (cachedResponse) return cachedResponse;
        
        // 缓存未命中则走网络，同时将新响应存入缓存（可选）
        return fetch(event.request).then((networkResponse) => {
          // 大文件缓存需克隆响应，避免原响应被消耗
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        });
      })
    );
  }
});

注意事项 #

• 大文件存储限制：不同浏览器对Cache API的磁盘配额不同，一般基于设备剩余空间分配，建议监听storage事件处理配额不足的情况。
• 响应可缓存性：确保S3返回的响应头允许缓存（比如设置合理的Cache-Control），避免无法存入缓存。
• 内存管理：大文件使用URL.createObjectURL后必须在加载完成后调用revokeObjectURL释放资源，防止内存泄漏。

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