Can't get HTML5 AppCache working correctly

Question

I'm trying to add some offline caching to an app I maintain. This is the first time I've had to use AppCache so I've decided to test drive it with a small demo site first. I haven't been able to get the offline part of this to work correctly so far. Chrome appears to be caching index.php as the printed-out date/time never changes on the page, even though I'm sending all those no-cache headers within the script, although in Firefox the date is updating correctly. When I go offline (by disabling my network adapter) Chrome continues to display the cached index.php rather than offline.html as specified by the manifest, although I'm getting the following error in the console:

Application Cache Error event: Manifest fetch failed (-1) http://html5test.g1testserver/manifest.appcache

Firefox simply displays the 'Cannot Connect' dialog. The layout of the site and the file contents are all listed below.

Site layout:

/root/
-  manifest.appcache
-  index.php
-  offline.html
-  .htaccess

manifest.appcache:

CACHE MANIFEST
# version 3

CACHE:
offline.html

NETWORK:
index.php

FALLBACK:
/ offline.html

index.php:

<?php
    header("Expires: Tue, 03 Jul 2001 06:00:00 GMT");
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
echo '<!DOCTYPE html>
<html manifest="/manifest.appcache">
<head>
    <title>HTML5 Test</title>
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
</head>
<body>

<h1>This is index.php: '.date('d/m/Y H:i:s').'</h1>
</body>
</html>
';
?>

offline.html:

<!DOCTYPE html>
<html manifest="/manifest.appcache">
<head>
</head>
<body>
    <h1>This will be served in place of index.php</h1>
</body>
</html>

.htaccess:

AddType text/cache-manifest .appcache

I think fallback only gets called if the cache is unsuccessful html5rocks.com/en/tutorials/appcache/beginner - there is a very useful section on fallback here. What does Chrome's Resources/Application Cache have in it? — Jon Wells
@CrimsonChin: offline.html, index.php and manifest.appcache are listed in the resources — hellsgate
if you don't want index.php cached then remove manifest attribute from the <html> tag "The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself." the browser will still cache everything else in the manifest — Jon Wells
@CrimsonChin: That was the problem. Basically the whole site runs off index.php with query string parameters determining what gets displayed. I've now been more selective in what pages will contain the manifest attribute and it has come closer to what I need. You should add an answer along the lines of your comment so that I can accept it. — hellsgate

Jon Wells Jon Wells · Accepted Answer · 2012-09-19T10:48:02

You don't need to include the manifest inside the <html> tag. This is only neccessary when you want to cache that page. Not including the manifest in the doctype doesn't mean that the .appcache wont be called/updated.

So If you want offline.html to run as a fallback when index.php is offline then don't cache index.php.

HTML5Rocks have some great info about how to use the appcache here

Can't get HTML5 AppCache working correctly

1 Answers