[Jim Hoskins] So now we have a pretty cool mobile application

that can save Notes, save locations to Notes,

get you a list of your Nearest Notes, and so on.

Now, what's really going to be great is if we can use this offline.

Right now, it is always requesting the latest code from the server,

but if we're not connected to the server, it would be nice if the application still worked.

After all, it doesn't need a server to store data,

so if I'm offline, why should the application not be available?

Let's see what would happen if I turn off Web Sharing,

which is right now what's controlling my Apache web server in development.

So we turn that off and I refresh,

we cannot connect to localhost because our web server is not running.

What I want to happen is I want to be able to access my application.

So I'm going to turn our server back on--

it will just take a minute to fire up--

and if I refresh, we should get our application back like that.

So the way we can do this is utilizing HTML5 offline application storage

and what this is is we will simply create a manifest file

telling the web browser about all the assets needed to run this application.

Then, when it gets them, it will cache them away,

and if it's unable to reach the server, it can use those cached files.

Now, the best online documentation I found from this

is from the Dive Into HTML5 book.diveintohtml5.org/offline.html

Now, it's a huge subject--this goes into how everything works--

and the best way to manage your cache, including a few gotchas

that you really, really want to take care of.

So first, let's go ahead and try to create our cache manifest file.

Now to do that, we will create a new file in our directory called cache.manifest.

Now, how this works is it will start off with the lines CACHE MANIFEST

and any lines that begin with a # will be a comment

so what we're going to do is we're going to comment of #Cache Manifest rev: 1.

The reason I'm giving a revision number here is because the application will only try to fetch

the newest contents if the cache manifest has changed.

Now, this is important because when we're developing or deploying new information,

we may want to tell the browser to recache all the assets.

However, the actual values in our cache manifest file might not change.

So one way we can change the file is to change a comment every time we update our files.

So then, the way it works is we can have a CACHE line with a colon

and every file we list here--like index.html, css/main.css--

every one of these files, when the page loads, will be cached away.

Now, there's always a different header we can give of NETWORK:

The section under this will never be cached,

and this is important, especially since we're using Google Maps,

which we can't cache and we wouldn't want to have it actually try to cache.

So what we will do is we'll say you always need to use a network

for the Google Maps.

So the tricky part here is we need to actually get all of our files

into this cache section.

Now, one way we can do this is to use the Terminal

and use a little bit of text editor magic to try to streamline this for us.

We could go through each of our files, but since we have several JavaScript files

and several CSS files and icons included with jqjQuery Mobile,

it's going to be a long process to manually type in

each and every file associated with our project.

So what we can do is from our web directory here,

we could type in $ls for listing - l for the long form

and capital R for recursive, and what this will do

is it will print out all of our files in all of the subdirectories

of this current directory.

We're going to go ahead and edit that output in order to create our cache.manifest file.

So here we can see each of our different directories here,

and what I'm going to do is I'm just going to try to copy this all out

and I'm just going to paste it into our cache section here

and we get the output of all of our files in here.

So now we just need to go ahead and clean this up.

Now, depending on how good you are with macros and stuff,

you can probably do this a lot faster,

but one thing I like about TextMate is if you hold down the Alt button,

it takes you into a special Block Select mode

where you can select certain columns along certain lines

instead of doing a normal linear select.

So by holding down Alt, my cursor changes into a cross here

and I can just drag from here all the way to this column

because I want to get rid of all of this,

and with this all selected, I can simply hit delete and it's gone.

Now, on this top level, there's really only one file I need.

I don't want to cache the manifest itself.

I don't want to cache the directories--we'll do that in a moment--

of css and js.

And this total header here I just want to remove.

So we have our index.html.

Obviously, for that section, it would have probably just been faster

to type index.html, but let's just keep on moving along.

So in our CSS directory, we have four files.

In our CSS directory we have three files and a directory.

We don't want this directory because we'll be handling each file in the directory separately--

I don't want this header line here--

and by using our block select mode,

I will delete all of that.

I do need to prefix css/ to each of these lines.

I can go ahead and remove this line and replace it with #CSS.

So to add css/ to the beginning here,

what I'll do is hold down Alt to go back to block select mode

and select a column before the first character in here.

You can barely see it, but there is a selection before each line here

and when you have a block selection like that when you start typing,

it will type simultaneously on all lines.

