ios如何调用html5离线缓存_ios离线缓存html5配置法【技巧】_技术教程

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）