【发布时间】：2017-05-23 06:23:46
【问题描述】：
我正在使用移动 Safari 和“添加到主屏幕”功能开发一个 HTML5 网络应用程序，以便在 iPad2 上离线使用。我可以在桌面 Chrome 中使用 cache.manifest 文件实现离线缓存，但无法在 iOS 移动 Safari 中使用。
该应用程序在线时在 iPad 上运行流畅，但一旦我离线我收到以下错误消息：“MyApp 无法打开，因为它没有连接到互联网”（在“添加到主屏幕”视图）和“Safari 无法打开该页面，因为它没有连接到互联网”（在同一台 iPad 上的 safari 视图中）。
我已阅读网上数百个故障排除/问题页面和清单教程，试图解决此问题，但没有任何建议有效。在阅读了这么多有关此功能的信息后，它应该很容易实现，但我在这里。
这是我迄今为止所做/尝试/使用但没有成功的总结。我已经使用 cache.manifest 和 manifest.appcache 变体尝试了以下所有方法，但均未成功，但为简单起见，我将仅记录 cache.manifest 案例：
我正在使用本地安装在 Win10 x64 上的最新 Xampp Apache for Windows 服务器进行开发和测试
-
目标设备是运行 iOS 8.4 和移动 safari 8 的 iPad2。我的完整用户代理字符串是：
Mozilla/5.0 (iPad; CPU OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H143 Safari/600.1.4 -
在 Xampp 中，我更新了 httpd.conf 文件以包含 .manifest 的正确 MIME 类型
AddType text/cache-manifest .manifest -
在 Xampp 中，我更新了 xampp\apache\conf\ 下的 mime.types 文件以包含 .manifest 的正确 MIME 类型
text/cache-manifest manifest -
在 Xampp 中，由于我的 Web 应用程序使用 ttf、woff、ico、png、jpg、js、mp3 和 css 文件，我已验证 xampp\apache\conf\ 下的 mime.types 文件以确保它包含 MIME 类型为：
application/x-font-ttf ttf ttc application/x-font-woff woff image/x-icon ico image/png png image/jpeg jpeg jpg jpe application/javascript js audio/mpeg mpga mp2 mp2a mp3 m2a m3a -
我已在网络应用根公共 HTML 目录中放置了一个 .htaccess 文件，用于 .manifest 的正确 MIME 类型
AddType text/cache-manifest .manifest* -
我已经在索引页的 HTML 元素中包含了 manifest 属性：
<!DOCTYPE html> <html lang="en" manifest="cache.manifest"> <head> -
我尝试从声明 index.html 中删除这一行，但没有成功：
<meta name="apple-mobile-web-app-capable" content="yes"> 在切换到飞行模式并刷新之前，我已经为应用程序在 Safari 中缓存留出了足够的时间。我使用的是 Windows 机器，因此无法使用 Web Inspector 进行调试。我使用Jonathan Stark's Debugging Script 和JSConsole 尝试调试，但它并没有提供太多有用的信息，只是它未缓存，我知道这是因为它不起作用。
-
我创建了一个 cache.manifest 文件并将其放置在 Web 应用程序根公共 HTML 目录中。我已经包含了其他解决方案的建议，其中许多来自其他 stackoverflow 问题，包括：
- 主要是我坚持使用 cache.manifest 名称，因为多个消息来源建议 Safari 移动版将忽略其他所有内容
- 不包括引用 .manifest 的 index.html 文件
- 列出 CACHE 部分下的所有资源
- 在 NETWORK 之后包括 *：
- 包括所有节标题，即使没有使用
- 仅使用相对 URI
- 清单文件内容是相对于清单文件的（它位于带有 index.html 的 Web 应用根目录中）
- 清单文件与主机的来源相同
- 确保所有文件都可用以避免错误和删除 .manifest。正如我提到的，离线缓存在桌面 Chrome 中工作，它可以验证清单的内容
- 清单文件未列出清单文件
清单的内容是：
CACHE MANIFEST
# ver 0.0.8
CACHE:
data/apple-touch-icon.png
data/favicon.ico
data/fnt0.ttf
data/fnt0.woff
data/fnt1.ttf
data/fnt1.woff
data/fnt2.ttf
data/fnt2.woff
data/fnt3.ttf
data/fnt3.woff
data/html5.png
data/html5-unsupported.html
data/img0.jpg
data/img1.png
data/img10.jpg
data/img11.jpg
data/img12.png
data/img13.png
data/img14.png
data/img15.png
data/img16.jpg
data/img17.png
data/img18.png
data/img19.png
data/img2.png
data/img20.png
data/img21.png
data/img22.png
data/img23.png
data/img24.png
data/img25.png
data/img26.png
data/img27.png
data/img28.png
data/img29.png
data/img3.png
data/img30.png
data/img31.png
data/img4.png
data/img5.png
data/img6.png
data/img7.png
data/img8.png
data/img9.png
data/player.js
data/slide1.css
data/slide1.js
data/slide10.css
data/slide10.js
data/slide11.css
data/slide11.js
data/slide12.css
data/slide12.js
data/slide13.css
data/slide13.js
data/slide14.css
data/slide14.js
data/slide15.css
data/slide15.js
data/slide16.css
data/slide16.js
data/slide17.css
data/slide17.js
data/slide18.css
data/slide18.js
data/slide2.css
data/slide2.js
data/slide3.css
data/slide3.js
data/slide4.css
data/slide4.js
data/slide5.css
data/slide5.js
data/slide6.css
data/slide6.js
data/slide7.css
data/slide7.js
data/slide8.css
data/slide8.js
data/slide9.css
data/slide9.js
data/sound1.mp3
NETWORK:
*
FALLBACK:
我真的很感激能以新的眼光看待这个问题，我只是看不出问题出在哪里。
【问题讨论】：
-
有关于这个话题的消息吗？我似乎遇到了同样的问题——除了 iPad Safari（iPad Chrome 可以）之外，它在任何地方都可以使用。
-
@fnagel 在这个阶段没有消息，我走了另一条不太适合我需要的道路，所以我计划很快再接再厉。这一次，我将从一个资产最少甚至没有资产的基线应用程序开始，然后进行构建。那应该可以简化问题
-
你尝试过使用
标签： ios web-applications mobile-safari html5-appcache offline-caching