Question

我正在开发一个HTML5网络应用程序，以便在iPad2上使用移动版Safari和“添加到主屏幕”功能进行离线使用。我可以使用桌面Chrome中的cache.manifest文件实现离线缓存，但无法在iOS移动版Safari中使用。

该应用程序在线时可在iPad上顺畅运行，但一旦我离线，我会收到以下错误消息：“MyApp无法打开，因为它未连接到互联网”（在“已添加”中）到主屏幕“在iPad上查看”和“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中，由于我的网络应用程序使用ttf，woff，ico，png，jpg，js，mp3和css文件，我已经验证了xampp \ apache \ conf \下的mime.types文件，以确保它包含：的类型为：

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

我已将.htaccess文件放在网络应用根公共HTML目录中，以获取.manifest
的正确MIME类型
```
AddType text/cache-manifest .manifest*
```

我已将manifest属性包含在索引页的HTML元素中：

<!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 apps根公共HTML目录中。我已经包含了其他解决方案的建议，其中许多解决方案来自其他stackoverflow问题，包括：
- 主要是我坚持使用cache.manifest名称，因为多个来源已经建议Safari移动设备将其他所有内容
- 不包括引用.manifest
- 列出CACHE部分下的所有资源
- 包括网络后的*：
- 包括所有部分标题，即使未使用
- 仅使用相对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:

我真的很感激在这个问题上有一些新的眼光，我只是看不出问题出在哪里。

Answer 1

您可以尝试减小缓存文件的大小吗？在我的情况下它有帮助，但没有解决所有的问题）缓存文件大小至少30 Mb，减肥后，他们变成<1 Mb，AppCache终于开始工作。

HTML5网络应用程序不在iOS Safari中缓存以供离线使用

1 个答案: