If you’ve spent much time digging into the newest features being released in HTML5, then you’ve probably already played around with the Cache Manifest. It’s certainly a powerful tool for caching your site’s content in the browser of your users so that they can browse from page to page with lightning speed.

For a good introduction to the cache manifest, be sure to check out Mark Pilgrim’s Dive Into HTML5: Let’s Take This Offline.

In this article, I want to give you a simple solution for two aspects of the cache manifest that can be somewhat difficult to manage. First, we’ll discuss how to create a dynamic cache manifest that doesn’t require a manual update every time you add or remove something from your site. Second, we’ll discuss how to load a cache manifest while only loading assets and not loading any pages themselves into the cache.

Create a Dynamic HTML5 Cache Manifest

First, create a file in your root directory called manifest.php.

Second, copy the following code into your manifest.php file.

<?php
 $hashes = "";

 // Create the Arrays for each category
 $network = array("\n\nNETWORK:");
 $cache = array("\n\nCACHE:");
 $ignore = array("error_log","html");

 $dir = new RecursiveDirectoryIterator(".");

 foreach(new RecursiveIteratorIterator($dir) as $file) {
  if ($file->IsFile() && $file != "./manifest.php" && substr($file->getFilename(), 0, 1) != ".") {
   if(preg_match('/.php$/', $file)) {
    foreach($ignore as $item):
     if(strpos($file, $item)): $allow = FALSE; break; else: $allow = TRUE; endif;
    endforeach;
    if($allow): array_push($network,"\n" . $file); endif;
   } else {
    foreach($ignore as $item):
     if(strpos($file, $item)): $allow = FALSE; break; else: $allow = TRUE; endif;
    endforeach;
    if($allow): array_push($cache,"\n" . $file); endif;
   }
   $hashes .= md5_file($file);
  }
 }

 $fh = fopen('offline.appcache', 'w');
 fwrite($fh,'CACHE MANIFEST');

 foreach($cache as $file): fwrite($fh,$file); endforeach;
 foreach($network as $file): fwrite($fh,$file);	endforeach;
 fwrite($fh,"\nhSpecific Entry");
 fwrite($fh, "\n\n# Hash:" . md5($hashes)); 
 fclose($fh);
?>

Let’s look a few lines of the code above so that you can have a good understanding of what’s going on.

  • On line 5 and 6, we create the arrays that will be used to store filenames in their respective categories. Files that are dynamic like php files will be included in the NETWORK section and files that are static like images will be included in the CACHE section. We also prefill each array with their respective headings as required to make the cache manifest work properly (CACHE: and NETWORK:).
  • On line 7, we create an array of items to exclude from any part of the cache manifest. If any part of a file name matches a string that you enter in here, it will be completely excluded from the cache manifest.
  • On line 9 we search through the entire contents of the server and grab the file names of everything we see.
  • On lines 11 – 26, we search through each file and assign them to the appropriate array, either the network array or the cache array. While this is taking place, each item is being tested against the master ignore list.
  • On line 28, the cache manifest is opened and prepared to be written to. The generally accepted title for this file is offline.appcache.
  • On line 29, we print the words CACHE MANIFEST to the top of the document. Without this as the first line of your cache manifest, it will not be recognized properly by the browser.
  • On lines 31 and 32, we iterate through each file in our two arrays and print them to the document that we’re building.
  • On line 33, we have the option to write any specific entries that you want included into the NETWORK section. You can also duplicate this line below line 31 to add specific entries to the CACHE section.
  • On line 34, we print the hash code that we’ve been building throughout the process. This hash will change every time the cache manifest changes even in the slightest bit. This allows the browser or your users to understand that the cache manifest has changed and that it needs to reload it.
  • On line 35, we complete the offline.appcache and save it to a file in the root of the server.

Next, we’ll create a cron job to run this script once a day as it would be too much load on the server to run this script every time someone requests access to the cache manifest file. We’ll create a job that runs every day at midnight. Open your site’s cPanel, navigate to cron jobs and add the following.

0 0 * * * /home/dagaloo/public_html/manifest.php

Loading the Cache Manifest File

If you’re familiar with the cache manifest, then you already know that every page that calls the cache manifest will be automatically loaded into the cache. In theory, this is great, but for a dynamic application, that’s horrible. As the user interacts in your application and data changes, they won’t see the changes because they’ll continually see the cached version from their browser.

