如何提升Chrome浏览器中Application Cache（AppCache）存储上限？

嘿，针对你提到的Chrome里用AppCache存储400MB视频内容、需要提升存储上限的问题，我整理了几个实用的方案，都是实际项目里验证过的：

1. 引导用户手动调整站点存储配额 #

Chrome默认给单个站点的AppCache配额有限，但用户可以手动修改对应域名的存储限制，步骤很清晰：

• 打开Chrome，在地址栏输入 chrome://settings/siteData
• 在页面里搜索你的Web应用域名，找到后点击右侧的三个点图标（「更多操作」）
• 选择「修改存储空间」，输入你需要的上限数值（比如500MB或更高，也可以直接选「无限制」）
• 保存后刷新应用，AppCache就能使用新的配额了

2. 通过代码主动请求更大存储配额 #

让用户手动找设置太麻烦？可以用Chrome支持的存储配额API，主动向用户申请更大的空间，流程更顺畅：

// 计算需要的存储空间（400MB转字节）
const requiredSpace = 400 * 1024 * 1024;

// 先估算当前可用配额
navigator.storage.estimate().then(estimate => {
  if (estimate.quota < requiredSpace) {
    // 请求用户授权更大配额
    navigator.storage.requestQuota(requiredSpace).then(granted => {
      console.log(`成功获取 ${granted / (1024*1024)}MB 存储配额`);
      // 触发AppCache更新，应用新配额
      window.applicationCache.update();
    }).catch(err => {
      console.error("请求存储配额失败：", err);
    });
  }
});

这段代码会弹出系统级的授权提示，用户同意后，站点的存储配额就会提升到你请求的数值（前提是磁盘有足够剩余空间）。

3. 拆分缓存清单，按需缓存大文件 #

一次性缓存400MB内容容易触发配额预警，你可以把缓存清单（Manifest）拆分，分阶段加载：

• 主清单只缓存核心资源：HTML、CSS、基础JS等小文件，快速完成初始缓存
• 为视频文件单独创建1~N个子清单，当用户点击某个视频时，再动态加载对应的子清单并触发缓存
• 这样既避免了一次性占用大量配额，也能让用户按需缓存内容，提升体验

重要提醒 #

• AppCache已被标记为废弃API：Chrome目前仍支持，但后续版本可能会逐步移除。长远来看，建议迁移到Service Worker + Cache Storage API，这套组合的存储配额更灵活，功能也更强大，是现代Web离线存储的标准方案
• 存储配额受磁盘剩余空间限制：即使用户授权了大配额，如果磁盘剩余空间不足，Chrome也会自动调整实际可用的最大值
• 大文件缓存要支持断点续传：确保你的服务器支持Range请求，这样AppCache在更新大文件时可以断点续传，避免因网络问题导致缓存失败

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