Android Chrome使用force-cache请求时大文件无法缓存如何解决

核心原因：fetch的cache: "force-cache"参数优先级低于HTTP响应头的缓存规则，且安卓端Chrome对默认HTTP缓存的大小阈值、刷新行为规则和桌面端存在差异，30MB的文件容易触发移动端默认缓存的大小限制被自动清理。

以下是可行的解决方法：

• 优先配置服务端HTTP缓存响应头
  这是最稳定的缓存控制方案，优先级高于fetch的cache参数配置，返回dict.json的响应头需要添加如下配置：

  Cache-Control: public, max-age=2592000, immutable
  Content-Length: [文件实际大小]
  

  说明：max-age单位为秒，示例的2592000对应30天缓存有效期；immutable属性可以避免页面刷新时浏览器主动发起条件请求验证资源有效性，直接读取本地缓存；确保Content-Length头正确返回，避免因为长度识别错误导致缓存失败。
• 调整fetch请求参数
  补充同域请求配置，避免额外请求头破坏缓存匹配：

  fetch('/data/dict.json', {
    cache: "force-cache",
    mode: "same-origin",
    // 如果请求不需要携带cookie可删除下一行
    credentials: "same-origin"
  })
  

  注意不要主动添加Pragma: no-cache、Cache-Control: no-cache这类会强制跳过缓存的请求头。
• 采用Service Worker Cache API做自定义缓存
  如果上述方案仍不生效，可以通过Service Worker的缓存API实现完全自主的缓存控制，不受浏览器默认HTTP缓存的大小、行为规则限制，30MB体积的文件在绝大多数设备上都可以正常缓存：
  1. 页面注册Service Worker

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
      await navigator.serviceWorker.register('/sw.js')
    })
  }
  

  2. sw.js中添加缓存逻辑

  const CACHE_NAME = 'dict-cache-v1'
  const DICT_URL = '/data/dict.json'
  
  self.addEventListener('fetch', (event) => {
    if (event.request.url.includes(DICT_URL)) {
      event.respondWith(
        caches.match(event.request).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
          })
        })
      )
    }
  })
  

• 排查设备端异常配置
  确认测试设备没有开启无痕模式、没有开启「关闭浏览器时清除缓存」的设置，且设备剩余存储空间充足，避免缓存被系统自动清理。

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