So how do we avoid our dynamic pages getting loaded into the application? Simple. We create a splash page that does nothing but load the cache and then redirect the user into our application.

Paste the following code into the very top of your splash page.

<html lang="eng" manifest="http://dagaloo.com/offline.appcache">
<meta http-equiv="refresh" content="0;url=http://YOURMEMBERAREA">

Notice that the meta refresh we’re using gets triggered immediately. Unless you have another reason for having a user land on that page, it’s advantageous to get them moved into the site with as little delay as possible.

And, of course, don’t forget to replace http://YOURMEMBERAREA with a link to wherever it is that you’re trying to redirect your users.

Conclusion

There you have it. Now you know how to create a dynamic cache manifest and you know how to call it on dynamic pages without the pages being cached. If you have any questions or anything that you’d like to add, I’ll see you in the comments!

Nicholas Cardot

About Nicholas Cardot

It's my personal quest to enable every person that I can to unlock that dormant potential concerning their online influence. Also, I'm a geek.

18 Comments

  • Raj Shah says:

    Hey Nicholas,

    I’m not too techy when it comes to this stuff, but I sure make it a priority to have speedy sites. I recently just switched over to a managed WP hosting and I think they deal with all the cache stuff. Is this something additional that you would recommend doing and if so, is there a WP plugin for it?

  • John says:

    I don’t know coding, but I understood in big lines how this thing works. I would be interested in a WP plug in for this too.

  • Sushant says:

    Can this be implemented on wordpress? Have you implemented this on sitesketch101?

    My blog is already fast thanks to w3 total cache and memcached technology but I want to see if this is something that I can use to make it blazing fast.

  • Your thoughts about adding something like this as a WordPress plugin is a great idea and you could certainly add this to WordPress manually by following the steps above and adding wp-includes and others folders like that to the ignore list. In fact, you could just focus the code in on the theme’s files themselves.

    However, on a blog you would run into the issue of them trying to view changes after comments have been added and stuff like that so you would have to create a way to load the cache manifest without loading every page into it much like the dilemma above. Find that solution, and you’ll have a great system.

  • sanjay says:

    is this the same with W3 Total Cache or will this work better with it?

  • Thomas says:

    Hi Nicholas
    That is a pretty smart solution. I really think that HTML5 can do a lot of cool stuff and your tip here is just one of many way to take advantage of HTML5. Everybody want their site to load fast rigth?

  • […] File manifest.php is auto generates structure of a manifest file and it’s code adapt from  https://www.sitesketch101.com/creating-a-dynamic-html5-cache-manifest/. I make the code only find the file type that support cache manifest. Remember, your blog site must […]

  • Wow! Interesting. I have seen caching done using the .htaccess file, I wonder which way is better (more resourceful). Also, HTML 5 has created a new playing field for web developers. For example, WebGL allows 3d shapes in the browser, makes you wonder what’s next…

  • Gagan Arora says:

    nice article i really need this html code

  • Kavya Hari says:

    Great HTML code 🙂 with good support on here 🙂

  • George says:

    The technique to avoid cache on dynamic pages is great.

  • This is so cool. I sure do love to have a faster site, it can never be too fast. 🙂 Especially since Google has taken site loading speed into account in SEO, it’s really important to do what we can to improve it.

    Awesome tutorial, thanks for making it simple. It’s easier to follow. 🙂

    • Good. I’m glad to hear that. I can say that it wasn’t simple to figure out. I hadn’t seen a dynamic cache quite like this anywhere else so I decided to go ahead and throw one together. Like you said, Google is paying attention so it’s always helpful to load your site as quickly as possible. Also, by using a cache you can have a little bit of a heavier site (like Site Sketch 101) because your users aren’t going to have to reload everything on every page load but only on the first page load.

  • Thanks Nicholas
    You have demonstrate this in a such a simple way. Hat’s off to you men for this such a wonderful job. Its look simple now to create but i can understand your input for this post.
    Keep up your good work.

  • Ashish says:

    I have the same questions as sushant’s
    Is it possible for wordpress ??

  • Jordan says:

    From what I can see this post does not solve the issue of dynamic content. If you don’t include the manifest page on a site it will not use the application cache. So having the cache page then redirect wont speed your site up at all. In face it will slow it down.

Leave a Reply