HTML5离线缓存如何实现？原理及使用方法详解？

本文共计1014个文字，预计阅读时间需要5分钟。

HTML5的离线缓存（Application Cache）本质是一套浏览器强制执行的静态资源预加载机制，不是你添加个manifest属性就带动缓存的——它必须满足三个硬性条件：

• manifest 文件第一行必须是 CACHE MANIFEST，大小写敏感，不能有 BOM
• HTML 文件与 manifest 文件必须同源（协议+域名+端口完全一致）
• 被 CACHE: 列出的资源，哪怕只是 HTML 自身，也必须能被浏览器 GET 成功；否则缓存不会建立
• 浏览器只在 manifest 文件内容字节级变化时才触发更新，改注释、加空格都算；但改资源文件本身不触发更新

service worker 已取代 Application Cache，但老项目还在用，得知道怎么救

Chrome 94+、Firefox 84+ 已彻底移除 applicationCache API，Safari 从 iOS 16.4 起也标记为废弃。你现在看到的“离线能用”，大概率是 service worker 在兜底，或者用户设备还跑着旧版浏览器。如果维护老项目，别碰 window.applicationCache.update() —— 它在新浏览器里是 undefined，调用直接报错。