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