Developing Offline Applications with HTML 5
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Subramaniam, Venkat
Mobile devices are gaining popularity but the diversity of these devices poses a challenge for development. HTML 5 promises to bring a consistent API to program the client side for both desktop and diverse mobile devices. One additional challenge with mobile devices is network connectivity, or the lack of it. Mobile devices are often taken into remote areas with low or no connectivity. While a native app can run on the device anytime, a web based application by default depends on having connectivity, unless of course we use the offline capabilities of HTML 5. Come to this presentation to learn how to create applications that can switch seamlessly between connected and offline mode. Learn about offline options, configurations, local storage and how to program all of that, in this highly interactive, live coding session.
 Let's get started. Welcome to the session on developing offline applications with HTML5. I'll get started as we settle down, so just bear with people trying to get in. Let's talk a little bit about what we're going to do here today. My name is Venkat Subramaniam. I'm going to talk about developing offline applications. Essentially, I want to talk a little bit about what we're going to do, why we want to do these kinds of applications. And then I'll get into quite a bit of code. I don't use any slides anymore, so I'm going to just talk about it and then write some code, play with it, and that's what we're going to do here. Best time to ask a question or make a comment is when you have it, so please don't wait till the end. If you do have a question, please do draw my attention because the lights here are blinding. I can't see you if you do have a question, so wave at me or just start speaking, and once you grab my attention, I'll be more than happy to listen to you. So why bother to create offline applications? Well it turns out that mobile devices have taken over pretty significantly over the past, I would say five, six years. Things have been changing rapidly, and today we carry more power, computing power on our hands than we ever imagined. Each of us carry multiple of these devices with us in various forms, and this is only going to explode. So as time changes, we definitely want to be able to have these devices. So how do we develop applications? Well one option clearly was to develop native applications. Native applications are great, they give us the power, they give us the strength of the platform, but one of the problems, or several of the problems is we have to deploy the native applications first of all. You are kind of bound to the platform you're on with multiple different platforms emerging, it really becomes one of the problems as well. Well we have taken the time to learn about the power of the web, it's been really interesting to develop applications on the web. What if we can really develop applications that can run on mobile devices as well? Well not going into the strengths of HTML5 here, definitely HTML5 has kind of convinced the world that there is an option to consider, there's pros and cons to it definitely. But one of the main differences between offline applications and native applications is that native applications can run both offline and online because you can run them locally. But with HTML5 obviously we have to be connected to the web, so if you are using a mobile device and you're walking around what if you don't have connectivity? For example, this is such a beautiful country, I've enjoyed traveling this country, but there are several spots I go to where there's absolutely no connection on my mobile device. I myself live in Colorado and we travel quite a bit up to the mountains and there's a lot of times we don't have any connectivity at all. Some of my clients into areas where their employees go into remote locations, they may go into a location where there is not much connectivity, they may go into refineries, they may go into drilling areas offshore and they want to be able to collect data continuously but if they want to be using HTML5 they won't have connectivity, how do they go about doing it? Well this is where the offline applications really help. So with offline applications we can interact with the application to a certain extent and be able to collect information from the user and then transmit it. I've got some clients who are heavily using this particular feature because their clients who are using their applications are highly mobile, they're out on the streets constantly and they have to collect information about various things happening. So let's imagine for a minute that I'm a park ranger and I go out in the park in the mountains and I want to report about various things I'm seeing in the park but I want to have a mobile application on my hand to use. So how does this really work? The main idea really is that your application first connects to the web, well the user connects to the web, downloads the application and the application automatically caches on the local machine whether it's a desktop or a tablet PC or mostly a mobile device and once the application is cached on to the local machine the user shouldn't really care about whether they are connected or not. They interact with the application and as and when the application gains connectivity to the web it can push the data back and to give a certain amount of behavior to the users. Now clearly there are certain benefits or features you can only give when they are connected but hopefully we can give a fairly decent amount of behavior and features for them to use when they are disconnected as well. But before I talk about offline connectivity and applications itself I want to spend some time talking about storage. I won't go into too much detail about this but there are a few options to store data locally on your system using HTML5 itself. This is extremely disputed right now, it's emerging standard and you are developing application with HTML5. One of the common questions people ask me is how do we deal with browser differences. I am using Firefox, I am using Chrome, I am using this browser that I never want to name ever but what do I do with these kinds of browsers right? Well I have got some good news for you, they are working really hard to standardize and make sure these things work on every browser. So if you are keen about having this work on every browser the good news for you is everything will work just fine within the next 20 years. So but in the meantime right while we are developing applications you still have to worry about those differences. But the one that seems to work mostly today is a web storage. Basically the idea is you are storing something on the local machine using a very simple key value pair. Let's take a look at an example but before we do that let me quickly talk about a difference between a local storage and session storage. Very quickly a session storage is a data you store on the local machine but it's purely a transient data. The minute you leave the page or bring down your browser that data is gone. So rather than having cookies to go to the server and store the information on the server you can store it locally on your machine. On the other hand local storage is a little bit more persistent. It's going to store on your local system, you can quit your browser and come back and the information still is there and you can continue to use it. Now how do you use a local storage? It's extremely simple so to understand this I am going to create a very simple application here. So I have got a little HTML page and nothing really fancy here and within this page I have a little input tag and it tells me that autofocus is true and I am going to report issues. I am a park ranger walking around. I want to report issue about a fallen tree or a road that is blocked by a tree. What have you? So I want to really collect some information and send it to the server but remember I could be offline at any time as I am driving through the mountains the connectivity kind of keeps coming in and going. So what am I going to do? So in this case of course I have a button where I am going to click on to report this little issue. I also have a stored issues where I am going to display a list of issues that I have stored right now just for our purpose so we can see that it is being stored locally on this machine. And then of course in this case I am going to report that here into an ID called stored issues. Now for this to work of course I have a little command a javascript I am going to call. I am going to call this little save data and all that the save data does is it takes two parameters. The value that I want to save and of course the span tag where I want to display the rest of the information itself I am going to go ahead and store it. So how would I go about using this information? So let's go ahead and connect to the page itself right here. So right there is the page. So I need to create the function. So the function I am interested in creating here is the save data function. So let's go ahead and create the save data. So I have the save data. This is going to take basically a value or the data that I want to store. But I also have the span tag to report what the error the messages that have been stored so far is right. So a fairly simple amount of information to be presented here as you can see. So that is what I am going to display, store the data and then display it. But how would I go about using this information? So very simple you can simply say local storage if you are interested in storing in local storage or you can use session storage if you just want it to be temporary and into this page itself. So I am going to go to the local storage. Well in the local storage I could ask for a count of the number of issues. I could say issues count for example. And of course it is quite likely this issues count doesn't exist at this point. So I could basically say local storage issues count if it is valid otherwise just set it to a zero. So I can kind of keep tab of the issues that I want to store by having a little counter. So at this point it is fairly simple. I can say local storage and it is very easy to access it as you can see. I can simply say issue plus and I can say issues count over here and this is going to just store into a little hash map. So think of a local storage as just a little hash map where you can dump things. Now clearly there are other benefits, other solutions and you can use a database and stuff like that. But like I said those standards are evolving. Our focus is really not on how to store the data but to really use this data once we store it. So once I get the data what am I going to do? I want to store the data obviously here but I also want to report back the data so we can use it. So let's go ahead and say local storage issues count and of course I want to increment the issues count in this case. So let's parse the integer for the local storage issues count and then let's go ahead and add one to it so we can kind of keep track of the count of the data we have. Well at this point we can simply say for every value in my collection obviously so I is less than let's say the count itself. So in this case it's going to be the local storage.issues count and of course I want to go through and loop through these values and display it so I can simply say spend report over here. Well let's go ahead and initialize the spend reports inner HTML and let's set it to a empty value to begin with and then we can simply say inner HTML and I want to simply assign it to whatever data that I have on my hand so we could basically put that into a little br and then put a data into it. So this is going to just populate the data into the into the spend report itself so that's all I have done so far in this particular example. So my saved data is fairly simple as you can see not really complicated and I'm going to store it. Now the question is if you're connected you have to send the data to the server if you're not connected you have to store it locally how do you go about managing these differences. Well there are there's no real simple answer or single answer to this but it's a choice that you have to make it's a design decision that you have to make but I believe in keeping things extremely simple make it work make it right then come back and improve it. So one suggestion I would have is just store it locally all the time and if you're connected then push the data to the server that simplifies quite a bit of effort in writing the code otherwise you're just sitting there and checking repeatedly and then your logic gets duplicated you start violating the right principle you make Andy very angry because you wrote about right principle so you don't want to go there at all right. So the point really is that you don't want to really complicate things anymore than it requires to be complicated. So I have this little function assuming that I wrote all these correctly let's go ahead and see what this is going to do at this point. So I have this little page I call the sample dot HTML and I'm going to say in this case of course I'm connected to the server I'm going to say you know three down and I could give details about what the tree where the tree was down and stuff like that we could definitely put those information of course who expected the code to work the first time. So let's go back and take a look at what I did anybody sees the error here. Yeah a little louder please in what line number five. Okay there we go absolutely that would help so local storage now he tells me he's been watching quietly all right so any other issues line 12 so let's go ahead and fix in line 12 as well what did I do wrong there a little louder please that is correct so in this case of course I want to go ahead and put the span of the local storage and I want to ask for the issue in this case plus the value of I itself should work right so basically the idea is to go back and get the data out and be able to display it so let's say three down one more time and let's see if that does anything at all so still there's issues what is the problem is it even getting here by the way of course the word famous where to find this out right you know so we can see if it even comes to this method right so let's go ahead and try it so once again try it okay so it's not even coming into this function let's see why so this is the functions dot js let's make sure I call this function correctly so I have the functions dot js being referred over here let's go ahead and bring up the little debugger here and let's click on this oh there it is now we just needed a fresh so there we go so not too bad we have these three things stored you can see that it's storing it locally we could go back try again and say you know road damage one more time you can see that you can see that it's being stored away and there it is being stored so not too bad isn't it so alright we have this code little code working but what about really going offline with it but before we do that a couple of interesting things you can do this is stored on the client side you're on the mercy of the users they can mess with it if they wanted to but let's take a look at what we can see here real quick one of the real nice things about this is you could say here local storage and you can kind of take a look at what's in the storage and that's the stuff that we just stored as you can see into the local storage itself you can also go to the local storage and you can say length for example that tells you I got five elements in this particular case one is the count and the other four values you could also say local storage over here for example and then you can ask him for the key values at a particular location for example in this case it says if you zero and stuff like that so you can navigate through these values of course when you are done with all of these if you wanted to programmatically as well you could simply call clear in this case and that would blow away all the data right so that basically can take things away from here and as you can see in this case now we don't have any of the data only the road damage is there because I cleared out everything else so this is basically a way to store data locally like I mentioned there are other ways to do this as well so pick your poison depending on what you are trying to do but how about going offline itself well the essential aspect of this is I am going to go back to this page over here and I have to tell the browser this is going to be in an offline mode how do I do this well the way you do this is by specifying a manifest file well there are a few complications we have to be careful about the first complication is let's go ahead and start with the little manifest file to begin with by the way so I am going to go ahead and create a manifest file right here so the manifest file I am going to create right now I have only these two files here as you can see but I am going to go ahead and create a file what is the file name I want to create I will call it my manifest as it is so useful name right and dot I will say app cache over here so I am going to really create a little file that is going to be configured over here so one of the challenges we will run into when you create an app cache file like this is just because you name it as app cache doesn't mean it is an app cache you really need to make sure it really is treated as an app cache we could spend a lot of time wasting your time fixing this but one of the things you can quickly do is use the friendly neighborhood curl command so curl minus I over here and I am going to go to my location over here localhost for example and then I am going to say in this case offline and I am going to say my manifest manifest and then dot app cache that is the file I just touched over there a minute ago right so if I ask for this it says 200 okay which is a good news but pay attention to the last line over here it says text slash pay I was going to say a pain it is a pain as well by the way it is a text slash a plane meaning the browser doesn't have a clue what you are talking about when it downloads this file at this time so to fix this what you have to do is you have to configure your web server properly so you are going to go to the mine types in your web server and you need to tell the web server that an app cache actually is a cache manifest file and only then will it send the appropriate information so I went ahead and modified that it is a good idea to restart the server so I restarted the server right there so now let's go ahead and run the curl command one more time well not quite so let's try this one more time still not let's make sure that I have actually modified it not just lying to you so let's go ahead and take a look at it yep I did say it is an app cache file let's make sure I spelled it correctly app cache yep so let me go ahead and start the server just one more time to make sure and I hope it is really actually restarting it so get back to this and see if it is telling us still not okay so let me go to the command line and try this one more time so this is restart so let's go to start and I am going to run this manually here that's all I am doing so I already loaded no wonder that's why I need to use a restart alright this is what happens if you are in sleep and try to edit scripts okay let me do a restart over here and hopefully that takes care of restarting it alright let's try this one more time so I restarted the server and let's go ahead and try this much better so we got this app cache file configured so the moral of the story is make sure your server is reporting the app cache file as an app cache file itself and rather than monkeying with it we can use tools to make sure it really is working as we would expect it to work great so now that that part is done what do I want to do with the manifest file itself let me go ahead and bring the manifest file on my hands so what am I going to do with the manifest file first of all the manifest file has to have one entry in the very top and that entry is cache manifest make sure this is the first entry otherwise you are going to make the browser extremely angry and you don't want to do that so the next thing of course in this case is I have got to tell him what the cache itself is going to be meaning when the browser downloads this file this file is instructing the browser what files it needs to cache locally on the machine or the device itself so I want to cache sample.html I also want to cache functions. excuse me functions actually I don't need to cache functions I am going to leave that for a minute so just the sample.html I want to cache the next thing I am going to say here is a fallback now what does the fallback say the fallback says if a request comes for functions.js by the way which is the file I just wrote a few minutes ago then send the request to offfunctions.js so I am actually asking him to map saying if you are connected use functions.js if you are offline rather than using functions.js quietly replace the content of offfunctions.js instead of functions.js so you are providing a little mapping and the last thing you are going to do here is the network that you are going to specify and in this particular context all you are saying is for every file that is not cached simply go to the network and get it for me and you can configure this even more with specific file names, directory names, what have you you can specify those details as you please. so that is my manifest file that I have created so far at this time but of course we have to link this to the system at this point how am I going to do that so in order to do this all that I have to do is go up here and simply say what the manifest file is at the very top so I am going to say manifest equals mymanifest.appcache and I have linked it so let's go ahead and save this file I don't have the off file yet so it's a good idea to go ahead and create that file so let me go ahead and create that file so this is going to be I am going to say functions.js but I am going to call it offfunctions.js but I am going to simply put the content of functions.js into offfunctions.js that's all I have done so if I go back to the offfunctions.js file it is exactly the content we had a few minutes ago but what am I going to do in the offfunctions.js well in this particular case I am going to just remove all of these for a minute and simply alert here and say sending data to server now of course as programmers we know how to write javascript code to collect the data from the local storage because you saw me already do that by getting the data and displaying it and now you can send it through an Ajax call to a server we don't have to worry about that part here because you can deal with the Ajax part separately well that's great so we can go ahead and send this to the server and that would just tell us that we are sending it to the server versus using it locally notice I have two files now functions.js which is the online version and offfunctions.js which is the offline version make sense so far okay fairly simple so far of course assuming that I wrote all this correctly we should be able to see this in work now notice in this case I have the console up here and running because it's really helpful to see that this actually is going to work as this is being executed so I am going to refresh this page at this time and I want this to bring in the content of the page and display it for us so let me make sure that I have saved this over here and let's also go ahead and do one more thing I'm going to just restart the server just to be sure and let's get back to this and see if it's pulling this back in as I am making a request for this particular page itself looks like it's not refreshing this back let's see why so sometimes it just takes a little bit of effort for it to see the change itself so let me go ahead and grab this for a minute let's quit this let's come back to Chrome here and try this one more time and let's bring the console here so we can actually look at it still not alright so let me make sure I had the file name correctly my manifest app cache is the file I had over here let me make sure that's the name I gave for the file here as well and it seems to be correct and does anybody see any other issues that I have kind of stumbled into here I'm using the file protocol did I do that and I am good catch so yes so don't do that so HTTP right and of course in this case local and I have to just say offline over here good eyes by the way excellent so right there that's exactly what I wanted to show this also shows that I'm not smoking something behind here it's actually real code so you can notice that in this particular case it is actually downloading the file and you can see what it is doing so we can kind of look at what's going on here and it's downloading the files and displaying the content right here and that's basically the output right now let's go ahead and try this real quick we'll say tree down here I click on report it says sending data to server obviously because we are connected now the question is we want to try this with a disconnected mode how do we do that you would think that the chef to be really simple isn't it but no in software we never make anything simple so your browser cannot detect that it's not connected to the server now you may say but but but Google says there are you know methods available to do it yes it does say you know I really love googling because when you Google you realize you're not the only clown sitting there with not an answer there are 20,000 more people struggling with the same problem right you don't feel so lonely anymore but the problem is it still doesn't work so after a few hours of effort you realize none of those solutions actually work so I'm going to ignore the problem for a few minutes and I'll come back to that a little bit later so all that I'm going to do right now is simply I'm going to stop my server so my server has been stopped and I have to refresh this page right now I promise I'll solve this problem later on but one problem at a time so I refresh the page notice it's complaining it couldn't go to the server and download the manifest that's a good thing but it has cached stuff for us so I'm going to say here three down one more time click on the report and you can see that it's storing locally you saw that little message pop up and we can say another three down there's a bad day in the forest and you can see that it's another one down and another one down and another one down and of course if I turn back my server at this point assuming that I'm clicking the right buttons again there we go and I refresh the page this time and I'm going to say you know hello there and click on the report it's goes back to the server as you can see so of course in this case what happened to the local data well in this case of course what I would like to do is go back to the functions dot js at this time and since I'm sending the data to the server I want to say local storage dot clear because the assumption is that you push the data to the server you can clear it locally at this point isn't it so that's all I'm doing at this point so let's go ahead and refresh this page and then let's go ahead and click on it let's go ahead and take a look at the local storage by the way just to see if it's gone at this point so let's go to local storage and display it you can see that it's empty right now and of course if I turn it back to offline mode it will start storing data locally so we looked at configuring the server we looked at how to present these data and when you're working on this by the way it's probably a good idea to pair up with somebody with a good eyesight like the person who pointed out the problem to me so that really helps to debug the issues and find out what's going on so so far so good so a fairly simple solution we have an offline mode and online mode we saw how to switch between them we haven't quite fixed the problem of switching itself but assuming we know how to find out we have switched the caching happens and things are working fairly well great but next the question is how do we update stuff so let's go back to this code for a second notice in this case in the offline function I'm going to go back to the offline function and I'm going to just put an alert statement right here alert and I'm going to say in offline just for us to see so I hit the save button now I go back to the program refresh the program and I'm going to go ahead and enter some data here click on it it says going to the server that's great I'm going to go ahead and put the server tone off the server I'm going to refresh this one more time and this time of course I'm going to go ahead and enter a data and click on it quite did not see that message what's going on well it turns out you may have hundreds of files potentially on your server and it's not going to be very efficient for the browser to go query all the files and say has any of the files been modified so to solve the problem they decided the only time they're going to refresh your cache locally is of the manifest file has actually been modified now here comes a small problem we have most of the time we may be editing improving features fixing bugs in other files and we don't have a reason to change the manifest file well tough luck there's not a whole lot you can do about it. So what you do when solutions are not clear what you do you always come up with clever solutions which really means we are stupid right so notice what I'm going to do I'm going to go to the manifest file and I'm going to simply put a comment in here and I'm going to say version one and you can keep tweaking the stupid number over and over right so in this case I said a version one in this case you can put other messages by the way feel free to put your emotions on this because it doesn't use that information anyways so this time of course I go ahead and start my server one more time I'm going to refresh the page notice it brought back the cache one more time and of course in this case I'm going to use it in the online mode right now go ahead and turn off the server real quick I'm going to now go back here and refresh the page this time and of course try this in the offline mode you can see the alert in the offline mode shows us that it brought the application back not a very pleasant situation but you have to keep the little file being tweaked over and over but you don't have to be sequential you can up the number lower the number put other things in there whatever it is you know talk about your favorite movie in there if you want it doesn't matter right so the point really is that you have some content in there to specify okay that's great but I want to kind of take a little bit more control because I've got a local data and my application has gone through a drastic change and in my second version of my application I want to store data very differently but I'm really scared because the application data is different I want to make sure I don't lose the data the user has already stored how do I deal with it well it turns out we don't have to worry so much about it because we can use event handlers to get to this information fairly easily so how do we go about getting this information really so if you notice I'm going to show you a couple of ways to do it programmatically but I'm lazy here to write code right now so I'm going to just go ahead and write the code right here within within the Chrome itself and of course I can write the code here we can obviously write the code in our JavaScript and reuse it so all that I'm going to do here is to say window dot and I'm going to ask him to bring in app cache or application cache over here and that's an object with the enormous amount of information valuable to us and you can go query this and ask for details in this case one information I'm going to ask him is the status information about this itself and notice it tells me the status is one of course one is a very useful number it's very clear and one actually means it's idle that's what it means right so okay this is idle what can I do I can then say for example window dot application cache and I can say update now so this is a programmatic way to ask for it let me make sure that I actually am connected by the way that would really help so let's go ahead and connect it let's go ahead and refresh the page really quickly and then of course I'm going to do the same thing now ask for the status do an update and now that I finished an update I ask for a status and it tells me still it's idle but of course if there was an update really on the server change the number beautiful number and come back here and try this update one more time this is of course you only do this if you really care to do this programmatically that is and I'm going to ask for a status this time notice it's not a one it is four because it found out that there is an update available and it is ready to do the update now we don't have to do this programmatically it does it manually automatically as we saw but this only gives you more control programmatically if you choose to use it so at this time I can simply go back to this and say simply I can say swap cache and ask him to swap the cache itself and I can ask for the status notice it no longer four because it has updated locally and the status went back to idle now you can write code for these things very easily and you can of course you want to handle these through events what kind of event will you handle through if you go back over here you notice there are tons of events available like on cached on checking on download error so simply register functions to it and you're off to working with these data as you may please to use if you're interested in downloading this code example and playing with it by the way you can download it from my website I'll put up this link towards the end but if I don't please do remind me and I'll put this up here and so you can download the code and play with it so we talked about a few things quite a few things here in terms of the events and how you can listen to these events and you can you know manipulate them you can write code at this point it's purely JavaScript coding that you have to do to take care of these things well I did promise to you that I will find a solution for one problem which is how do I know that I'm connected or not connected well it turns out that's not that easy to find out you already saw the problem here now notice in this example if I go back to this example here let me go back and try this one more time for us to take a look at so in this case I have the page sitting here and if I'm in online mode it's going to alert something if I'm in offline mode it updates the data in the bottom so that's great I'm connected at this point I believe so let's go ahead and say here test one it is sending the data to the server as you can see but now I have disconnected so in other words I've actually stopped the server now I could also go try to turn off my wireless network but that only is more disappointing because it doesn't work so I wouldn't even bother doing that I just turned off the server in this case but notice in this case if I go back and say test two it still is saying sending data to the server of course if I was really trying to send the data to the server it would have failed at this point and it would have complained at this point so what do we do how do we know whether we are on the server or not until this point I kind of hit the refresh button and I asked him to refresh it and it said oh I'm not connected anymore but that's not the way to develop application you don't want the user to be refreshing applications anyway and I really hate giving buttons where people have to press buttons to do things and it becomes really not a good use case or user experience so what can I do well there are quite a number of solutions that have been talked about on the web and almost every solution ends by saying that's a great idea but it doesn't work and so what do you do about this well actually it turns out there is a fairly simple solution that we could actually use Ajax to the rescue so you can go use Ajax and you can ask Ajax to go get a file and of course because we know Ajax always communicates asynchronously if the file is not there it is going to give you a error so all that we have to do in our code is store the data locally all the time why because it's done simple to do it but after you finish storing the data locally simply let do a little ping for Ajax and say hey Ajax do you have this file by the way well that solves the problem partially and it will work really fine the very first time you try it the second time you try it it starts fooling you now why is that that's because cleverly the browser caches the page you fetch and the next time you make an Ajax call it says I already have it by the way why bother going to the server now we are scratching our head well what how can we solve the problem well here's another suggestion little query string to the end of the file by the way you are fooling the browser it says oh gosh is the new resource I better you're shaking the head yeah it is frustrating but I wish there was a better solution that I know and you basically are sending the request automatically at this time and getting the response but of course the beauty is this is a well-known problem and the standard will address it within the time frame I mentioned earlier right so we will have a solution definitely so what can we do to solve the problem here so I'm going to play with this a little bit with a quick example then we will come back and solve this in this application real very easily so I'm going to create a little file called the connected dot html and what am I going to do in the connected file so let's go to connected dot html very trivial example here let's say this is my button and I'm going to say on click and I'm going to simply say check but I want to do a couple of things in the check so I'm going to say connected over here but I'm going to perform two callbacks because we're using asynchronous call you could try to make this sequential and synchronous but that is kind of really you know walking against the motive of JavaScript so we can still keep it asynchronous by the way so I'm going to give him two functions here one function simply alerts simply saying connected and the other function is going to be right here and this function simply says you know I'm not connected so here is an alert and I'm going to simply say not connected now of course I'm not caring about code quality and all that here I'm just putting together a random example to show you how this works so this can be done a lot better of course but what is the code for this let's go ahead and dump that code here just for this particular exercise so what is this check method so here is my check method and the check method or function is going to take two parameters for us the first parameter is going to be a connected callback so we'll call it connected callback and the second one is going to be not connected callback right so we can use really two callbacks which can be called but how do we go about checking for this this actually is fairly simple since we have done Ajax by the way if you're using jQuery or other libraries feel free to use it I want to keep it very fairly simple so nothing really under the sleeves so I'm going to simply say XHR equals new XML HTTP request object that's all I brought in and XHR dot open and here comes a little trick by the way ask him to go get it and just ask him to get the root itself who cares what you are getting we're not going to use it anyways and then in this case I put a little question Q equals and then we'll simply throw in a math dot random that to keep him confused along the way right so then once you do this you simply say XHR dot send over here and just make a request to get the information but of course we have to register for the event before we do this so we'll call it handler equals function and in this function of course I have to register this one so we'll say XHR dot on request on response status change isn't it equals and then this is the handle that I want to provide or handler I want to provide for it by the way I'm quite capable of making mistake over here so do let me know if I mistyped it but I really like this event by the way because that's the event that is really longer than my last name so I love things that are longer than my name so that is really awesome so what am I going to do here I'm going to say XHR dot of course response status is what I'm interested in this case and if the response status was a beautiful number of four meaning I'm done with the query then I can say over here if XHR dot status is equal to a good 200 do a call back on connected call back otherwise go ahead and call back on the not connected call back so just a little silly little way to figure out whether you're connected or not without having to have the user intervention that's all I'm doing here assuming I didn't make any mistakes writing this code let's go ahead and try this one by the way it's called connected dot html so let me go ahead and say connected dot html over here that's not a good name let's make sure I got this properly here so this is called connected let's make sure I got the name correctly so right there and let me make sure I put this in the right place seems like so let's go back here and make sure I'm getting this file so local host offline and I'm going to say connected dot html there we go still not anybody sees the problem but oh I what a picky audience they expect the server to be running as well okay fine alright so let's go ahead and try this you're absolutely right didn't realize I had turned off the server so right there it says connected let's go ahead and click on connected now of course let's make sure that it's going to respond back did I make any mistakes in these functions do you see any problems here I always doubt this particular name by the way did I type this correctly is it good did I do did I do check for the wrong value on ready state oh of course and is this also ready state alright so on ready state I can never remember that by the way no matter how hard I try and this is ready state alright so let's give it a try again alright it says connected like right there let's go ahead and disconnect from the server real quick I'm not refreshing the page this time at all it says not connected so that seems to have gone fine and with your help I was able to fix that name over here so that's good now it's time to just put this together how do we do this let's grab this function check by the way real quick I can reuse this function so close this off and I'm going to do something a little different than we did before I'm going to go back to the function of function dot j s real quick now what I'm going to do is to simplify this greatly by the way and I'm going to first of all copy the offline function to functions dot j s I'm going to completely remove the offline function entirely here so that's gone so I only have the file sample the manifest and functions are j s no fiddling with two files anymore just one file but how am I going to use this so I'm going to go back to this functions dot j s now in the functions dot j s I'm copying this check function and honestly I don't care about the offline mode at this point so I even removed that part entirely here and I'm going to ignore if it is not connected so what is he going to do check simply is going to or you can give a better name for this obviously and the check is basically going to call this connected callback function if it is connected otherwise we just do a no up now what am I going to do in the save data I'm going to come in right over here and at the very end of this by the way I'm going to say go ahead and check for connectivity and if you are connected by the way I want to alert saying send to server at this point and write the code you wanted to do for sending to the server and then local storage dot clear because we have sent the data right so notice that I'm not really fiddling with and if an else condition all the time I'm just storing everything locally all the time and if I'm connected I send it back otherwise take it easy again this may or may not serve your specific needs but it's a design consideration you have to go through I find this to be a fairly simple thing to do rather than maintaining multiple files and fiddling with things so all that is yet to be done is to just go ahead and try this of course one more thing now I have to there's a bug already here man so let's go ahead and try this one more time so manifest file I go back to this file this time now notice I don't care about the fallback in this case right so I'm going to remove this fallback and I'm going to just catch the function as well because if I'm connected or not who cares I just need to be you know having this file it takes care of the connectivity so I'm just caching that file as well that's all I did so let's pay you know respect to the manifest guards by increasing that number and now that we have added to that let's go ahead and try this so let me make sure I've connected to the server so that is started the server let me go back here and ask for the sample dot html one more time it is downloading the file as you can see right here and now we are in the connected mode at this point obviously so what am I going to do now I'm going to try a few examples here so let's go ahead and say test one and click on the report it is notice it is putting it here for a moment it is saying sending to the server I click on okay and that should have been cleared by now by the way but of course I did not go back and update the file at this time so that is not sending this so just for our sakes I will just go ahead and let's do this actually right update this because I have to update the span tag as well isn't it so that's a little not dry but that's okay we can figure it out later on refactoring can take care of that so I'm clearing this of course it would help to clear first as well that bug was telling me something obviously there right so let's go ahead and try this one more time I'm going to say test one click on it it displays it and then of course hey that's not really clearing it why is that oh this one is oh of course I just need to of course sleeping at the wheel again yeah there we go that's what I really wanted to do right so let's go ahead and try this one more time and it clears out no still what did they do I'm cashing it but I want to clear the cache and then just I'm just trying to change this guy that's all I'm trying to do when the manifest oh manifest file okay so let's try this one more time yeah now you know why I hate that so much that is not dry at all is it okay try that see if that changes test one no still all right so something is weird here it's not updating this file anybody sees the problem this by the way is lexical scoping so we should still be able to get to it so that's fine actually I don't call check yeah but it did say alerts into the server though I did call check right here yeah I did so calling check and in fact it is doing sending to the server remember so when I go back and say test one right there it says send to server so it is calling this function now it worked all right okay don't you hit those kinds of headers you don't do anything and it works okay the browser probably was not just refreshing properly at this point okay so all right now the way did that what's the next thing of course to disconnect it right notice that in this case I'm not going to refresh the page not this page I'm not going to refresh the page so let's try a couple of more examples here so three and then let's put one more here for looks like the storage that clear is not actually going through properly so anyways so right there is the value there we go that worked now but I'm not going to refresh the page but I'm just turning off the server alone that's all I did so I go back here and say three down one more time now I am disconnected by the way and you don't see the pop-up anymore because obviously we are not connected at this time so we'll go ahead and put a few more another three down in this case and you can see that's working as well you can see the gets are failing right here right the gets are being sent to the server it's complaining about it which means it's making the request at this time and we'll try this one more time yet another three down and of course I go back and turn on my server at this time and let's go back here and go ahead and click on report and now it is sending the server it clears of the cache so I'm really hoping that there will be better ways to handle this but this was a fairly you know simple but no but not too much effort but not so elegant approach and we can figure out so let's summarize what we did so far we wanted to make the application offline obviously in this case and the reason for making an application offline is while native applications have the pleasure of running natively HTML5 of course gives us the connectivity to the server but with the power of HTML5 it would be really cool to be able to have the facilities offline as well well HTML5 standards are trying to provide this with an offline service the idea basically is a combination of two things you need to have the ability to store the data locally first of all like I mentioned I don't care what you choose to store because that is independent of what we are trying to do here and as an example I stored it in the local storage you can look at index DB if you are interested you could look at file system API a lot of these are still evolving and various browsers supported to various you know degree so depending on what your need is and what your constraints are pick and choose what makes sense for you to store on the local site and the second thing I mentioned is to know that you are connected or not so you can know when to push the request to the server versus keeping things locally when designing the application you have to carefully craft what makes sense to be local versus what can what is available when you are connected to the server that is something you have to do design wise now it would be nice to give as many capabilities as possible to the clients who are users who are using the application but clearly certain things are going to be only available when you are connected to the server now it's our design choice to craft the application in a way that a limited you know feature and yet useful feature is available in disconnected mode and then when they are connected you can bring in other features you want this to be as graceful as you can have it so when the application is in the offline mode you want to gradually provide services but also kind of hint the user saying this can be accessed if you are connected but try to keep those fairly limited but be very smooth in the operation then what we did was of course we created a manifest file the manifest file is a way for you to communicate your intent to the browser one of the things to keep in mind is depending on the server you are using you need to make sure the server is considering the manifest file as a manifest file itself so make sure the mind type is working properly you could use some tools like curl or other tools to go back and look at the file type and make sure that's working properly and once you write the manifest file you are tying the manifest file to the HTML file at the very top level file that's the only file that needs to have this by the way an entry file an index file what have you and that can specify what file you are referring to and that way you know what you are going to be pulling in the minute the browser sees this it downloads the related files obviously as you can see here but what is it really download that you manage by specifying cache basically you are saying these are the things I want to cache and then you can also define fall back where you can say if a request comes for this file then go ahead and use this other file and of course it's smart enough to know that has to cache the offline files as well so you don't have to duplicate that information in the cache you saw that work before without me putting off functions over here network basically is to say where what files should go to the network you can give a list of files here and if you do put a list of files here it will always go to the network for those files even if those files are stored locally but of course you can put other files like an asterisk here saying for all the files not listed in here just go to the server in this case that's another way to configure it and then once we do this of course in the function you have to have a way to detect whether you are connected or not this area is a bit sticky right now so you got to kind of work through the differences but I used one simple way here to detect for connectivity by just making an Ajax request once again if you're using something like jQuery you will make this a lot more simpler than this as well so you don't have to put as much effort to write this but I hope this kind of gives you the clarity without depending on any tool so you can really see the bare minimum of what's involved in this case and of course the last thing of course in this case is to store the data and to know when you are connected and deal with stuff and like I mentioned I care a lot about simplicity and also I'm a very lazy person lazy usually means efficiency though some people don't agree with it but the point is just make something work first then come back and improve it so you can get a quick feedback and say hey is this what you are looking for does this make sense and then you can come back and improve is it good in performance or not well yes you need to be mindful of those things but remember the good old saying premature optimization is the root of all evil so don't try to solve problems all at one time which doesn't exist right now so keep it simple so I stored everything locally right now and so when you are giving a new data I just add the data locally as well and then I check connectivity and I push it to the server at this time and that's all I'm doing here so this is essentially this part of the standard seems to work fairly okay most of the browsers are dealing with this at a reasonable level I can vouch for how this does in Firefox I can vouch for how this does in Chrome there are a few rough edges from time to time it does mess up a few things but those are things that would get evolved if you are required to use other browsers that will remain unnamed over here grow up and look at other browsers now just kidding okay so but you do have to make sure it's working in these other browsers absolutely but that's that's something you have to deal with with all HTML5 standards this is no exception at all that is all I have any questions comments before I wrap this up please where are the events fired you're saying sorry could you rephrase the question for me yes oh I got you so the question is when you are going offline and online events needs to be fired where are those events being fired I have not registered for any events but the source would be in the app cached to take a look at and in this case of course if I go back and see let's see what what these guys has over here it says on cached on checking where it's going to do the checking so on checking is an event you want to look for as well there is on downloading on error on no update and absolute on progress on update ready so these are all the only events that are given to you by the app cached mechanism the browser of course takes care of these automatically but if you want to do this programmatically you would start with an update command and the update command will tell you whether there is an update or not so in other words the question is how do you deal with the events of going offline and online the short answer is the browser doesn't give you those events either you let the browser deal with this all by itself or you programmatically handle this by using the commands like update on the application cache so either the browser does its job or you do this programmatically they are kind of orthogonal to each other any other questions or comments well I'm going to go offline then thank you
 Let's get started. Welcome to the session on developing offline  applications with HTML5. I'll get started as we settle down, so just bear with people  trying to get in. Let's talk a little bit about what we're going  to do here today. My name is Venkat Subramaniam. I'm going to talk about developing offline  applications. Essentially, I want to talk a little bit  about what we're going to do, why we want to do these kinds of applications. And then  I'll get into quite a bit of code. I don't use any slides anymore, so I'm going to just  talk about it and then write some code, play with it, and that's what we're going to do  here. Best time to ask a question or make a comment  is when you have it, so please don't wait till the end. If you do have a question, please  do draw my attention because the lights here are blinding. I can't see you if you do have  a question, so wave at me or just start speaking, and once you grab my attention, I'll be more  than happy to listen to you. So why bother to create offline applications?  Well it turns out that mobile devices have taken over pretty significantly over the past,  I would say five, six years. Things have been changing rapidly, and today we carry more power,  computing power on our hands than we ever imagined. Each of us carry multiple of these  devices with us in various forms, and this is only going to explode. So as time changes,  we definitely want to be able to have these devices. So how do we develop applications?  Well one option clearly was to develop native applications. Native applications are great,  they give us the power, they give us the strength of the platform, but one of the problems,  or several of the problems is we have to deploy the native applications first of all. You  are kind of bound to the platform you're on with multiple different platforms emerging,  it really becomes one of the problems as well. Well we have taken the time to learn about  the power of the web, it's been really interesting to develop applications on the web. What if  we can really develop applications that can run on mobile devices as well? Well not going  into the strengths of HTML5 here, definitely HTML5 has kind of convinced the world that  there is an option to consider, there's pros and cons to it definitely. But one of the  main differences between offline applications and native applications is that native applications  can run both offline and online because you can run them locally. But with HTML5 obviously  we have to be connected to the web, so if you are using a mobile device and you're walking  around what if you don't have connectivity? For example, this is such a beautiful country,  I've enjoyed traveling this country, but there are several spots I go to where there's absolutely  no connection on my mobile device. I myself live in Colorado and we travel quite a bit  up to the mountains and there's a lot of times we don't have any connectivity at all. Some  of my clients into areas where their employees go into remote locations, they may go into  a location where there is not much connectivity, they may go into refineries, they may go into  drilling areas offshore and they want to be able to collect data continuously but if they  want to be using HTML5 they won't have connectivity, how do they go about doing it? Well this is  where the offline applications really help. So with offline applications we can interact  with the application to a certain extent and be able to collect information from the user  and then transmit it. I've got some clients who are heavily using this particular feature  because their clients who are using their applications are highly mobile, they're out  on the streets constantly and they have to collect information about various things happening.  So let's imagine for a minute that I'm a park ranger and I go out in the park in the mountains  and I want to report about various things I'm seeing in the park but I want to have a mobile  application on my hand to use. So how does this really work? The main idea really is  that your application first connects to the web, well the user connects to the web, downloads  the application and the application automatically caches on the local machine whether it's  a desktop or a tablet PC or mostly a mobile device and once the application is cached  on to the local machine the user shouldn't really care about whether they are connected  or not. They interact with the application and as and when the application gains connectivity  to the web it can push the data back and to give a certain amount of behavior to the users.  Now clearly there are certain benefits or features you can only give when they are connected  but hopefully we can give a fairly decent amount of behavior and features for them to  use when they are disconnected as well. But before I talk about offline connectivity  and applications itself I want to spend some time talking about storage. I won't go into  too much detail about this but there are a few options to store data locally on your  system using HTML5 itself. This is extremely disputed right now, it's emerging standard  and you are developing application with HTML5. One of the common questions people ask me  is how do we deal with browser differences. I am using Firefox, I am using Chrome, I am  using this browser that I never want to name ever but what do I do with these kinds of  browsers right? Well I have got some good news for you, they are working really hard  to standardize and make sure these things work on every browser. So if you are keen  about having this work on every browser the good news for you is everything will work  just fine within the next 20 years. So but in the meantime right while we are developing  applications you still have to worry about those differences. But the one that seems  to work mostly today is a web storage. Basically the idea is you are storing something on  the local machine using a very simple key value pair. Let's take a look at an example  but before we do that let me quickly talk about a difference between a local storage  and session storage. Very quickly a session storage is a data you store on the local  machine but it's purely a transient data. The minute you leave the page or bring down  your browser that data is gone. So rather than having cookies to go to the server and  store the information on the server you can store it locally on your machine. On the other  hand local storage is a little bit more persistent. It's going to store on your local system,  you can quit your browser and come back and the information still is there and you can  continue to use it. Now how do you use a local storage? It's extremely simple so to understand  this I am going to create a very simple application here. So I have got a little HTML page and  nothing really fancy here and within this page I have a little input tag and it tells  me that autofocus is true and I am going to report issues. I am a park ranger walking  around. I want to report issue about a fallen tree or a road that is blocked by a tree.  What have you? So I want to really collect some information and send it to the server  but remember I could be offline at any time as I am driving through the mountains the  connectivity kind of keeps coming in and going. So what am I going to do? So in this case  of course I have a button where I am going to click on to report this little issue. I  also have a stored issues where I am going to display a list of issues that I have stored  right now just for our purpose so we can see that it is being stored locally on this machine.  And then of course in this case I am going to report that here into an ID called stored  issues. Now for this to work of course I have a little command a javascript I am going to  call. I am going to call this little save data and all that the save data does is it  takes two parameters. The value that I want to save and of course the span tag where I  want to display the rest of the information itself I am going to go ahead and store it.  So how would I go about using this information? So let's go ahead and connect to the page  itself right here. So right there is the page. So I need to create the function. So the function  I am interested in creating here is the save data function. So let's go ahead and create  the save data. So I have the save data. This is going to take basically a value or the data  that I want to store. But I also have the span tag to report what the error the messages  that have been stored so far is right. So a fairly simple amount of information to be  presented here as you can see. So that is what I am going to display, store the data  and then display it. But how would I go about using this information? So very simple you  can simply say local storage if you are interested in storing in local storage or you can use  session storage if you just want it to be temporary and into this page itself. So I am  going to go to the local storage. Well in the local storage I could ask for a count  of the number of issues. I could say issues count for example. And of course it is quite  likely this issues count doesn't exist at this point. So I could basically say local  storage issues count if it is valid otherwise just set it to a zero. So I can kind of keep  tab of the issues that I want to store by having a little counter. So at this point  it is fairly simple. I can say local storage and it is very easy to access it as you can  see. I can simply say issue plus and I can say issues count over here and this is going  to just store into a little hash map. So think of a local storage as just a little hash map  where you can dump things. Now clearly there are other benefits, other solutions and you  can use a database and stuff like that. But like I said those standards are evolving. Our  focus is really not on how to store the data but to really use this data once we store  it. So once I get the data what am I going to do? I want to store the data obviously  here but I also want to report back the data so we can use it. So let's go ahead and say  local storage issues count and of course I want to increment the issues count in this  case. So let's parse the integer for the local storage issues count and then let's go ahead  and add one to it so we can kind of keep track of the count of the data we have. Well at  this point we can simply say for every value in my collection obviously so I is less than  let's say the count itself. So in this case it's going to be the local storage.issues  count and of course I want to go through and loop through these values and display it so  I can simply say spend report over here. Well let's go ahead and initialize the spend reports  inner HTML and let's set it to a empty value to begin with and then we can simply say inner  HTML and I want to simply assign it to whatever data that I have on my hand so we could basically  put that into a little br and then put a data into it. So this is going to just populate  the data into the into the spend report itself so that's all I have done so far in this particular  example. So my saved data is fairly simple as you can see not really complicated and  I'm going to store it. Now the question is if you're connected you have to send the data  to the server if you're not connected you have to store it locally how do you go about  managing these differences. Well there are there's no real simple answer or single answer  to this but it's a choice that you have to make it's a design decision that you have  to make but I believe in keeping things extremely simple make it work make it right then come  back and improve it. So one suggestion I would have is just store it locally all the time  and if you're connected then push the data to the server that simplifies quite a bit  of effort in writing the code otherwise you're just sitting there and checking repeatedly  and then your logic gets duplicated you start violating the right principle you make Andy  very angry because you wrote about right principle so you don't want to go there at all right.  So the point really is that you don't want to really complicate things anymore than it  requires to be complicated. So I have this little function assuming that I wrote all  these correctly let's go ahead and see what this is going to do at this point. So I have  this little page I call the sample dot HTML and I'm going to say in this case of course  I'm connected to the server I'm going to say you know three down and I could give details  about what the tree where the tree was down and stuff like that we could definitely put  those information of course who expected the code to work the first time. So let's go back  and take a look at what I did anybody sees the error here. Yeah a little louder please  in what line number five. Okay there we go absolutely that would help so local storage  now he tells me he's been watching quietly all right so any other issues line 12 so let's  go ahead and fix in line 12 as well what did I do wrong there a little louder please that  is correct so in this case of course I want to go ahead and put the span of the local  storage and I want to ask for the issue in this case plus the value of I itself should  work right so basically the idea is to go back and get the data out and be able to display  it so let's say three down one more time and let's see if that does anything at all so  still there's issues what is the problem is it even getting here by the way of course  the word famous where to find this out right you know so we can see if it even comes to  this method right so let's go ahead and try it so once again try it okay so it's not even  coming into this function let's see why so this is the functions dot js let's make sure  I call this function correctly so I have the functions dot js being referred over here  let's go ahead and bring up the little debugger here and let's click on this oh there it is  now we just needed a fresh so there we go so not too bad we have these three things stored  you can see that it's storing it locally we could go back try again and say you know  road damage one more time you can see that you can see that it's being stored away and  there it is being stored so not too bad isn't it so alright we have this code little code  working but what about really going offline with it but before we do that a couple of  interesting things you can do this is stored on the client side you're on the mercy of  the users they can mess with it if they wanted to but let's take a look at what we can see  here real quick one of the real nice things about this is you could say here local storage  and you can kind of take a look at what's in the storage and that's the stuff that we  just stored as you can see into the local storage itself you can also go to the local  storage and you can say length for example that tells you I got five elements in this  particular case one is the count and the other four values you could also say local storage  over here for example and then you can ask him for the key values at a particular location  for example in this case it says if you zero and stuff like that so you can navigate through  these values of course when you are done with all of these if you wanted to programmatically  as well you could simply call clear in this case and that would blow away all the data  right so that basically can take things away from here and as you can see in this case  now we don't have any of the data only the road damage is there because I cleared out  everything else so this is basically a way to store data locally like I mentioned there  are other ways to do this as well so pick your poison depending on what you are trying  to do but how about going offline itself well the essential aspect of this is I am going  to go back to this page over here and I have to tell the browser this is going to be in  an offline mode how do I do this well the way you do this is by specifying a manifest  file well there are a few complications we have to be careful about the first complication  is let's go ahead and start with the little manifest file to begin with by the way so  I am going to go ahead and create a manifest file right here so the manifest file I am  going to create right now I have only these two files here as you can see but I am going  to go ahead and create a file what is the file name I want to create I will call it  my manifest as it is so useful name right and dot I will say app cache over here so  I am going to really create a little file that is going to be configured over here so  one of the challenges we will run into when you create an app cache file like this is  just because you name it as app cache doesn't mean it is an app cache you really need to  make sure it really is treated as an app cache we could spend a lot of time wasting your  time fixing this but one of the things you can quickly do is use the friendly neighborhood  curl command so curl minus I over here and I am going to go to my location over here  localhost for example and then I am going to say in this case offline and I am going  to say my manifest manifest and then dot app cache that is the file I just touched over  there a minute ago right so if I ask for this it says 200 okay which is a good news but pay  attention to the last line over here it says text slash pay I was going to say a pain it  is a pain as well by the way it is a text slash a plane meaning the browser doesn't  have a clue what you are talking about when it downloads this file at this time so to  fix this what you have to do is you have to configure your web server properly so you  are going to go to the mine types in your web server and you need to tell the web server  that an app cache actually is a cache manifest file and only then will it send the appropriate  information so I went ahead and modified that it is a good idea to restart the server so  I restarted the server right there so now let's go ahead and run the curl command one  more time well not quite so let's try this one more time still not let's make sure that  I have actually modified it not just lying to you so let's go ahead and take a look at  it yep I did say it is an app cache file let's make sure I spelled it correctly app cache  yep so let me go ahead and start the server just one more time to make sure and I hope  it is really actually restarting it so get back to this and see if it is telling us still  not okay so let me go to the command line and try this one more time so this is restart  so let's go to start and I am going to run this manually here that's all I am doing so  I already loaded no wonder that's why I need to use a restart alright this is what happens  if you are in sleep and try to edit scripts okay let me do a restart over here and hopefully  that takes care of restarting it alright let's try this one more time so I restarted the server  and let's go ahead and try this much better so we got this app cache file configured  so the moral of the story is make sure your server is reporting the app cache file as  an app cache file itself and rather than monkeying with it we can use tools to make sure it really  is working as we would expect it to work great so now that that part is done what do I want  to do with the manifest file itself let me go ahead and bring the manifest file on my  hands so what am I going to do with the manifest file first of all the manifest file has to  have one entry in the very top and that entry is cache manifest make sure this is the first  entry otherwise you are going to make the browser extremely angry and you don't want  to do that so the next thing of course in this case is I have got to tell him what the  cache itself is going to be meaning when the browser downloads this file this file is instructing  the browser what files it needs to cache locally on the machine or the device itself so I want  to cache sample.html I also want to cache functions. excuse me functions actually I  don't need to cache functions I am going to leave that for a minute so just the sample.html  I want to cache the next thing I am going to say here is a fallback now what does the  fallback say the fallback says if a request comes for functions.js by the way which is  the file I just wrote a few minutes ago then send the request to offfunctions.js so I am  actually asking him to map saying if you are connected use functions.js if you are offline  rather than using functions.js quietly replace the content of offfunctions.js instead of  functions.js so you are providing a little mapping and the last thing you are going to  do here is the network that you are going to specify and in this particular context  all you are saying is for every file that is not cached simply go to the network and  get it for me and you can configure this even more with specific file names, directory names,  what have you you can specify those details as you please. so that is my manifest file  that I have created so far at this time but of course we have to link this to the system  at this point how am I going to do that so in order to do this all that I have to do  is go up here and simply say what the manifest file is at the very top so I am going to say  manifest equals mymanifest.appcache and I have linked it so let's go ahead and save  this file I don't have the off file yet so it's a good idea to go ahead and create that  file so let me go ahead and create that file so this is going to be I am going to say functions.js  but I am going to call it offfunctions.js but I am going to simply put the content of  functions.js into offfunctions.js that's all I have done so if I go back to the offfunctions.js  file it is exactly the content we had a few minutes ago but what am I going to do in the  offfunctions.js well in this particular case I am going to just remove all of these for  a minute and simply alert here and say sending data to server now of course as programmers  we know how to write javascript code to collect the data from the local storage because you  saw me already do that by getting the data and displaying it and now you can send it  through an Ajax call to a server we don't have to worry about that part here because  you can deal with the Ajax part separately well that's great so we can go ahead and send  this to the server and that would just tell us that we are sending it to the server versus  using it locally notice I have two files now functions.js which is the online version and  offfunctions.js which is the offline version make sense so far okay fairly simple so far  of course assuming that I wrote all this correctly we should be able to see this in work now  notice in this case I have the console up here and running because it's really helpful  to see that this actually is going to work as this is being executed so I am going to  refresh this page at this time and I want this to bring in the content of the page and  display it for us so let me make sure that I have saved this over here and let's also  go ahead and do one more thing I'm going to just restart the server just to be sure and  let's get back to this and see if it's pulling this back in as I am making a request for  this particular page itself looks like it's not refreshing this back let's see why so  sometimes it just takes a little bit of effort for it to see the change itself so let me  go ahead and grab this for a minute let's quit this let's come back to Chrome here and  try this one more time and let's bring the console here so we can actually look at it  still not alright so let me make sure I had the file name correctly my manifest app cache  is the file I had over here let me make sure that's the name I gave for the file here as  well and it seems to be correct and does anybody see any other issues that I have kind of stumbled  into here I'm using the file protocol did I do that and I am good catch so yes so don't  do that so HTTP right and of course in this case local and I have to just say offline  over here good eyes by the way excellent so right there that's exactly what I wanted to  show this also shows that I'm not smoking something behind here it's actually real code  so you can notice that in this particular case it is actually downloading the file and  you can see what it is doing so we can kind of look at what's going on here and it's downloading  the files and displaying the content right here and that's basically the output right  now let's go ahead and try this real quick we'll say tree down here I click on report  it says sending data to server obviously because we are connected now the question is we want  to try this with a disconnected mode how do we do that you would think that the chef to  be really simple isn't it but no in software we never make anything simple so your browser  cannot detect that it's not connected to the server now you may say but but but Google  says there are you know methods available to do it yes it does say you know I really love  googling because when you Google you realize you're not the only clown sitting there with  not an answer there are 20,000 more people struggling with the same problem right you  don't feel so lonely anymore but the problem is it still doesn't work so after a few hours  of effort you realize none of those solutions actually work so I'm going to ignore the problem  for a few minutes and I'll come back to that a little bit later so all that I'm going to  do right now is simply I'm going to stop my server so my server has been stopped and  I have to refresh this page right now I promise I'll solve this problem later on but one problem  at a time so I refresh the page notice it's complaining it couldn't go to the server  and download the manifest that's a good thing but it has cached stuff for us so I'm going  to say here three down one more time click on the report and you can see that it's storing  locally you saw that little message pop up and we can say another three down there's  a bad day in the forest and you can see that it's another one down and another one down  and another one down and of course if I turn back my server at this point assuming that  I'm clicking the right buttons again there we go and I refresh the page this time and  I'm going to say you know hello there and click on the report it's goes back to the  server as you can see so of course in this case what happened to the local data well  in this case of course what I would like to do is go back to the functions dot js at this  time and since I'm sending the data to the server I want to say local storage dot clear  because the assumption is that you push the data to the server you can clear it locally  at this point isn't it so that's all I'm doing at this point so let's go ahead and refresh  this page and then let's go ahead and click on it let's go ahead and take a look at the  local storage by the way just to see if it's gone at this point so let's go to local storage  and display it you can see that it's empty right now and of course if I turn it back  to offline mode it will start storing data locally so we looked at configuring the server  we looked at how to present these data and when you're working on this by the way it's  probably a good idea to pair up with somebody with a good eyesight like the person who pointed  out the problem to me so that really helps to debug the issues and find out what's going  on so so far so good so a fairly simple solution we have an offline mode and online mode we  saw how to switch between them we haven't quite fixed the problem of switching itself  but assuming we know how to find out we have switched the caching happens and things are  working fairly well great but next the question is how do we update stuff so let's go back  to this code for a second notice in this case in the offline function I'm going to go back  to the offline function and I'm going to just put an alert statement right here alert and  I'm going to say in offline just for us to see so I hit the save button now I go back  to the program refresh the program and I'm going to go ahead and enter some data here  click on it it says going to the server that's great I'm going to go ahead and put the server  tone off the server I'm going to refresh this one more time and this time of course I'm  going to go ahead and enter a data and click on it quite did not see that message what's  going on well it turns out you may have hundreds of files potentially on your server and it's  not going to be very efficient for the browser to go query all the files and say has any  of the files been modified so to solve the problem they decided the only time they're  going to refresh your cache locally is of the manifest file has actually been modified  now here comes a small problem we have most of the time we may be editing improving features  fixing bugs in other files and we don't have a reason to change the manifest file well  tough luck there's not a whole lot you can do about it.  So what you do when solutions are not clear what you do you always come up with clever  solutions which really means we are stupid right so notice what I'm going to do I'm  going to go to the manifest file and I'm going to simply put a comment in here and I'm going  to say version one and you can keep tweaking the stupid number over and over right so in  this case I said a version one in this case you can put other messages by the way feel  free to put your emotions on this because it doesn't use that information anyways so  this time of course I go ahead and start my server one more time I'm going to refresh  the page notice it brought back the cache one more time and of course in this case I'm  going to use it in the online mode right now go ahead and turn off the server real quick  I'm going to now go back here and refresh the page this time and of course try this in the  offline mode you can see the alert in the offline mode shows us that it brought the application  back not a very pleasant situation but you have to keep the little file being tweaked  over and over but you don't have to be sequential you can up the number lower the number put  other things in there whatever it is you know talk about your favorite movie in there if  you want it doesn't matter right so the point really is that you have some content in there  to specify okay that's great but I want to kind of take a little bit more control because  I've got a local data and my application has gone through a drastic change and in my second  version of my application I want to store data very differently but I'm really scared  because the application data is different I want to make sure I don't lose the data  the user has already stored how do I deal with it well it turns out we don't have to  worry so much about it because we can use event handlers to get to this information  fairly easily so how do we go about getting this information really so if you notice I'm  going to show you a couple of ways to do it programmatically but I'm lazy here to write  code right now so I'm going to just go ahead and write the code right here within within  the Chrome itself and of course I can write the code here we can obviously write the code  in our JavaScript and reuse it so all that I'm going to do here is to say window dot  and I'm going to ask him to bring in app cache or application cache over here and that's  an object with the enormous amount of information valuable to us and you can go query this and  ask for details in this case one information I'm going to ask him is the status information  about this itself and notice it tells me the status is one of course one is a very useful  number it's very clear and one actually means it's idle that's what it means right so okay  this is idle what can I do I can then say for example window dot application cache and  I can say update now so this is a programmatic way to ask for it let me make sure that I  actually am connected by the way that would really help so let's go ahead and connect  it let's go ahead and refresh the page really quickly and then of course I'm going to do  the same thing now ask for the status do an update and now that I finished an update I  ask for a status and it tells me still it's idle but of course if there was an update  really on the server change the number beautiful number and come back here and try this update  one more time this is of course you only do this if you really care to do this programmatically  that is and I'm going to ask for a status this time notice it's not a one it is four  because it found out that there is an update available and it is ready to do the update  now we don't have to do this programmatically it does it manually automatically as we saw  but this only gives you more control programmatically if you choose to use it so at this time I can  simply go back to this and say simply I can say swap cache and ask him to swap the cache  itself and I can ask for the status notice it no longer four because it has updated  locally and the status went back to idle now you can write code for these things very easily  and you can of course you want to handle these through events what kind of event will you  handle through if you go back over here you notice there are tons of events available  like on cached on checking on download error so simply register functions to it and you're  off to working with these data as you may please to use if you're interested in downloading  this code example and playing with it by the way you can download it from my website I'll  put up this link towards the end but if I don't please do remind me and I'll put this  up here and so you can download the code and play with it so we talked about a few things  quite a few things here in terms of the events and how you can listen to these events and  you can you know manipulate them you can write code at this point it's purely JavaScript  coding that you have to do to take care of these things well I did promise to you that  I will find a solution for one problem which is how do I know that I'm connected or not  connected well it turns out that's not that easy to find out you already saw the problem  here now notice in this example if I go back to this example here let me go back and try  this one more time for us to take a look at so in this case I have the page sitting here  and if I'm in online mode it's going to alert something if I'm in offline mode it updates  the data in the bottom so that's great I'm connected at this point I believe so let's  go ahead and say here test one it is sending the data to the server as you can see but  now I have disconnected so in other words I've actually stopped the server now I could  also go try to turn off my wireless network but that only is more disappointing because  it doesn't work so I wouldn't even bother doing that I just turned off the server in  this case but notice in this case if I go back and say test two it still is saying sending  data to the server of course if I was really trying to send the data to the server it would  have failed at this point and it would have complained at this point so what do we do  how do we know whether we are on the server or not until this point I kind of hit the  refresh button and I asked him to refresh it and it said oh I'm not connected anymore  but that's not the way to develop application you don't want the user to be refreshing  applications anyway and I really hate giving buttons where people have to press buttons  to do things and it becomes really not a good use case or user experience so what can I  do well there are quite a number of solutions that have been talked about on the web and  almost every solution ends by saying that's a great idea but it doesn't work and so what  do you do about this well actually it turns out there is a fairly simple solution that  we could actually use Ajax to the rescue so you can go use Ajax and you can ask Ajax to  go get a file and of course because we know Ajax always communicates asynchronously if  the file is not there it is going to give you a error so all that we have to do in our  code is store the data locally all the time why because it's done simple to do it but  after you finish storing the data locally simply let do a little ping for Ajax and say  hey Ajax do you have this file by the way well that solves the problem partially and it will  work really fine the very first time you try it the second time you try it it starts fooling  you now why is that that's because cleverly the browser caches the page you fetch and  the next time you make an Ajax call it says I already have it by the way why bother going  to the server now we are scratching our head well what how can we solve the problem well  here's another suggestion little query string to the end of the file by the way you are  fooling the browser it says oh gosh is the new resource I better you're shaking the head  yeah it is frustrating but I wish there was a better solution that I know and you basically  are sending the request automatically at this time and getting the response but of course  the beauty is this is a well-known problem and the standard will address it within the  time frame I mentioned earlier right so we will have a solution definitely so what can  we do to solve the problem here so I'm going to play with this a little bit with a quick  example then we will come back and solve this in this application real very easily so I'm  going to create a little file called the connected dot html and what am I going to do in the  connected file so let's go to connected dot html very trivial example here let's say this  is my button and I'm going to say on click and I'm going to simply say check but I want  to do a couple of things in the check so I'm going to say connected over here but I'm going  to perform two callbacks because we're using asynchronous call you could try to make this  sequential and synchronous but that is kind of really you know walking against the motive  of JavaScript so we can still keep it asynchronous by the way so I'm going to give him two functions  here one function simply alerts simply saying connected and the other function is going to  be right here and this function simply says you know I'm not connected so here is an alert  and I'm going to simply say not connected now of course I'm not caring about code quality  and all that here I'm just putting together a random example to show you how this works  so this can be done a lot better of course but what is the code for this let's go ahead  and dump that code here just for this particular exercise so what is this check method so here  is my check method and the check method or function is going to take two parameters for  us the first parameter is going to be a connected callback so we'll call it connected callback  and the second one is going to be not connected callback right so we can use really two callbacks  which can be called but how do we go about checking for this this actually is fairly  simple since we have done Ajax by the way if you're using jQuery or other libraries feel  free to use it I want to keep it very fairly simple so nothing really under the sleeves  so I'm going to simply say XHR equals new XML HTTP request object that's all I brought  in and XHR dot open and here comes a little trick by the way ask him to go get it and  just ask him to get the root itself who cares what you are getting we're not going to use  it anyways and then in this case I put a little question Q equals and then we'll simply throw  in a math dot random that to keep him confused along the way right so then once you do this  you simply say XHR dot send over here and just make a request to get the information  but of course we have to register for the event before we do this so we'll call it handler  equals function and in this function of course I have to register this one so we'll say XHR  dot on request on response status change isn't it equals and then this is the handle that  I want to provide or handler I want to provide for it by the way I'm quite capable of making  mistake over here so do let me know if I mistyped it but I really like this event by the way  because that's the event that is really longer than my last name so I love things that are  longer than my name so that is really awesome so what am I going to do here I'm going to  say XHR dot of course response status is what I'm interested in this case and if the response  status was a beautiful number of four meaning I'm done with the query then I can say over  here if XHR dot status is equal to a good 200 do a call back on connected call back  otherwise go ahead and call back on the not connected call back so just a little silly  little way to figure out whether you're connected or not without having to have the user intervention  that's all I'm doing here assuming I didn't make any mistakes writing this code let's go  ahead and try this one by the way it's called connected dot html so let me go ahead and say  connected dot html over here that's not a good name let's make sure I got this properly  here so this is called connected let's make sure I got the name correctly so right there  and let me make sure I put this in the right place seems like so let's go back here and  make sure I'm getting this file so local host offline and I'm going to say connected dot  html there we go still not anybody sees the problem but oh I what a picky audience they  expect the server to be running as well okay fine alright so let's go ahead and try this  you're absolutely right didn't realize I had turned off the server so right there it says  connected let's go ahead and click on connected now of course let's make sure that it's going  to respond back did I make any mistakes in these functions do you see any problems here  I always doubt this particular name by the way did I type this correctly is it good did  I do did I do check for the wrong value on ready state oh of course and is this also ready  state alright so on ready state I can never remember that by the way no matter how hard  I try and this is ready state alright so let's give it a try again alright it says connected  like right there let's go ahead and disconnect from the server real quick I'm not refreshing  the page this time at all it says not connected so that seems to have gone fine and with your  help I was able to fix that name over here so that's good now it's time to just put this  together how do we do this let's grab this function check by the way real quick I can  reuse this function so close this off and I'm going to do something a little different  than we did before I'm going to go back to the function of function dot j s real quick  now what I'm going to do is to simplify this greatly by the way and I'm going to first  of all copy the offline function to functions dot j s I'm going to completely remove the  offline function entirely here so that's gone so I only have the file sample the manifest  and functions are j s no fiddling with two files anymore just one file but how am I going  to use this so I'm going to go back to this functions dot j s now in the functions dot  j s I'm copying this check function and honestly I don't care about the offline mode at this  point so I even removed that part entirely here and I'm going to ignore if it is not  connected so what is he going to do check simply is going to or you can give a better  name for this obviously and the check is basically going to call this connected callback function  if it is connected otherwise we just do a no up now what am I going to do in the save  data I'm going to come in right over here and at the very end of this by the way I'm  going to say go ahead and check for connectivity and if you are connected by the way I want  to alert saying send to server at this point and write the code you wanted to do for sending  to the server and then local storage dot clear because we have sent the data right so notice  that I'm not really fiddling with and if an else condition all the time I'm just storing  everything locally all the time and if I'm connected I send it back otherwise take it  easy again this may or may not serve your specific needs but it's a design consideration  you have to go through I find this to be a fairly simple thing to do rather than maintaining  multiple files and fiddling with things so all that is yet to be done is to just go ahead  and try this of course one more thing now I have to there's a bug already here man so  let's go ahead and try this one more time so manifest file I go back to this file this  time now notice I don't care about the fallback in this case right so I'm going to remove  this fallback and I'm going to just catch the function as well because if I'm connected  or not who cares I just need to be you know having this file it takes care of the connectivity  so I'm just caching that file as well that's all I did so let's pay you know respect to  the manifest guards by increasing that number and now that we have added to that let's go  ahead and try this so let me make sure I've connected to the server so that is started  the server let me go back here and ask for the sample dot html one more time it is downloading  the file as you can see right here and now we are in the connected mode at this point  obviously so what am I going to do now I'm going to try a few examples here so let's  go ahead and say test one and click on the report it is notice it is putting it here  for a moment it is saying sending to the server I click on okay and that should have been  cleared by now by the way but of course I did not go back and update the file at this  time so that is not sending this so just for our sakes I will just go ahead and let's do  this actually right update this because I have to update the span tag as well isn't it so  that's a little not dry but that's okay we can figure it out later on refactoring can  take care of that so I'm clearing this of course it would help to clear first as well  that bug was telling me something obviously there right so let's go ahead and try this  one more time I'm going to say test one click on it it displays it and then of course hey  that's not really clearing it why is that oh this one is oh of course I just need to  of course sleeping at the wheel again yeah there we go that's what I really wanted to  do right so let's go ahead and try this one more time and it clears out no still what did  they do I'm cashing it but I want to clear the cache and then just I'm just trying to  change this guy that's all I'm trying to do when the manifest oh manifest file okay so  let's try this one more time yeah now you know why I hate that so much that is not dry at  all is it okay try that see if that changes test one no still all right so something is  weird here it's not updating this file anybody sees the problem this by the way is lexical  scoping so we should still be able to get to it so that's fine actually I don't call  check yeah but it did say alerts into the server though I did call check right here yeah I did  so calling check and in fact it is doing sending to the server remember so when I go back and  say test one right there it says send to server so it is calling this function now it worked  all right okay don't you hit those kinds of headers you don't do anything and it works  okay the browser probably was not just refreshing properly at this point okay so all right now  the way did that what's the next thing of course to disconnect it right notice that in this  case I'm not going to refresh the page not this page I'm not going to refresh the page  so let's try a couple of more examples here so three and then let's put one more here  for looks like the storage that clear is not actually going through properly so anyways  so right there is the value there we go that worked now but I'm not going to refresh the  page but I'm just turning off the server alone that's all I did so I go back here and say  three down one more time now I am disconnected by the way and you don't see the pop-up anymore  because obviously we are not connected at this time so we'll go ahead and put a few more  another three down in this case and you can see that's working as well you can see the  gets are failing right here right the gets are being sent to the server it's complaining  about it which means it's making the request at this time and we'll try this one more time  yet another three down and of course I go back and turn on my server at this time and  let's go back here and go ahead and click on report and now it is sending the server  it clears of the cache so I'm really hoping that there will be better ways to handle this  but this was a fairly you know simple but no but not too much effort but not so elegant  approach and we can figure out so let's summarize what we did so far we wanted to make the application  offline obviously in this case and the reason for making an application offline is while  native applications have the pleasure of running natively HTML5 of course gives us the connectivity  to the server but with the power of HTML5 it would be really cool to be able to have  the facilities offline as well well HTML5 standards are trying to provide this with an  offline service the idea basically is a combination of two things you need to have the ability  to store the data locally first of all like I mentioned I don't care what you choose to  store because that is independent of what we are trying to do here and as an example  I stored it in the local storage you can look at index DB if you are interested you could  look at file system API a lot of these are still evolving and various browsers supported  to various you know degree so depending on what your need is and what your constraints  are pick and choose what makes sense for you to store on the local site and the second  thing I mentioned is to know that you are connected or not so you can know when to push  the request to the server versus keeping things locally when designing the application you  have to carefully craft what makes sense to be local versus what can what is available  when you are connected to the server that is something you have to do design wise now  it would be nice to give as many capabilities as possible to the clients who are users who  are using the application but clearly certain things are going to be only available when  you are connected to the server now it's our design choice to craft the application in  a way that a limited you know feature and yet useful feature is available in disconnected  mode and then when they are connected you can bring in other features you want this to be  as graceful as you can have it so when the application is in the offline mode you want  to gradually provide services but also kind of hint the user saying this can be accessed  if you are connected but try to keep those fairly limited but be very smooth in the operation  then what we did was of course we created a manifest file the manifest file is a way  for you to communicate your intent to the browser one of the things to keep in mind is  depending on the server you are using you need to make sure the server is considering  the manifest file as a manifest file itself so make sure the mind type is working properly  you could use some tools like curl or other tools to go back and look at the file type  and make sure that's working properly and once you write the manifest file you are  tying the manifest file to the HTML file at the very top level file that's the only file  that needs to have this by the way an entry file an index file what have you and that  can specify what file you are referring to and that way you know what you are going to  be pulling in the minute the browser sees this it downloads the related files obviously  as you can see here but what is it really download that you manage by specifying cache  basically you are saying these are the things I want to cache and then you can also define  fall back where you can say if a request comes for this file then go ahead and use this other  file and of course it's smart enough to know that has to cache the offline files as well  so you don't have to duplicate that information in the cache you saw that work before without  me putting off functions over here network basically is to say where what files should  go to the network you can give a list of files here and if you do put a list of files here  it will always go to the network for those files even if those files are stored locally  but of course you can put other files like an asterisk here saying for all the files  not listed in here just go to the server in this case that's another way to configure  it and then once we do this of course in the function you have to have a way to detect whether  you are connected or not this area is a bit sticky right now so you got to kind of work  through the differences but I used one simple way here to detect for connectivity by just  making an Ajax request once again if you're using something like jQuery you will make  this a lot more simpler than this as well so you don't have to put as much effort to  write this but I hope this kind of gives you the clarity without depending on any tool so  you can really see the bare minimum of what's involved in this case and of course the last  thing of course in this case is to store the data and to know when you are connected and  deal with stuff and like I mentioned I care a lot about simplicity and also I'm a very  lazy person lazy usually means efficiency though some people don't agree with it but  the point is just make something work first then come back and improve it so you can get  a quick feedback and say hey is this what you are looking for does this make sense and  then you can come back and improve is it good in performance or not well yes you need to  be mindful of those things but remember the good old saying premature optimization is  the root of all evil so don't try to solve problems all at one time which doesn't exist  right now so keep it simple so I stored everything locally right now and so when you are giving  a new data I just add the data locally as well and then I check connectivity and I push  it to the server at this time and that's all I'm doing here so this is essentially this  part of the standard seems to work fairly okay most of the browsers are dealing with  this at a reasonable level I can vouch for how this does in Firefox I can vouch for how  this does in Chrome there are a few rough edges from time to time it does mess up a few things  but those are things that would get evolved if you are required to use other browsers  that will remain unnamed over here grow up and look at other browsers now just kidding  okay so but you do have to make sure it's working in these other browsers absolutely  but that's that's something you have to deal with with all HTML5 standards this is no exception  at all that is all I have any questions comments before I wrap this up please where are the  events fired you're saying sorry could you rephrase the question for me  yes oh I got you so the question is when you are going offline and online events needs  to be fired where are those events being fired I have not registered for any events but the  source would be in the app cached to take a look at and in this case of course if I go  back and see let's see what what these guys has over here it says on cached on checking  where it's going to do the checking so on checking is an event you want to look for  as well there is on downloading on error on no update and absolute on progress on update  ready so these are all the only events that are given to you by the app cached mechanism  the browser of course takes care of these automatically but if you want to do this programmatically  you would start with an update command and the update command will tell you whether there  is an update or not so in other words the question is how do you deal with the events  of going offline and online the short answer is the browser doesn't give you those events  either you let the browser deal with this all by itself or you programmatically handle  this by using the commands like update on the application cache so either the browser  does its job or you do this programmatically they are kind of orthogonal to each other  any other questions or comments well I'm going to go offline then thank you
Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_0_107.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_108_6959.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_6960_7007.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_7008_10943.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_10944_11375.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_11376_17039.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_17040_19583.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_19584_20459.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_20460_20507.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_20508_22127.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_22128_22427.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_22428_22847.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_22848_23615.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_23616_23663.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_23664_23759.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_23760_23939.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_23940_25223.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_25224_25835.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_25836_25991.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_25992_26039.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_26040_27107.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_27108_27755.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_27756_27899.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_27900_28019.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_28020_28331.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_28332_28427.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_28428_29015.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_29016_29123.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_29124_29843.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_29844_29951.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_29952_30587.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_30588_30695.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_30696_30971.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_30972_31319.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_31320_31691.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_31692_33299.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_33300_33419.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_33420_33599.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_33600_33863.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_33864_34235.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_34236_34343.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_34344_39011.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_39012_40043.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_40044_43259.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_43260_43607.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_43608_44555.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_44556_44831.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_44832_45299.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_45300_47375.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_47376_47711.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_47712_48095.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_48096_48191.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_48192_48335.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_48336_49127.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_49128_53711.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_53712_53951.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_53952_59387.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_59388_59615.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_59616_62339.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_62340_62915.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_62916_79571.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_79572_80699.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_80700_81203.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_81204_83219.png Venkat_Subramaniam_-_Developing_Offline_Applications_with_HTML_5-68226772_83220_83312.png