Video: Offline workingIn this lesson we're going to take a look at offline working in a small five, offline working is ideal in mobile applications where Internet connectivity is unreliable. The way it works is in your webpage you specify a list of other files that your going to need during your browsing session so when the webpage is first loaded it can also fetch immediatly all the other files that might be neccessary. That means, if the Internet connection is lost later on, it doesn't matter. Because you've already grabbed the files that you want. In this way, you can give the user some kind of limited functionality until the Internet connection becomes available again.
- Setting the scene
Viewers: in countries Watching now:
In this course, part of his series of titles on HTML5 and CSS3, author and expert Andy Olsen looks at advanced topics like geolocation, mobile development, web sockets, Web SQL, and web workers. You'll also learn how to communicate between pages downloaded from different servers and how to use the new Ajax features in XMLHttpRequest Level 2. After completing this workshop, developers be well equipped to start utilizing the powerful features of HTML5.
- Using the Communications API
- Understanding geolocation
- Getting and watching the current position
- Using web workers and WebSockets
- Implementing mobile web user interfaces
- Managing data in a mobile web application
- Working offline
- Using Web SQL
- Using drag-and-drop
In this lesson we're going to take a look at offline working in a small five, offline working is ideal in mobile applications where Internet connectivity is unreliable. The way it works is in your webpage you specify a list of other files that your going to need during your browsing session so when the webpage is first loaded it can also fetch immediatly all the other files that might be neccessary. That means, if the Internet connection is lost later on, it doesn't matter. Because you've already grabbed the files that you want. In this way, you can give the user some kind of limited functionality until the Internet connection becomes available again.
So we'll have a look at two versions of an application. The first one, online only app (INAUDIBLE) HTML, will only work when we have a live Internet connection. And then we'll see an improved version called on offline app for HTML. This file will work whether you're connected or disconnected. And the reason is because it references something called a manifest file. Which is this file here, countries.appcache. .appcache is the standard file extension nowadays for manifest files for HTML 5 offline working. It references all the files to be downloaded, and these are the image files that are going to be downloaded on start-up, effectively, for the online and offline version of the web application.
So if you want to follow along, make sure that you copy these files onto your web server. And then in the browser, I've already opened the application that works only when we have an online connection. So the idea is that I can select the items from the list here, when I select an item, it says, "An HTTP request in real time (UNKNOWN) server, select and appropriate image file." So its just selected or just requested, this file from the web server. Lots of that works, because we have a live Internet connection at the moment, likewise, if I choose the second one, it's just downloaded the China flag.
That's okay. If you have an Internet connection. But if you don't have an Internet connection, then obviously it's not going to work. So, to illustrate that, I'm going to shut off my web server. Obviously the way that you do that, depends on which particular web server you're using. I'm using Microsoft IAS. And this is the command that you need to execute to bring up the IAS manager. If you run the inet manager too, like so. This is the IAS manager. And as you can see on the right hand side here, there's a button, which allows me to stop the web server.
So I click that now. So the web server is now no longer running. If I go back into my browser, and I try to select another file, now this doesn't work. It tried to send an HTTP request to the web server. The web server isn't running, so there was no capability to fetch restock png in real time. Okay, now, I'm going to look at a version of application, that'll work properly, so first of all, I'm just going to start my web server again, so the web server is now started.
And back in the browser, in order for this to be a genuine test, I'm going to clear any cache that might have been built up already, in my browser. And again the way you do that, depends on which particular browser you're using. In Chrome, you can go to the spanner, here, and select Options. And then in the options window, you select Under the Hood, and then, Clear Browsing Data. So I'm going to browse anything just in case, that I've downloaded in the last week.
I'll clear browsing data, and then I'll just close this Options window here. So at the moment, nothing is cached in my browser window. I'm going to open another tab, and this time, I'm going to open the version of the web page that will work online or offline. So, it's downloaded the web page. And also, due to the manifest file, it's grabbed any other image that it might need.
So, the images have already been downloaded. Obviously you can't see them yet. But they are cached now in the browser. So to prove that, I'm going to go back to the web server, and I'm going to stop the web server. So the web server is now stopped. And I go back into the browser window, and even though there's no Internet connection now, I can still download these files. So, that wasn't issuing a live http request.
That was using a file that had previously been cached. As soon as I opened this web page, initially. So, I could be on a train or in a tunnel and the application would still be working because it's already loaded the files, that it might need. There are various techniques when you specify in the manifest contents. And I'll show you that when we look at the code. For the first few items, each of these items here, Brazil, China, Greece, and Norway. I've setup my Manifest file, so that those files are preloaded initially.
But I've done something different for illustration purposes for some of the other ones. If I select Spain, I've setup a different rule to say, well that's the fallback file. I have a fallback file here to say, the real file Spain.png isn't available, instead you can use this file instead. So you have that option, as well. You can give the user an alternative file in the case where you're working in offline mode, you can give them a different file that they might want to use instead. And I've done the same for the USA and for Wales. Now, if I go back onto online mode, I'll start my server again. So the web server is now running.
I'll go back and in (INAUDIBLE) I'll select Spain, and USA, and Wales. That's the fall back file that we've cached in the client. Okay, so let's take a look at the code. going to go into (INAUDIBLE) edit. This is the version of the application, that works offline and online. So, I'll just show you the key, point here, in order to support offline work then, in your HTML tag, you must specify a Manifest option.
And the Manifest option specifies the name of your Manifest file. Countries.appcache is the name of my Manifest file in my web publishing folder. I'll just remind you of that. In my web publishing folder, that's the file that we've just referenced. And back in the browser let me show you what that code looks like. Countries.appcache, this this is the syntax for an appcache file. First of all, you must have a line like this, cachemanifest, that's a rule. Then you can have three different sections in the manifest file. Obviously the hash symbol here represents a comment. So the first section here, cache (UNKNOWN) this is the list of all the files that you would like to be cached initially when the web page has downloaded for the first time.
So when I requested on offline app.html in the browser, as well as downloading the html file, it immediately downloaded these files as well. So they are now cached in my browser. The second section is called fall back colon and there you can define fall back rules to say effectively any file does not explicitly mentioned. So slash means anything that you have already cached rather than trying to load those files it will use this file as the default.
So for example, when I had Wales, and Spain, and USA, they fall back to that file because they weren't explicitly cached in the browser. Okay, so the fall back rule, specifies a pattern and the file to use as the default. In the final section in your manifest file is the network section. This is the list of files which are only available when online. So if I specify this star here, which is actually the default, it means that any files which aren't explicitly mentioned above, any other files will only be available when you have a network connection.
So, that's my app cache file. Let me take you back into my HTML page, just to show you how the application works. I'll take you to the bottom of the file. And as you can see here, in the HTML body section, we have an image element, called the image. Obviously that's where the pictures will be displayed. And here's my combo box. Every time I select an item in the combo box, it will call a function called display image. And it pauses as a parameter the value of the item you selected.
So for example, it will pause in Brazil.png as a parameter to the display image function. Let me show you the script up above. Well first of all, when the web page is loaded, it caused the onload function. And the onload, by default, displays the default image, that was the question mark. Also, just for illustration purposes, if you want to, you can set up event handlers on the window object that will automatically be triggered when you go online and offline. For example, Firefox supports this event.
So, the first bit of code here, when the window becomes online, it'll display a message like this, to say, I am now going online. And there's a correspondent event called on offline. Which will show the user, that we're currently working in an offline mode. So that'd be quite useful. You could have little icon in the corner of your page, showing the user whether they have a connection, or no connection. And that would give them idea about what level of functionality to get out of the application at the moment. All right, so almost finished.
The last thing is to look at the display image function. So the display image function will take the name of the country. Such as Brazil.png. And then it displays a (INAUDIBLE) message indicating the name of the file that you've just selected from the drop down list box. It'll then get the image element on the webpage. And it'll assign the source attribute to be the name of the P entry that you jsut requested. So, that concludes the lesson, we've seen the reason for offline working, so that you can have pages downloaded and script files and Jpegs, when you've got the Internet connection. And we've seen how you specify the context to be downloaded. Find the manifest file.
Click this. Just one last point, that you have to bare in mind, a manifest file, countries.appcache, must be set up on your web server to indicate that it's a HTML 5 offline cache file. What you need to do is go into your web server mime sentence. So I'm going to do that for IAS. Back in my IAS manager, there's an option here for Mime Types. I just double-click that.
I set this up already. I've set up a Mine Type. So that any file that has the .app cache file extension has this mime type, text/cache-manifest. You must do that. Okay, so in IIS manager, I can right click on here and click Add. And you specify the filename extension, .appcache, and then the mime type here, would be text/cache-manifest. So you must do that. You do that, then the web browser knows what to expect from the app cache file, and they can give you offline work in as we've just seen.
There are currently no FAQs about HTML5 Power Workshop.