Building Android Apps: 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 http://php.net/manual/en/install.windows.php 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 http://en.wikipedia.org/wiki/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 public_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: Open Applications→ Utilities→Terminal and type these commands (you’ll need to type your password when prompted): cd /etc/apache2 sudo pico httpd.conf 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/libphp5.so 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. Press Control-X to exit, answer Y to save changes, and press Return to save the file. 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. Clear the checkbox next to Web Sharing and then check it again. Now PHP should be enabled on your Mac’s web server. Create a file in the Sites subdirectory of your home folder named test.php with these contents: <?php phpinfo(); ?> 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 http://www.php.net/support.php for links to documentation and help with using PHP.

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

Figure 2. 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');
  echo "CACHE MANIFEST\n";

  $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";
    }
  }
?>

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

CACHE MANIFEST
./index.html
./jqtouch/jqtouch.css
./jqtouch/jqtouch.js
./jqtouch/jqtouch.transitions.js
./jqtouch/jquery.js
./kilo.css
./kilo.js
./themes/apple/img/backButton.png
./themes/apple/img/blueButton.png
./themes/apple/img/cancel.png
./themes/apple/img/chevron.png
./themes/apple/img/grayButton.png
./themes/apple/img/listArrowSel.png
./themes/apple/img/listGroup.png
./themes/apple/img/loading.gif
./themes/apple/img/on_off.png
./themes/apple/img/pinstripes.png
./themes/apple/img/selection.png
./themes/apple/img/thumb.png
./themes/apple/img/toggle.png
./themes/apple/img/toggleOn.png
./themes/apple/img/toolbar.png
./themes/apple/img/toolButton.png
./themes/apple/img/whiteButton.png
./themes/apple/theme.css
./themes/jqt/img/back_button.png
./themes/jqt/img/back_button_clicked.png
./themes/jqt/img/button.png
./themes/jqt/img/button_clicked.png
./themes/jqt/img/chevron.png
./themes/jqt/img/chevron_circle.png
./themes/jqt/img/grayButton.png
./themes/jqt/img/loading.gif
./themes/jqt/img/on_off.png
./themes/jqt/img/rowhead.png
./themes/jqt/img/toggle.png
./themes/jqt/img/toggleOn.png
./themes/jqt/img/toolbar.png
./themes/jqt/img/whiteButton.png
./themes/jqt/theme.css

					  

---

Note:

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";

  $hashes = "";

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

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: ddaf5ebda18991c4a9da16c10f4e474a

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?