iOS Safari中HTML5 Web应用程序不能缓存以供离线使用

5
我正在为iPad2开发一个HTML5离线Web应用程序,使用移动Safari和“添加到主屏幕”功能。我能够在桌面Chrome中使用cache.manifest文件实现离线缓存,但无法在iOS移动Safari中实现。
当我在线时,该应用程序在iPad上运行顺畅,但一旦离线,我会收到这些错误消息:“因未连接到互联网而无法打开MyApp”(在iPad的“添加到主屏幕”视图中)和“Safari无法打开页面,因为未连接到互联网”(在同一iPad上的safari-view中)。
我已经阅读了数百个故障排除/问题页面和manifest教程,试图解决此问题,但没有建议起作用。在阅读了这么多关于此功能的内容之后,它应该很容易实现,但是我还是无法做到。
以下是我迄今为止所做/尝试/使用的总结,但都没有成功。我已经尝试了所有以下操作,使用cache.manifest和manifest.appcache变体,但都没有成功,为了简单起见,我只记录cache.manifest案例:
  1. I am developing and testing using latest Xampp Apache for Windows server locally installed on Win10 x64

  2. The target device is an iPad2 running iOS version 8.4 and mobile safari version 8. My full user agent string is:

    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
    
  3. In Xampp I have updated the httpd.conf file to include the correct MIME types for .manifest

    AddType text/cache-manifest .manifest
    
  4. In Xampp I have updated the mime.types file under xampp\apache\conf\ to include the correct MIME types for .manifest

    text/cache-manifest             manifest
    
  5. In Xampp, as my web app uses ttf, woff, ico, png, jpg, js, mp3 and css files, I have verified the mime.types file under xampp\apache\conf\ to ensure it includes the MIME types for:

    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
    
  6. I have placed a .htaccess file in the web apps root public HTML directory for the correct MIME types for .manifest

    AddType text/cache-manifest .manifest*
    
  7. I have included the manifest attribute in the HTML element of the index page:

    <!DOCTYPE html>
    <html lang="en" manifest="cache.manifest">
    <head>
    
  8. I've tried removing this line from the declaring index.html but it did not work:

    <meta name="apple-mobile-web-app-capable" content="yes">
    
  9. I've allowed plenty of time for the app to cache in Safari before switching to Airplane mode and refreshing. I am using a Windows machine so cannot use Web Inspector to debug. I used Jonathan Stark's Debugging Script and JSConsole to try and debug but it doesn't really give much useful information except that it is uncached which I know because it isn't working.

  10. I have created a cache.manifest file and placed it in the web apps root public HTML directory. I have included the advice of other solutions, many of which where derived from other stackoverflow questions, including:

    • Primarily I've stuck with the cache.manifest name as multiple sources have advised Safari mobile will igrnore everything else
    • Not including the index.html file which references the .manifest
    • Listing all resources under the CACHE section
    • Including the * after NETWORK:
    • Including all section headers even if not used
    • Used only relative URI's
    • The manifest file contents are relative to the manifest file (it is in the web apps root directory with index.html)
    • The manifest file is being served from the same origin as the host
    • Ensured all files are available to avoid errors and dropping the .manifest. As I mentioned offline caching is working in desktop Chrome which validates the manifest's contents
    • The manifest file does not list the manifest file
清单文件的内容如下:
    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
@fnagel 目前没有新闻,我走了另一条路,但并不完全符合我的需求,所以我计划很快再次开始工作。这次我将从一个基本应用程序开始,最小化或不包含任何资源,然后逐步构建。这应该会简化问题。 - DarkSpectrum
你尝试使用过<meta name="apple-mobile-web-app-title" content="My name">吗? - Rémi Levassor
1个回答

0
你能试着减小缓存文件的大小吗?在我的情况下,这有所帮助,但并没有解决所有问题。缓存文件的大小至少为30 Mb,在经过压缩后它们变成了小于1 Mb,AppCache最终开始工作了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接