Recently, I have been playing around with building web applications for the iPhone and really wanted to try make the experience as close to a native application as possible. One big way to make the experience much better is by caching the application so it can be used offline. So, that’s what I am going to show you how to do today. We are going to be using a new feature in HTML5 called a Cache Manifest file. This file will allow you to tell the browser to cache the application for offline use. If you combine this with HTML5 Web Storage you can really build some compelling experiences.
The application we are going to build today is really simple. It’s just a screen with some text on it. A motivator application of sorts. You can see a screen of it below. You can also check out the application. It’s intended to be viewed on an iPhone, that way you can test the offline functionality.
The html code for the application is very simple. I’m going to just throw it out here and explain the pieces after.
<html manifest="build.manifest">
<head>
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-startup-image" href="startup.png">
<title>Make Stuff</title>
</head>
<body>
<div id="main">
<h1>Build Something Cool<br/><br/>{ }</h1>
</div>
</body>
</html>
Starting from the top, we have the standard HTML5 doctype. The next line is where we have the root html element and we have attribute manifest which is where we tell the browser where to find our cache manifest file. The first line of the head tells the browser to resize the content to the width of the device, so for an iPhone this is going to be 320 pixels. The lines following that are mobile webkit specific meta tags which says the application is capable of a standalone application and that the status bar when running the application standalone should be black. We then link to our css and link to a mobile webkit specific item which is our startup screen for the standalone application.
The rest of the code should be familiar. We have a single div with some text. For reference the css follows.
font-family: Helvetica, Arial, sans-serif;
background: #E82C0C;
color: #F5F5F5;
}
h1 {
font-size: 3em;
text-transform: uppercase;
text-align: center;
}
The main thing we want to talk about is the manifest file. The format for this file is very simple. You start by having the words CACHE MANIFEST and then list the files that you want to have cached. The file locations are relative to the location of the manifest file. For a large application this may be a lot of files, images, javascript, css, and more. However, this little application just has two files we are worried about – the index.html and style.css. The file ends up looking like the following.
index.html
style.css
Now you probably think that is everything you need to do. But wait there is one more thing. In order to serve up the manifest file correctly you need to add a new mime type to your web server. The new mime type for .manifest files is text/cache-manifest. And that is everything you need.
As mentioned earlier you can test out the application and add it to your home screen by going to its dedicated page. If you have any issues or questions feel free to leave a comment or head on over to the forums.