ios - HTML5 网络应用程序未在 iOS Safari 中缓存以供离线使用-6ren

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

转载作者：可可西里更新时间：2023-11-01 06:13:27

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

该应用在线时在 iPad 上运行流畅，但一旦我离线，我会收到以下错误消息:“MyApp 无法打开，因为它未连接到互联网”(在“已添加到主屏幕”在 iPad 上查看)和“Safari 无法打开页面，因为它未连接到互联网”(在同一台 iPad 上的 safari View 中)。

我在网上阅读了数百个故障排除/问题页面和 list 教程，试图解决这个问题，但没有一个建议有效。在阅读了很多关于此功能的信息后，它应该很容易实现，但我还是来了。

这是我迄今为止所做/尝试/使用但未成功的总结。我已经使用 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 文件以确保它包含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

我已将 .htaccess 文件放置在 Web 应用根公共(public) HTML 目录中，用于 .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 文件并将其放置在网络应用根公共(public) HTML 目录中。我已经包含了其他解决方案的建议，其中许多来自其他 stackoverflow 问题，包括:
- 主要是我坚持使用 cache.manifest 名称，因为多个来源建议 Safari 移动版将忽略其他所有内容
- 不包括引用 .manifest 的 index.html 文件
- 列出缓存部分下的所有资源
- 在 NETWORK 后面加上 *:
- 包括所有节标题，即使未使用也是如此
- 仅使用相对 URI
- manifest文件内容是相对于manifest文件的(在web应用根目录下index.html)
- list 文件由与主机相同的来源提供
- 确保所有文件都可用以避免错误和丢弃 .manifest。正如我提到的，离线缓存在桌面 Chrome 中运行，它验证 list 的内容
- list 文件不列出 list 文件

list 的内容是:

    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: