17370845950

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.a

  

  ddEventListener('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 最后还能用，但前提是：你清楚它只是临时兜底，且所有缓存逻辑必须降级到「无缓存」也能正常工作——这点最容易被忽略。