Step 9 Everything is ready to install on your iPad, but we need one final file to tell Safari on the device that the website should be treated as an offline-capable web app. This file is called the cache manifest, and it’s part of the HTML5 specification. A cache manifest tells the browser what to download a copy of, and what to bring in from the web each time the app is launched.

The file itself is plain text, and looks like the example below. Note that you must set up your web server to serve this file with a specific encoding of text/cache-manifest.

See the box above right for more information on how to do this. You need to list every file that makes up your website in the cache manifest if the web app is to function entirely offline:

CACHE MANIFEST
# Offline cache v1
article.html
# supporting files
css/styles.css
js/jQuery.js
js/jQTouch.jquery.js
 
# images
images/page1.png
images/page2.png
images/page3.png

You also need to link to the manifest file from the top of your pages by changing your HTML declaration to read:


Step 10 Upload all the files to your web server (or copy them to your computer’s web server folder if you’re using your local machine). Next, visit the site using your iPad and click on the + button at the bottom of the Safari interface. Click the Add to Homescreen button. Safari will download all the files listed in the cache manifest, as well as the icon and splashscreen, and install a button on your homescreen using the icon you created.


Step 11 Choose the Settings application from your homescreen and either enable Airplane Mode (if you have a Wi-Fi + 3G iPad) or turn off Wi-Fi (if you have a Wi-Fi-only model). This prevents iPad from accessing the internet, and tests the offline nature of your web app. Return to the homescreen and launch your app by pressing on its icon. You should be able to navigate around your portfolio without internet access. Now, go off
and wow some potential clients.

Sam Hampton-Smith

Who: Sam is a designer and illustrator based in the cold bit of Scotland. He works in print and web design as well as in motion graphics. He is a frequent contributor to creative magazines. In his spare time Sam is an avid reader, musician and photographer. 
Contact: hampton-smith.com
Software: Adobe After Effects
Time to complete: 3 hours