Well done!

You have completed HTML5 Mobile Web Applications!

Preview

Geolocation: HTML5 Offline Application Cache

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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[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.

You need to sign up for Treehouse in order to set up Workspace