I am developing a HTML5 web app for use offline on an iPad2 using mobile Safari and the "Add to home screen" feature. I am able to achieve offline caching using a cache.manifest file in desktop Chrome but cannot make it work in iOS mobile Safari.
The app runs smooth on the iPad while online, but once I go offline I get these error messages: "MyApp could not be opened because it is not connected to the internet" (in "added to home screen" view on an iPad) and "Safari cannot open the page because it is not connected to the internet" (in safari-view on that same iPad).
I have read hundreds of troubleshooting / question pages and manifest tutorials on the Net trying to resolve this issue and none of the suggestions work. After reading so much about this capability it should be very easy to implement and yet here I am.
Here is a summary of what I have done / tried / used so far without success. I have tried all of the below using both cache.manifest and manifest.appcache variations without success but for simplicity I will only document the cache.manifest case:
I am developing and testing using latest Xampp Apache for Windows server locally installed on Win10 x64
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.4In Xampp I have updated the httpd.conf file to include the correct MIME types for .manifest
AddType text/cache-manifest .manifestIn Xampp I have updated the mime.types file under xampp\apache\conf\ to include the correct MIME types for .manifest
text/cache-manifest manifestIn 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 m3aI 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*I have included the manifest attribute in the HTML element of the index page:
<!DOCTYPE html> <html lang="en" manifest="cache.manifest"> <head>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">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.
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
The content of the manifest is:
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:
I would really appreciate some fresh eyes on this issue, I just can't see where the problem could be.
Can you try to decrease the size of cached files? In my case it helps, but not solved all the problems) Cached files size was at least 30 Mb, after weight loss they become <1 Mb and AppCache finally start working.