HTML5 manifest 文件不必放在根目录,但路径须与 manifest 属性值严格匹配,且服务器需返回 text/cache-manifest MIME 类型;iOS Safari 对路径、协议、iframe 上下文敏感,已废弃并逐步禁用,推荐迁移到 Service Worker。

HTML5 manifest 文件必须放在 Web 服务器根目录吗?
不是必须,但路径必须与 manifest 属性值严格匹配,且服务器需正确返回 text/cache-manifest MIME 类型。iOS Safari(尤其 iOS 11+)对 manifest 路径敏感:如果页面 URL 是 https://example.com/app/index.html,而 ,那么浏览器会尝试请求 https://example.com/app/cache.appcache —— 不是根目录,而是同级目录。
常见错误现象:Application Cache Error event: Manifest fetch failed (404) 或静默失败(无提示但资源不缓存)。
- 确保 Web 服务器为
.appcache后缀配置了正确的 MIME 类型(Apache 加AddType text/cache-manifest .appcache;Nginx 加types { text/cache-manifest appcache; }) - manifest 文件本身不能有 BOM,编码必须为 UTF-8 无 BOM
- iOS Safari 不支持 HTTPS 页面加载 HTTP manifest(混合内容拦截),全站必须统一协议
iOS Safari 对 Application Cache 的兼容性限制有哪些?
iOS 从 Safari 9(iOS 9)起已标记 Application Cache 为废弃(deprecated),iOS 11.3+ 在某些场景下完全禁用(如 PWA 模式、非主域 iframe 中)。它**不等于 Service Worker**,也没有后台同步或推送能力。
关键事实:
立即学习“前端免费学习笔记(深入)”;
- 仅支持在主窗口、顶级导航中触发缓存(
iframe内的页面即使有 manifest 也不会缓存) - 首次访问必须联网下载 manifest 和资源;后续离线时仅按 manifest 列表提供已缓存文件,**不会自动更新未声明的资源**
- manifest 文件只要内容哈希变化(哪怕注释改一行),整个缓存就会重新下载——iOS 上这个过程不可中断、无进度反馈,用户可能误以为“卡死”
- 无法通过 JS 主动清除某项缓存,只能调用
applicationCache.swapCache()切换新旧版本,且必须监听updateready事件后才安全
如何检测 iOS 是否成功启用 HTML5 离线缓存?
不能只看网络断开后页面是否打开,因为 iOS 可能用的是 HTTP 缓存(Cache-Control)而非 AppCache。真验证得查运行时状态。
实操方法:
- 在 Safari 开发者工具(连接 macOS Safari → Develop → [device] → [page])中,打开 Console,输入
window.applicationCache.status,返回值含义:0=UNCACHED、1=IDLE、2=CHECKING、3=DOWNLOADING、4=UPDATEREADY、5=OBSOLETE - 监听关键事件:
applicationCache.addEventListener('cached', () => console.log('first cache done'))、'updateready'、'error'(注意:iOS 上error事件常不触发,需结合 status 轮询) - 检查 Network 面板:离线刷新后,所有资源应显示
from disk cache或from ServiceWorker(后者说明你实际走的是 SW,不是 AppCache)
替代方案:为什么现在不该在 iOS 上依赖 HTML5 AppCache?
因为 Apple 已停止维护,且行为越来越不可靠:iOS 15.4+ 在部分设备上 manifest 解析会随机失败;PWA 添加到主屏后,AppCache 完全失效;HTTP/2 推送与 AppCache 冲突导致资源重复加载。
可行替代路径:
- 用
Service Worker+Cache API(iOS 11.3+ 支持,但需 HTTPS、注册在根路径、避免跨域 script) - 对纯静态资源(如文档、图片集),改用
localStorage存 base64 或indexedDB存二进制(配合fetch拦截) - 原生层介入:iOS App 用
WKWebView配合setURLSchemeHandler拦截请求,自定义本地资源返回逻辑(适合混合 App)
manifest 最后还能用,但前提是:你清楚它只是临时兜底,且所有缓存逻辑必须降级到「无缓存」也能正常工作——这点最容易被忽略。










