HTML5 web app not caching in iOS Safari for offline use - ios

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.4
In Xampp I have updated the httpd.conf file to include the correct MIME types for .manifest
AddType text/cache-manifest .manifest
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
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
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*
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.

Related

Cross platform way to get icon of firefox exe

I'm trying to get the path to the default firefox executable cross platform.
I tried the way recommended here:
https://stackoverflow.com/a/24056586/1828637
However its not working on mac os or linux
on mac it shows this: http://i.imgur.com/xu5GrF8.png
on linux (tested on ubuntu 14) it shows this: http://i.imgur.com/QxWKxbH.png
I was hoping to get the .xpm on linux and the .icns on mac os and the .ico on windows which is the container file, meaning like not just .ico of the single 64x64 image but contain all files please.
Thanks
Your title and question ask two different things, which is a bit confusing. I am not clear on if you want just a way to find the Firefox executable, or a way to extract the currently used (or default?) icon from Firefox.
Icon files:
If you are just looking for a URL to use within Firefox, they should be located at:
chrome://branding/content/icon128.png
chrome://branding/content/icon64.png
chrome://branding/content/icon32.png
chrome://branding/content/icon16.png
They do not appear to exist in .ico files within the Firefox distribution. In fact there are only 4 .ico files in the entire distribution. They are all within the browser/omni.ja file at (windows assumed as primary based on your statements in prior questions):
chrome\browser\skin\classic\browser\customizableui\customizeFavicon.ico
chrome\browser\skin\classic\aero\browser\customizableui\customizeFavicon.ico
chrome\browser\skin\classic\browser\preferences\in-content\favicon.ico
chrome\browser\skin\classic\aero\browser\preferences\in-content\favicon.ico
omni.ja files are just zip format files with the extension changed to .ja instead of .zip. You can change the file extension back to .zip and read it with any appropriate archive handler.
The chrome:// URLs are:
chrome://skin/customizableui/customizeFavicon.ico
chrome://skin/preferences/favicon.ico
I think you can only get access to two of them at a time through chrome://skin/ depending on if you are using aero. If you really need access to both you could use nsiZipReader to open the actual omni.ja file.
Executable file:
You already had a batter way to get the executable file. From your comment it is:
FileUtils.getFile('XREExeF', []);

Caching All Images of a folder using html 5

I am creating an html 5 offline web application and i want to load all images from a specified folder in the server to the browser cache using html 5 cache manifest file before the first page loads.So that after the first page loads,if the internet connection goes,i can see the web application.I have searched google for an answer and it shows me to list all images in the server folder one by one in the manifest file.But that will not be possible because the website has an admin panel,using that we can upload more images.So i should have to make the cache mainifest file with some thing like this
host/images/*
But while googling,I can understand that that is not possible.
Please help me.
Finally i got an answer for my problem.I can understand that it is not possible to use html5 cachemanifest for phonegap applications.I just had a sample build in which all images are listed in the cache manifest file and nothing was cached as i expected.Then i understand that for using cache manifest,The page i am using the images,the images and the cache manifest file should be in the same domain.So that is not possible.Then i find that i can cache things in the DOM.

Unable to cache iPad when added to home screen

I have been working on a web app that should run offline and be accessible by clicking an icon on the home screen (iPad iOS 6.1.3). The problem is that I am not able to cache all the necessary files. Here's my cache.manifest file (paths are correct, no type'os):
CACHE MANIFEST
CACHE:
index.php
first.html
second.html
images/forward.png
images/backward.png
images/info.png
style/light.otf
style/main.css
scripts/main.js
NETWORK:
*
The HTML's included are the next pages. So, am I right: I have to include all the required .php, .html, .css, .png, etc. in the index.php which is my entry point. I read some articles about this and also created .htaccess file:
AddType text/cache-manifest .manifest
Implementation in HTML:
<html manifest="cache.manifest">
Error:
"...because it is not connected to the internet"
I have been stuck in this for a few days. Any help would be great!
Thanks in advance

Cache Manifest with ASP.NET MVC Downloads Correctly, But Site Still Unavailable Offline

I'm working on an ASP.NET MVC web page that I would like to have available offline. I created a Cache Manifest file and included it as follows:
<html lang="en" manifest="/cache.manifest" type="text/cache-manifest">
(I included the "type" attribute because of Paul Styles' answer found here.)
The page I'm trying to cache is managed by the OfflineController.cs controller. The cache.manifest file itself reads as:
CACHE MANIFEST
# rev 5
NETWORK:
*
CACHE:
/offline
(I used this syntax for the paths because of ZippyV's answer found here.)
When I change the revision number and reload the page, the console shows:
Document was loaded from Application Cache with manifest https://[...]
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 8) [...]
[...]
Application Cache UpdateReady event
This seems to mean that the manifest file was loaded correctly. Furthermore, when I Inspect the page and view Resources > Application Cache > cache.manifest, all 8 files are shown to have been downloaded.
However, when I unplug my Ethernet cable and navigate to ~/offline, the site does not load. Any ideas why? Thanks!
Was this error ever fixed? I realize that this was asked quite a while ago.
Update:
Hopefully this helps anyone else who come across this, this sound like a similar issue.

Where is the cached data with HTML5 manifest for iOS

In the post HTML5 offline webapps: a practical example we knew that there are 3 different storage of cached files.
My question is:
Where is the cached files with manifest in iOS app ?
I used iPhone Explorer to find such files by searching all directories, but can not find any.

Resources