Html – Can’t get HTML5 AppCache working correctly

htmlhtml5-appcache

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

Best Answer

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

Related Topic