Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we create a Cache Manifest which will allow our application to be fully cached on a device so it can be used offline.
[Jim Hoskins] So now we have a pretty cool mobile application
0:00
that can save Notes, save locations to Notes,
0:03
get you a list of your Nearest Notes, and so on.
0:06
Now, what's really going to be great is if we can use this offline.
0:09
Right now, it is always requesting the latest code from the server,
0:13
but if we're not connected to the server, it would be nice if the application still worked.
0:17
After all, it doesn't need a server to store data,
0:21
so if I'm offline, why should the application not be available?
0:24
Let's see what would happen if I turn off Web Sharing,
0:28
which is right now what's controlling my Apache web server in development.
0:31
So we turn that off and I refresh,
0:35
we cannot connect to localhost because our web server is not running.
0:38
What I want to happen is I want to be able to access my application.
0:41
So I'm going to turn our server back on--
0:46
it will just take a minute to fire up--
0:49
and if I refresh, we should get our application back like that.
0:52
So the way we can do this is utilizing HTML5 offline application storage
0:57
and what this is is we will simply create a manifest file
1:03
telling the web browser about all the assets needed to run this application.
1:07
Then, when it gets them, it will cache them away,
1:12
and if it's unable to reach the server, it can use those cached files.
1:15
Now, the best online documentation I found from this
1:19
is from the Dive Into HTML5 book.diveintohtml5.org/offline.html
1:23
Now, it's a huge subject--this goes into how everything works--
1:29
and the best way to manage your cache, including a few gotchas
1:32
that you really, really want to take care of.
1:37
So first, let's go ahead and try to create our cache manifest file.
1:41
Now to do that, we will create a new file in our directory called cache.manifest.
1:47
Now, how this works is it will start off with the lines CACHE MANIFEST
1:57
and any lines that begin with a # will be a comment
2:02
so what we're going to do is we're going to comment of #Cache Manifest rev: 1.
2:08
The reason I'm giving a revision number here is because the application will only try to fetch
2:20
the newest contents if the cache manifest has changed.
2:25
Now, this is important because when we're developing or deploying new information,
2:31
we may want to tell the browser to recache all the assets.
2:35
However, the actual values in our cache manifest file might not change.
2:39
So one way we can change the file is to change a comment every time we update our files.
2:45
So then, the way it works is we can have a CACHE line with a colon
2:50
and every file we list here--like index.html, css/main.css--
2:57
every one of these files, when the page loads, will be cached away.
3:05
Now, there's always a different header we can give of NETWORK:
3:10
The section under this will never be cached,
3:16
and this is important, especially since we're using Google Maps,
3:18
which we can't cache and we wouldn't want to have it actually try to cache.
3:21
So what we will do is we'll say you always need to use a network
3:25
for the Google Maps.
3:30
So the tricky part here is we need to actually get all of our files
3:33
into this cache section.
3:38
Now, one way we can do this is to use the Terminal
3:40
and use a little bit of text editor magic to try to streamline this for us.
3:43
We could go through each of our files, but since we have several JavaScript files
3:48
and several CSS files and icons included with jqjQuery Mobile,
3:52
it's going to be a long process to manually type in
3:58
each and every file associated with our project.
4:01
So what we can do is from our web directory here,
4:04
we could type in $ls for listing - l for the long form
4:07
and capital R for recursive, and what this will do
4:12
is it will print out all of our files in all of the subdirectories
4:16
of this current directory.
4:19
We're going to go ahead and edit that output in order to create our cache.manifest file.
4:21
So here we can see each of our different directories here,
4:27
and what I'm going to do is I'm just going to try to copy this all out
4:31
and I'm just going to paste it into our cache section here
4:38
and we get the output of all of our files in here.
4:44
So now we just need to go ahead and clean this up.
4:49
Now, depending on how good you are with macros and stuff,
4:52
you can probably do this a lot faster,
4:54
but one thing I like about TextMate is if you hold down the Alt button,
4:56
it takes you into a special Block Select mode
5:00
where you can select certain columns along certain lines
5:03
instead of doing a normal linear select.
5:06
So by holding down Alt, my cursor changes into a cross here
5:09
and I can just drag from here all the way to this column
5:13
because I want to get rid of all of this,
5:18
and with this all selected, I can simply hit delete and it's gone.
5:21
Now, on this top level, there's really only one file I need.
5:28
I don't want to cache the manifest itself.
5:31
I don't want to cache the directories--we'll do that in a moment--
5:34
of css and js.
5:37
And this total header here I just want to remove.
5:40
So we have our index.html.
5:44
Obviously, for that section, it would have probably just been faster
5:47
to type index.html, but let's just keep on moving along.
5:49
So in our CSS directory, we have four files.
5:54
In our CSS directory we have three files and a directory.
5:58
We don't want this directory because we'll be handling each file in the directory separately--
6:02
I don't want this header line here--
6:08
and by using our block select mode,
6:12
I will delete all of that.
6:14
I do need to prefix css/ to each of these lines.
6:20
I can go ahead and remove this line and replace it with #CSS.
6:24
So to add css/ to the beginning here,
6:29
what I'll do is hold down Alt to go back to block select mode
6:33
and select a column before the first character in here.
6:38
You can barely see it, but there is a selection before each line here
6:41
and when you have a block selection like that when you start typing,
6:45
it will type simultaneously on all lines.
6:48
So to add CSS, I'll just type in css/ and we have changed all those files at once.
6:50
So this is for css/images, so let's clear that header line.
6:58
Let's use block select.
7:03
We have that all selected.
7:06
If I hit delete, I've lost my selection, but I can grab that again
7:08
by just holding Alt and drawing down the left column here.
7:13
I'll add in css/images/
7:17
and I can change this into a comment.
7:23
I'll do the same for js; remove this header
7:27
and I can do this all in one go by just selecting it all,
7:31
and instead of hitting delete, I could just type in js/ and we'll go ahead and into a header as well
7:37
and that is all of our files.
7:46
So now we've created a cache.manifest file
7:50
and this should work for us.
7:53
Now we need to integrate it into our application
7:55
to tell the browser that we have this cache manifest file
7:58
and it should be using it.
8:00
Now, there's a couple of things you need to do to your server
8:02
or you may need to do to your server in order to have cache.manifest work.
8:05
One is that a .manifest file should always be served
8:09
with the mime type of text /cache-manifest
8:13
so what we need to do is tell our server that any .manifest file
8:17
should be served with that mime type.
8:21
The server may already be configured for this
8:24
but if it's not, we need to go ahead and add a line to our Apache configuration file
8:26
or whatever server configuration you have set up.
8:31
I'm going to show you how to do it on a Mac
8:34
using the default Apache install.
8:37
Going to our Terminal here, what I could is open up our configuration
8:41
by typing in $mate /etc/apache2/mime.types
8:44
and here we can see the list of all the mime types we have here.
8:52
And so what I'm going to do is at the bottom here,
9:00
we'll add our own of text/cache-manifest
9:02
and we'll add some space here and we'll say always serve that
9:10
when we have a manifest file.
9:16
Now, when you save this out, since it is a privileged file,
9:21
you may need to give your password in order to save it out
9:24
and then you'll need to restart your server.
9:29
So let's actually test out if we are getting the cache manifest file served correctly,
9:34
so we'll go to cache.manifest.
9:39
We can see it is serving
9:43
and we can actually see it's interpreting this resource of the document
9:45
but it was actually served with text/cache-manifest,
9:50
which is exactly what we want.
9:53
On this page it shows you can also use an AddType declaration
9:56
anywhere in your configuration, or you can do it in the mime.types folder
9:58
like we did before.
10:02
One last thing you want to do--especially while in development--is to make sure
10:05
that the server is not going to cache the cache-manifest itself.
10:08
Otherwise, it becomes very, very, very difficult
10:12
to get past the cache.
10:16
One way you can do this is to create a .ht access file for your Apache server
10:18
and set ExpiresActive On and ExpiresDefault to "access"
10:22
so it'll clear the cache every time it tries to access the file.
10:27
So we can create a new .htaccess file with this information on it
10:31
and I'm going to go ahead and just restart the server.
10:39
You may not need to, but I like to do that any time I change anything.
10:43
Let's go back to localhost here, and the cache manifest will not be in effect yet
10:47
because we have not included it in the index.html.
10:53
So if we refresh, we're not getting any weird server errors,
10:55
which is always a good sign,
10:59
and the last thing we want to do is in our index.html in the HTML tag,
11:01
we want to define where the manifest is for this application.
11:05
So we'll go back to our browser,
11:08
open index.html,
11:11
In this HTML tag, we will add manifest= and then location of it of /cache.manifest.
11:13
Save it out and let's take a look at it in the browser.
11:24
So here we can see a lot of debug information here.
11:28
We can see the application was found, it's downloading all of these different files,
11:32
and it's very important to keep track of this.
11:37
If you have a missing file or file that it can't find,
11:39
it will actually abort mid-process here and nothing will be cached.
11:43
So you need to always make sure that your cache is correct,
11:46
pointing to files that it can find
11:49
because a single 404 will break the whole cache.
11:51
Now, if we refresh, it should still work.
11:55
We still have access to all of our localStorage here.
11:57
Now, let's go into our server here, turn this off,
12:02
and let's refresh.
12:06
We refreshed and it is still working just fine.
12:08
And add New Note with Some Text.
12:13
We can even add our location here and save it out.
12:19
You can see our New Note works just fine
12:24
and this is all with our Apache server turned off.
12:28
We can refresh as much as we'd like
12:32
and we will always get this because the browser has all of the files it needs
12:35
to serve this application.
12:40
Any time you change any of your files,
12:43
you would want to update the cache.manifest to have an updated revision number
12:45
just so you can change the cache so the browser will get all of the new files that you need.
12:52
I usually like to do all the caching stuff right at the end of my application
12:57
because it's easier to develop with the cache off,
13:00
but you definitely want to do some extensive testing with your cache
13:03
to make sure it works.
13:07
Now I'm going to turn my server on for one last check.
13:09
I'm going to turn on my server.
13:12
So if we refresh it, it looks like our app is working,
13:19
and now in the act of refreshing it, it should be caching all of the files.
13:21
So if we turn off the server once again and refresh--
13:27
cool, it looks like we get the entire application working
13:32
even though our server is turned off.
13:37
So now we have an offline Geolocation-aware localStorage-based mobile application.
13:39
And now our note-taking application has the ability to be run offline
13:45
using the HTML5 application cache
13:49
and we can add location data to our Notes.
13:51
The next step would be to actually take your device out into the real world
13:54
and test it using real location data.
13:57
You need to sign up for Treehouse in order to download course files.
Sign up