So to add CSS, I'll just type in css/ and we have changed all those files at once.

So this is for css/images, so let's clear that header line.

Let's use block select.

We have that all selected.

If I hit delete, I've lost my selection, but I can grab that again

by just holding Alt and drawing down the left column here.

I'll add in css/images/

and I can change this into a comment.

I'll do the same for js; remove this header

and I can do this all in one go by just selecting it all,

and instead of hitting delete, I could just type in js/ and we'll go ahead and into a header as well

and that is all of our files.

So now we've created a cache.manifest file

and this should work for us.

Now we need to integrate it into our application

to tell the browser that we have this cache manifest file

and it should be using it.

Now, there's a couple of things you need to do to your server

or you may need to do to your server in order to have cache.manifest work.

One is that a .manifest file should always be served

with the mime type of text /cache-manifest

so what we need to do is tell our server that any .manifest file

should be served with that mime type.

The server may already be configured for this

but if it's not, we need to go ahead and add a line to our Apache configuration file

or whatever server configuration you have set up.

I'm going to show you how to do it on a Mac

using the default Apache install.

Going to our Terminal here, what I could is open up our configuration

by typing in $mate /etc/apache2/mime.types

and here we can see the list of all the mime types we have here.

And so what I'm going to do is at the bottom here,

we'll add our own of text/cache-manifest

and we'll add some space here and we'll say always serve that

when we have a manifest file.

Now, when you save this out, since it is a privileged file,

you may need to give your password in order to save it out

and then you'll need to restart your server.

So let's actually test out if we are getting the cache manifest file served correctly,

so we'll go to cache.manifest.

We can see it is serving

and we can actually see it's interpreting this resource of the document

but it was actually served with text/cache-manifest,

which is exactly what we want.

On this page it shows you can also use an AddType declaration

anywhere in your configuration, or you can do it in the mime.types folder

like we did before.

One last thing you want to do--especially while in development--is to make sure

that the server is not going to cache the cache-manifest itself.

Otherwise, it becomes very, very, very difficult

to get past the cache.

One way you can do this is to create a .ht access file for your Apache server

and set ExpiresActive On and ExpiresDefault to "access"

so it'll clear the cache every time it tries to access the file.

So we can create a new .htaccess file with this information on it

and I'm going to go ahead and just restart the server.

You may not need to, but I like to do that any time I change anything.

Let's go back to localhost here, and the cache manifest will not be in effect yet

because we have not included it in the index.html.

So if we refresh, we're not getting any weird server errors,

which is always a good sign,

and the last thing we want to do is in our index.html in the HTML tag,

we want to define where the manifest is for this application.

So we'll go back to our browser,

open index.html,

In this HTML tag, we will add manifest= and then location of it of /cache.manifest.

Save it out and let's take a look at it in the browser.

So here we can see a lot of debug information here.

We can see the application was found, it's downloading all of these different files,

and it's very important to keep track of this.

If you have a missing file or file that it can't find,

it will actually abort mid-process here and nothing will be cached.

So you need to always make sure that your cache is correct,

pointing to files that it can find

because a single 404 will break the whole cache.

Now, if we refresh, it should still work.

We still have access to all of our localStorage here.

Now, let's go into our server here, turn this off,

and let's refresh.

We refreshed and it is still working just fine.

And add New Note with Some Text.

We can even add our location here and save it out.

You can see our New Note works just fine

and this is all with our Apache server turned off.

We can refresh as much as we'd like

and we will always get this because the browser has all of the files it needs

to serve this application.

Any time you change any of your files,

you would want to update the cache.manifest to have an updated revision number

just so you can change the cache so the browser will get all of the new files that you need.

I usually like to do all the caching stuff right at the end of my application

because it's easier to develop with the cache off,

but you definitely want to do some extensive testing with your cache

to make sure it works.

Now I'm going to turn my server on for one last check.

I'm going to turn on my server.

So if we refresh it, it looks like our app is working,

and now in the act of refreshing it, it should be caching all of the files.

So if we turn off the server once again and refresh--

cool, it looks like we get the entire application working

even though our server is turned off.

So now we have an offline Geolocation-aware localStorage-based mobile application.

And now our note-taking application has the ability to be run offline

using the HTML5 application cache

and we can add location data to our Notes.

The next step would be to actually take your device out into the real world

and test it using real location data.