Geolocation: HTML5 Offline Application Cache

[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