3

How to create an offline enabled web-application such that when user visits hxxp://mywebsite/ and is offline than hxxp://mywebsite/offline/ is displayed. [There are about 100 different dynamic pages in my website, so I cannot afford to hardcode all of them in the cache manifest file]

robertc
  • 74,533
  • 18
  • 193
  • 177
ashishb
  • 534
  • 7
  • 17

4 Answers4

7

I reference "manifest.php" instead of "cache.manifest", then my php file looks like this:

<?php
    header('Content-Type: text/cache-manifest');
    echo "CACHE MANIFEST\n";

    $hashes = "";

    $dir = new RecursiveDirectoryIterator(".");
    foreach(new RecursiveIteratorIterator($dir) as $file) {
        $info = pathinfo($file);
        if ($file->IsFile() &&
            $file != "./manifest.php" &&
            substr($file->getFilename(), 0, 1) != ".")
        {
            echo $file . "\n";
            $hashes .= md5_file($file);
        }
    }

    echo "# Hash: " . md5($hashes) . "\n";

?>

The file hashes keep it up-to-date so that if any files change the manifest changes as well. Hope that helps :)

ggutenberg
  • 6,880
  • 8
  • 39
  • 48
  • but how do I generate FALLBACK entries? – ashishb Sep 20 '10 at 09:55
  • You would just have to build some logic into that script to list FALLBACK files (based on path, filename, etc.) separately. Loop once, exclude FALLBACK files. Loop again, only include FALLBACK files. – ggutenberg Sep 20 '10 at 11:06
5
CACHE MANIFEST
CACHE:
/Offline/OfflineIndex.html

FALLBACK:
/ /Offline/OfflineIndex.html

NETWORK:
*

This will cause all your pages across the entire site to redirect to offline when offline. The only issue is with the page that declares the manifest as that page is always cached. This means you cannot declare the manifest on every page because every visited page will then be cached itself and not redirect. So what you can do is declare your manifest on another html file (IE. Synchronize.html) then from default check whether or not your app has been made available for offline by storing a cookie or localcache value. If not redirect to synchronize.html with the manifest declared, set the localcache value, and redirect back to index.

OFFLINE AWESOMENESSSSSSSSSSS!!!!

John La Rooy
  • 295,403
  • 53
  • 369
  • 502
Fanie Oosthuysen
  • 66
  • 1
  • 1
  • Does not exactly ans what I am looking for but is still a good answer for others to read to gain more insight into offline HTML5. – ashishb Nov 29 '10 at 20:21
  • The caching of the manifest is what threw me through a loop. This helped a lot in clarifying though. thanks – drogon May 17 '12 at 19:59
1

It's not possible to use wildcards in the cache manifest, at least it doesn't work in any current browser as far as I'm aware. An alternative approach might be to generate your cache manifest dynamically, and let a script generate all those fallback entries.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • yeah, it seems that probably I have to generate [growing] FALLBACK dynamically. Thanks for confirming my fear. – ashishb Sep 20 '10 at 09:56
  • @ashishb I've just discovered that the current Firefox 4.0 nightly does support wildcards in the fallback section. Still doesn't work in Chrome or Opera dev versions though. – robertc Oct 02 '10 at 17:02
0

Reference your manifest file in an invisible iframe in your index page. That way your index page isn't cached as it is normally by default and you have total control over your fallbacks...

No need for unreliable cookies or localStorage!

Cyril Mestrom
  • 6,042
  • 4
  • 19
  • 27