3

I am working on an HTML app for a client. The entire app front end is done with 1 HTML file, 1 Javascript file, 1 CSS file (plus jquery) and a few images. There are a few php scripts sitting on the server, which are called using AJAX, but only if an internet connection is available. If no connection is available, then the site will use locally cached data (using localStorage).

To make the site available offline, I'm declaring the cache manifest in my HTML. My HTML looks like this:

<!DOCTYPE html>
<html manifest="cache.manifest.php" language="en">
...
</html>

The cache.manifest.php's output look like this:

CACHE MANIFEST
#VersionHash: 80b9345e6c39efbbe8431e394b014b4f

CACHE:
/css/ebot.css
/favicon.ico
/images/appicon.png
/images/list-arrow.png
/images/list-checkmark.png
/images/woman.png
/index.html
/js/jquery-1.8.3.min.js
/js/ebot.ls.js

NETWORK:
/emaillog.php
/getdata.php
/uploadlog.php

So far so good. Now, I access the site from a browser with the internet connection available. I get a little notification asking whether to allow the site to store information for offline use - I allow it. When I check in settings, I see that the site stores 316K of data - about right.

Now I turn off internet connection and attempt to access http://www.mysite.com/index.html - and get an error message saying "Internet connection not available" (or something to that extent) and the page is not displayed. This is happening in 3 browsers I tested on my dev machine (firefox, safari and chrome) as well as on the client's ipad (the app is eventually for consumption on an ipad).

What am I missing here? What am I doing wrong?

Aleks G
  • 56,435
  • 29
  • 168
  • 265
  • Not an answer, but have you come across this article? http://www.alistapart.com/articles/application-cache-is-a-douchebag/ It talks about a lot of the gotchas involved with using appcache. – net.uk.sweet Dec 19 '12 at 00:02

1 Answers1

1

There could be many reasons for this. Take a look at this articles:

I guess that you didn't specify proper content type (MIME) for your manifest. It shoud be 'text/cache-manifest'. Check events in console in Chrome. You should see something like this when appcache manifest is correct:

Creating Application Cache with manifest http://example.com/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (YYY of XXX)
Application Cache Cached event

I would suggest to start from the simplest manifest to make sure that manifest is parsed. Try: 

CACHE MANIFEST
NETWORK:
*

such manifest should cache only your start html page.

Shrike
  • 9,218
  • 7
  • 68
  • 105
  • Manifest is created by a php program, which explicitly sets the correct content-type. I checked in both Chrome and Firefox (with Firebug). Therefore it's definitely something else. – Aleks G Jan 24 '13 at 17:39
  • How did you check? Chrome doesn't show fetching appcahce manifest in the Network tab of its devtools. Did you point the browser on cache.manifest.php directly? Also make sure that http caching doesn't take place (add appropriate headers while returning the manifest in your server) – Shrike Jan 25 '13 at 09:50
  • First of all, I did check by loading cache.manifest.php directly. Second, I do get a pop-up bar saying that the site wants to store data for offline use, to which I answer 'yes'. This means that the browser does understand the cache. – Aleks G Jan 25 '13 at 10:35
  • Can you see your cache on Resources tab in Chrome's devtools? There's a "Application Cache" section there. – Shrike Jan 25 '13 at 10:58