I developed an HTML5 webapp, and so far my local server tests worked fine (running in the desktop browser, iOS Safari browser, and homescreen bookmark webapp). This also holds true for the offline use (with the cache.manifest file).
When I uploaded the files to my website, I tested to confirm it still works on the desktop (Chrome shows the Application Cache logs), also works in iOS Safari. Both online and offline.
The Problem
When I bookmark the page from my website as a homescreen icon and try to launch it from there, the webapp freezes on the startup image.
What could be causing this particular issue?
Checklist:
- HTML tag contains:
<html manifest="cache.manifest">
- HTML does contain:
<meta name="apple-mobile-web-app-capable" content="yes">
- HTML does contain:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- Not sure this would matter but:
<meta name="viewport" content="width=1024, minimal-ui, user-scalable=no">
- The
apple-touch-startup-image
andapple-touch-icon
link tags are appended dynamically to the<head>
tag via Javascript. - Only the necessary file-names in
cache.manifest
are included. - The webhost supports the
manifest
mimeType (no need to change.htaccess
). - The website does use an
.htaccess
password authentication setting.
NOTE: I will investigate whether or not my use of apple-touch-startup-image
& apple-touch-icon
dynamically appended with jQuery could be the issue here.