Creating a Dynamic Manifest File

Now that you're comfortable with how the offline app cache works, let's apply it to the Kilo example we've been working on. Kilo consists of quite a few files and manually listing them all in a manifest file would be a pain. Plus, a single typo would invalidate the entire manifest file and prevent the application from working offline.

Running PHP Scripts on Your Web Server

PHP is a versatile web-scripting language, and is supported by most web hosting providers. This means that on most web servers, you can create a file whose name ends with the extension .php, add some PHP code to it, visit it in your web browser, and it will just work. If you've been using a web server on your personal computer to serve up pages to your Android phone, you'll need to get set up to run PHP scripts. If you're running a web server on Windows, see for downloads and information. You may also want to use a solution such as EasyPHP or check out the Wikipedia page on this topic at Comparison_of_WAMPs.

PHP is easy to install on Linux. For example, Ubuntu users can type sudo aptitude install apache2 php5 at a shell prompt. To enable PHP in a user's personal pub-lic_html directory, edit the file /etc/apache2/mods-available/php5.conf as root and follow the instructions inside it to comment out a series of lines (by putting a # in front of each one).

Macs come with PHP installed, but you need to take a step to enable PHP like you did in "Mac OS X and the .htaccess File" on page 95:

1. Open Applications^ Utilities^Terminal and type these commands (you'll need to type your password when prompted):

cd /etc/apache2

sudo pico httpd.conf

2. Press Control-W. This brings up the option to search the file. Type php5 and press Return. This brings you to a line that should look like this:

#LoadModule php5_module libexec/apache2/

3. Using the arrow keys, move to the beginning of the line and delete the # comment character, which is preventing this line from having any effect.

4. Press Control-X to exit, answer Y to save changes, and press Return to save the file.

5. Next, start System Preferences, go to Sharing and, if needed, click the lock icon labeled "Click the lock to make changes" and type your password when prompted.

6. Clear the checkbox next to Web Sharing and then check it again. Now PHP should be enabled on your Mac's web server.

7. Create a file in the Sites subdirectory of your home folder named test.php with these contents:

8. Finally, visit the following URL in your browser: http://localhost/~YOURUSERNAME/ test.php. Replace YOURUSERNAME with your username, but don't delete the ~ (you can discover your username at the Terminal by typing echo $USER and pressing Return). If PHP is working, you'll see a table displaying your PHP version number and a lot of other information about your PHP installation. If it is not working, you'll see nothing but a blank page. Visit for links to documentation and help with using PHP.

£ ^Offline App Cache Demo X I

^ ^ C ¿T http://janathanstark.cOm/labs/app-e:aclie-3/

Offline App Cache Demo









Figure 6-5. A single fallback image will show up in place of multiple images when the user is offline

G hTtp://jonathanstark.coin/labs/app-cache-3/ ►

Offline App Cache Demo

Figure 6-6. Hosted images will show up normally when the user is online

To address this issue, we're going to write a little PHP file that reads the contents of the application directory (and subdirectories) and creates the file list for us. Create a new file in your Kilo directory named manifest.php and add the following code: <?php header('Content-Type: text/cache-manifest');


$dir = new RecursiveDirectoryIterator(".");

foreach(new RecursiveIteratorIterator($dir) as $file) { if ($file->IsFile() &&

$file != "./manifest.php" && !strpos($file, '/.') &&

substr($file->getFilename(), 0, 1) != ".") { echo $file . "\n";©

O The PHP header function outputs this file with the cache-manifest content type. Doing this is an alternative to using an .htaccess file to specify the content type for the manifest file. In fact, you can remove the .htaccess file you created in "The Basics of the Offline Application Cache" on page 94, if you are not using it for any other purpose.

As I mentioned earlier in this chapter, the first line of a cache manifest file must be CACHE MANIFEST. As far as the browser is concerned, this is the first line of the document; the PHP file runs on the web server and the browser only sees the output of commands that emit text, such as echo.

© This line creates an object called $dir, which enumerates all the files in the current directory. It does so recursively, which means that if you have any files in subdirectories, it will find them, too.

O Each time the program passes through this loop, it sets the variable $file to an object that represents one of the files in the current directory. In English, this line would be, "Each time through, set the file variable to the next file found in the current directory or its subdirectories."

© The if statement here checks to make sure the file is actually a file (and not a directory or symbolic link) and ignores files named manifest.php or any file that starts with a . (such as .htaccess) or is contained in a directory that begins with a . (such as .svn).

* > The leading ./ is part of the file's full path; the . refers to the current directory and the / separates elements of the file's path. So there's ' ' | $ always a ./ that appears before the filename in the output. However, when you check for a leading . in the filename, use the getFile name function, which returns the filename without the leading path. This way, you can detect files beginning with a . even if they are buried in a subdirectory.

© This section displays each file's name.

To the browser, manifest.php will look like this:









































Try loading the page yourself in a browser (be sure to load it with an HTTP URL such as http://localhost/~YOURUSERNAME/manifest.php). If you see a lot more files in your listing, you may have some extraneous files from the jQTouch distribution. The files LICENSE.txt, README.txt, and sample.htaccess are safe to delete, as are the directories demos and extensions. If you see a number of directories named .svn, you may also safely delete them (unless you have put your working directory under the SVN version control system, in which case these files are important). Files beginning with a . will not be visible in the Mac OS X Finder or Linux File Manager (but you can work with them at the command line).

Now open index.html and add a reference to manifest.php in the head element like so: <html manifest="manifest.php">

Now that the manifest is generated dynamically, let's modify it so its contents change when any of the files in the directory change (remember that the client will only redownload the application if the manifest's contents have changed). Here is the modified manifest.php: <?php header('Content-Type: text/cache-manifest'); echo "CACHE MANIFEST\n";

$dir = new RecursiveDirectoryIterator("."); foreach(new RecursiveIteratorIterator($dir) as $file) { if ($file->IsFile() &&

$file != "./manifest.php" && substr($file->getFilename(), 0, 1) != ".")

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

O This line initializes a string that will hold the hashed values of the files.

© This line computes the hash of each file using PHP's md5_file function (MessageDigest algorithm 5) and appends it to the end of the $hashes string. Any change to the file, however small, will also change the results of the md5_file function. The hash is a 32-character string, such as 4ac3c9c004cac7785fa6b132b4f18efc.

© This code takes the big string of hashes (all of the 32-character strings for each file concatenated together) and computes an MD5 hash of the string itself. This gives us a short (32-characters instead of 32 multiplied by the number of files) string that's printed out as a comment (beginning with the comment symbol, #).

From the viewpoint of the client browser, there's nothing special about this line. It's a comment and the client browser ignores it. However, if one of the files is modified, this line will change, which means the manifest has changed.

Here's an example of what the manifest looks like with this change (some of the lines have been truncated for brevity):

CACHE MANIFEST ./index.html ./jqtouch/jqtouch.css ./jqtouch/jqtouch.js

./themes/jqt/img/toolbar.png ./themes/jqt/img/whiteButton.png ./themes/jqt/theme.css # Hash: ddaf5ebdal899lc4a9dal6c10f4e474a

The net result of all of this business is that changing a single character inside any file in the entire directory tree will insert a new hash string into the manifest. This means that any edits we make to any Kilo files will essentially modify the manifest file, which in turn will trigger a download the next time a user launches the app. Pretty nifty, eh?

+1 0


Post a comment