Tutorials and Resources

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.

%d bloggers like this: