Dynamically generated HTML5 manifests

In the specification for HTML5 several methods for storing data locally are outlined including localStorage and manifests. While building out the offline storage for Animatic Builder, I attempted to keep the stored data dead simple; as in the case of the shot information which is stored as one long JSON string. In this way the shot data can be pulled into any other use by reading the string. Keeping the images stored proved more difficult due to the number, potentially hundreds, and their format as many separate files. As well as making sure the storage is universal on mobile and full client systems.

Originally I built a system encoding the images into base64 and storing them in the localStorage with the shot data. At the time I was unaware of this massive headache I was gleefully writing into the backend of the system. Although the stored image swapping in and out of base64 worked well on a local server, when moving onto a remote server, even with a fully featured client browser, the system became uselessly bogged down for obvious reasons. Base64 images are 30% larger than their originals, multiplied by a hundred, you get the idea.

Frustrated, I turned back to the manifest. The manifest in the spec is not outlined as a dynamic cache as it must be set before page load. To get around this, I have a script (simple PHP) build the manifest before the app moves into the data sync and cache page. The preload page scans the /uploads and /structure directories then builds the manifest from the scans.

cacheList = array();
// The directories we want to scan.
$paths = array('./', './', './');
// Foreach directory, scan.
foreach($paths as $path) {
$files = scandir($path);
foreach($files as $file) {
if (preg_match('/\.(jpg|png|jpeg|gif|css|js|php)$/i',$file)) {
$cacheList[] = $path . $file;
// Name the manifest.
$manifestFile = 'your.manifest';
$writeTo = fopen($manifestFile, 'w') or die("Error, could not create manifest.");
$contentsCache = "CACHE MANIFEST\nCACHE:\n";
foreach($cacheList as $toCache) {
$contentsCache .= $toCache . "\n";
// Write it all out.
fwrite($writeTo, $contentsCache);

By building manifest dynamically the developer doesn’t have to continually update what gets cached and the user gets the whole app cached. The extra step is add the handy JavaScript reporter so the user knows what is happening on the backend Offline Web Applications. The entirety of this solution works on many platforms as the server, PHP building the .manifest, then the browser interpreting the .manifest is up to the client having a modern browser. Fortunately most browsers support these specs.

8 responses to “Dynamically generated HTML5 manifests”

  1. Jakob Højgård Olsen Avatar

    Great post. how do you implement it in your indexfile ?

    1. Whitney Krape Avatar

      Hi Jakob,

      Not sure what you mean? The idea is that the .htaccess pulls the .manifest file which caches the rest of the page.

      1. Jakob Højgård Olsen Avatar

        Okay cool! how dos the htaccess look ? :-) 

        1. Whitney Krape Avatar

          Ah, Good question! You need to add a line,
          “AddType text/cache-manifest .manifest” to the .htaccess. From there browsers will pickup manifest! Hope that will help!

  2. VuoriLiikaluoma Avatar

    Thanks for sharing this! It'll make a perfect base for a dynamic manifest to a site I'm working on. I'll just have to add some more conditionals as well as NETWORK and FALLBACK files… Thanks again…

    1. Whitney Krape Avatar

      Sure thing, if you have any questions feel free to ask!

  3. devsmt Avatar

    this trick is neat! thanks for sharing

    1. Whitney Krape Avatar

      Thanks! It felt a little cludgy when developing it but then it has ending up working really great even on mobile browsers (specifically Safari.)

Leave a Reply

Your email address will not be published. Required fields are marked *