HTML怎么标注离线内容存储上限_HTML“最多缓存100页”提示【详解】-html教程-PHP中文网

html离线缓存“最多缓存100页”是chrome 40–60对已废弃的applicationcache的实现限制，并非html标准；现代浏览器已全面弃用appcache，应改用service worker。

html怎么标注离线内容存储上限_html“最多缓存100页”提示【详解】

HTML离线缓存上限由manifest文件决定，但现代浏览器已弃用

“最多缓存100页”这类提示不是HTML标准行为，而是旧版Chrome等浏览器对applicationCache（AppCache）的硬性限制——它根本不是HTML本身规定的，而是特定浏览器实现时加的闸门。AppCache早在2020年前后就被Chrome、Firefox、Edge全面废弃，manifest文件不再被解析，相关提示也不会再出现。

如果你现在还能看到这个提示，只有一种可能：你正在调试一个没更新的老旧PWA项目，或误用了已被禁用的API。

为什么`applicationCache`会报“最多缓存100页”

这是Chrome 40–60左右版本中对applicationCache存储空间的保守策略：单个origin下所有缓存资源总数量不超过100个条目（不是100页，是100个manifest列出的URL），且总大小通常限制在5MB以内。超出后浏览器会静默失败，不触发error事件，只在控制台打印类似Application Cache Error event: Resource fetch failed (404)或直接显示“最多缓存100页”。

manifest里每行一个资源（含CACHE:、NETWORK:、FALLBACK:下的条目）都算作1个计数单位
重定向响应（302/307）会被计入，但最终目标URL不额外计数
同一资源多次出现在manifest中，仍只算1次
该限制无法通过meta标签、HTTP头或JS绕过

现在该用`Service Worker`替代，但缓存逻辑完全不同

AppCache是声明式、全局、黑盒式的；Service Worker是命令式、可编程、完全可控的。没有“最多100页”这种固定上限——实际限制取决于设备剩余磁盘空间和浏览器策略（如Chrome对cacheStorage默认软上限约占用可用空间的50%，但无固定条目数限制）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

迁移时最常踩的坑：

没调用event.waitUntil()导致缓存未真正写入
把fetch事件监听写在install事件里，结果永远不生效
用cache.put()传入未clone()的Response对象，后续fetch失败（因body流已被读取）
忘记在activate阶段清理旧cache，导致磁盘持续膨胀

简单示例：安全缓存一个HTML页面

self.addEventListener('fetch', event => {
  if (event.request.destination === 'document') {
    event.respondWith(
      caches.open('v1').then(cache =>
        fetch(event.request).then(res => {
          cache.put(event.request, res.clone()); // 必须clone！
          return res;
        })
      )
    );
  }
});

检查当前是否还在用AppCache，以及如何确认缓存真实容量

打开DevTools → Application → Clear storage → 看“Application Cache”区域是否非空；若为空且window.applicationCache为undefined，说明已失效。真要查当前cacheStorage用了多少，只能靠估算：

Chrome：访问chrome://appcache-internals/（仅旧版有效）→ 已不可用
现代方案：用caches.keys() + cache.keys()逐个统计URL长度，但无法获取原始字节大小
更实际的做法：在fetch中用response.headers.get('content-length')记录，或依赖Cache API的storage.estimate()（返回{usage, quota}，但支持度有限）