Comments on: How to create offline webapps on the iPhone

By: Jmv

Jmv — Sun, 15 Jan 2012 12:36:05 +0000

@Ryan Seddon
(previous post continued)

Hi Mr Ninja

Thank you very much for having looked to my problem.
So for you everything was ok and for me there was an error.
I have tried again my own webbapp after not trying for one week and..
It worked! No error, everything fine! Even as a stand-alone webbapp (with a launch screen and not opening in Safari). Why is it so unpredictable?

I have found an excellent site that give some explaination of what might be happening here. In short: it has to do with the fact that files send by the web server to safari have themselves some ”lifetime” and are not resend systematically, even if they have changed. Another ”cache” is involved here, the native browser cache, that is different from the ”appCache” we are trying to put in place. So although we change our file on the server side, it may not be changed on the iPad-Safari side, at least for some time, depending on how the lifetime is parametered on the server side! The site gives some advice on how to put some more commands on the .htaccess file to makes sure files are resent each time they are requested on the client side. I haved tried these commands, and also forced the safari cache to empty, but since everything was fine it has not changed anything.

This excellent site is: http://diveintohtml5.info/offline.html , see the chapter named: THE FINE ART OF DEBUGGING, A.K.A. “KILL ME! KILL ME NOW!”

The file refresh problem I just described might well be the cause of the problems many other users have experienced, driving them nuts! So I hope this post will help them.

So now i should be happy with my webapp… but not quite. I have implemented some sound effects in an .mp3 file: they work fine online but not offline. Do you have any idea of what might be going on? Maybe caching mp3 is not allowed on ios 4.3? I have found no clear answer on the web.

Any help on the subject would be highly appreciated

Thanks
JMV

By: Doug

Doug — Mon, 09 Jan 2012 20:57:01 +0000

Thanks for the post. Very helpful. When I read about the Mime type I thought “That’s why it’s not working!” but alas things are still quirky.
Using an iPad2:
1. I visite your demo page online
2. I then go offline and visit the demo page again by entering http://www.thecss... in the navigation bar. I select the demo page from the drop down and the demo webapp comes up fine.
3. Hit refresh; Safari come up with message. Cannot Open Page: Safari cannot open the page because it is not connected to the internet.
4. If I enter the whole address in the bar and click ‘Go’ I get the same error message.
5. If I make a bookmark and click it offline I will get your webpage without the error message.

My application on the otherhand will only continue to work after being disconnected if I do not navigate away from the page. I can’t bring the page back up with out getting the error message when I have disconnected from the network.

Is there a setting that will instruct safari to look for a cached website before it tries to connect to the internet? That seems to be the issue.

Thanks, Doug

By: Ryan Seddon

Ryan Seddon — Wed, 04 Jan 2012 23:58:48 +0000

@Brett - Thank you! I've updated the demo and demo files to add "index.html" to the manifest file so now that link back to "index.html" will work offline correctly.

By: Ryan Seddon

Ryan Seddon — Wed, 04 Jan 2012 23:57:14 +0000

@Jmv –

I just tested your web app in firefox, chrome and iOS5 safari, they all work offline and the caching works correctly. I can’t see any problems with your code of manifest file (although your manifest file should now have the extension .appcache over .manifest, but that shouldn’t effect anything).

By: Jmv

Jmv — Wed, 04 Jan 2012 22:33:43 +0000

Hi Mr Ninja, it's me again. I have done some more tests I'd like to share with you. I have put your code in a new domain name, and everything worked very fine online, offline, all the console message were OK. Then I have added a single line in the 2 html files:

 content="yes" name="apple-mobile-web-app-capable">

This is to make the app open like a stand-alone app, not in SAFARI. And then everything went wrong: always an error fired after downloading of the cache. So I suppressed the line, changed the cache revision so it updates the files, but it never worked back again... My safari seems to be stuck in a ''problem state'' from where it won't go out. Don't know what to do... Any advice? Best regards.

By: Brett

Brett — Wed, 04 Jan 2012 00:42:48 +0000

This totally kicked ass! Thanks for the great article.

I just wanted to share that the article.html page links back to

http://www.thecssninja.com/demo/offline_webapp/index.html

instead of just http://www.thecssninja.com/demo/offline_webapp/

which causes a “Cannot Open Page” error; no doubt because it thinks that “index.html” is different to “/”. Changing the url back to

http://www.thecssninja.com/demo/offline_webapp/

fixes the problem. you might want to correct this in the link itself :)

thanks again!

By: Jmv

Jmv — Fri, 30 Dec 2011 22:31:44 +0000

Hi Mr Ninja (previous post continued) I have done a lot of tests with your files on my website (jmv38.comze.com). Thanks to your console-data-logger I have found the following strange facts, please comment if this sounds correct to you: - your code makes an offline app from the file ''index.html'', but on the ipad/safari I can access to the offline page only by calling ''jmv38.comze.com'', and not ''jmv38.comze.com/index.html'' that returns an ''no connection'' error. - then the call back to ''index.html'' from ''article.html'' never works offline. Putting href=''jmv38.comze.com'' doesnt work either because it seems to call ''jmv38.comze.com/index.html''... So I thought I was now ready to make of my own page (a game timer) a webapp. I have done everything as in your code (and copied your console-data-logger with minor modifications), and... ':-(( it doesn't work! The cache apparently downloads the files, but at the end of the process an error is fired. If I put 1 or 2 html files only in the cache the errors fires much faster. I have used the sniffer to verify that my manifest has the correct mime-type: ok. So I have no idea of what is happening... Could you give a look to the problem? Your help would be very very very much appreciated! Thanks in advance! Jmv

By: Jmv

Jmv — Thu, 29 Dec 2011 16:09:06 +0000

Hi Mr Ninja
Thanks a lot for all your great work and help!
I ve installed a launch screen to your demo app on my iPad (ios4.2.1)
I have the very same problem as many people above: works fine online/offline but if I 1/ go offline 2/suppress the screen in safari , then I get the message ” cannot acess bla bla bla… ” when i restart the webapp, which makes it not very usefull…
Unless I missed a line, I think you answer has always been up to now: ” i don’t have this problem with my IOS version”. Is it still the case or have you experienced the problem and found a solution? what ios version do you use?
Thank in advance for you enlightments.

By: Gerry Straathof

Gerry Straathof — Thu, 22 Dec 2011 01:16:33 +0000

The message that comes up when you visit a cached site is to increase the cache storage of your device, not the individual site. I’ve had.mine go up to 50M when doing beta testing. if you installed the Kindle reader you will also get a confirmation.

The individual site allowance is above 5M on ios5, but i am not sure how much more. the highest mine has gone is 9.75M for a website magazine that was part of a class project.

I use a php file which builds a manifest file for a site using everything in the folder. it has made it much easier to control changing documents.

I think the kindle reader and new York times(?) use sql to hold their downloaded data, but have notdirected their codes behaviour with chrome or safari audits…

By: Ryan Seddon

Ryan Seddon — Thu, 22 Dec 2011 00:38:52 +0000

@Jorge –

Your hosted demo is missing a reference to the vomzom.svg file, if any file is missing that’s declared in the manifest it will fail.

All the files loaded by the initial index must be in the manifest?

No, just the files you wish to cache so they’re available offline.

If I have a video added to the manifest it fails or it just doesn’t cache it?

I believe iOS5 may allow videos and audio to be cached offline, before that it didn’t work.

Are you all sure about the 5mb limit?. I have been trying and think that I have seen a dialog asking me to let the app grow the mb limit.

I’m not a 100% sure this is what other people have found to be the case, there may very well be a prompt to increase storage size.

Is there any issue related to the app being in fullscreen mode?

Fullscreen mode should be fine, if it’s a UIWebView inside an app offline caching is not available.