Start learning with our library of video tutorials taught by experts. Get started

HTML5 First Look

Offline applications overview


From:

HTML5 First Look

with James Williamson
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

Video: Offline applications overview

One of the challenges in building web applications is that occasionally your users will be offline, leaving them without a way to access and use the application. Now, that's precisely the thing that the Offline Web Applications section of the HTML5 specification is designed to address. The Offline Web Applications API, or as it's more commonly referred to as Offline Applications, instructs the browser or device to store a version of the application in the user's cache, so that when the user is offline, the application can still be interacted with.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 First Look
4h 28m Beginner Aug 23, 2010

Viewers: in countries Watching now:

In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.

Topics include:
  • Understanding the history of HTML5
  • Using new tags
  • Understanding HTML5 semantics
  • Coding ID and class attributes in HTML5
  • Structuring documents
  • Building forms
  • Exploring HTML5 native APIs
  • Encoding and adding HTML5 video
  • Exploring associated technologies such as CSS3
Subjects:
Developer Web Web Design Web Development
Software:
HTML
Author:
James Williamson

Offline applications overview

One of the challenges in building web applications is that occasionally your users will be offline, leaving them without a way to access and use the application. Now, that's precisely the thing that the Offline Web Applications section of the HTML5 specification is designed to address. The Offline Web Applications API, or as it's more commonly referred to as Offline Applications, instructs the browser or device to store a version of the application in the user's cache, so that when the user is offline, the application can still be interacted with.

Once that connectivity is restored, you could update information on the server or update the application with any newer data that the user has inputted. Now, for example, you could build a Contacts application that stores the client's contacts, like phone numbers and things like that, in the cloud. If the application was offline, cached versions of the contacts could be accessed and the user could still add new contacts to her list. So once the application goes back online, you could trigger the application to sync up, so that newer contacts are either uploaded or downloaded based upon where they were added.

So here is how it works. Now, any web page that's part of the application should contain a reference to a specific type of file called a cache manifest file. This is what it looks like right here, this code. The cache manifest is a text file that contains references to which application resources should be downloaded as being part of that application. Now, I need to mention here that any server hosting this particular site needs to be able to recognize the manifest mime type. You should add this mime type to your server before building offline applications.

Now, your browser is then going to use the reference to the cache manifest and create an application cache specifically for its resources that's separate from the browser cache. As long as this appcache or application cache exists, any page referencing this cache manifest will be added to its appcache. Now, inside the cache manifest, you'll list any and all resources necessary for the application to function offline. This could be HTML files, images, external scripts or even external styles.

The syntax inside the cache manifest is simple but extremely specific. Inside the cache manifest, you can list resources as being Explicit, Network, or Fallback. Let's review a simple manifest file to illustrate this. So this is a very simple manifest and it's telling the browser to retrieve the index page, the main.css file, and an external JavaScript file that controls the behavior of the Contact application. If no headers are present in the file, all listed resources are to be downloaded and cached.

So what's a header? Well, we have three flavors of headers available to us in cache manifest: Cache, Network and Fallback. Let's take a look at a slightly more complex manifest. So here, notice that we're using a couple of headers. The Cache header tells the browser that all resources listed after it are explicit and should be added to the application cache. The Network header creates references to what is known as the online white list. Items listed here are not cached and the device is instructed to bypass references to this resource in the cache and always try to access them online.

Now, there's something really important here about the explicit reference in the cache as well. If it's listed in the Cache header, like these are, essentially you're telling the device or browser "Always use these, don't bother to check to see if they're newer ones." And that means that when people visit your site again, they're going to see the files from their cache instead of what you have on the server, and if you're not updating them all the time, that's fine, but we'll talk a little bit later on how to deal with newer content. Now, let's take a look at a manifest that specifies Fallback content. So here we have a much more complicated cache manifest.

Now, Fallback content, you'll notice that's the last header here that's using the offline image, Fallback content allows you to specify substitute content to use when the user is offline and the resource is not available. In this example, since the update image is not explicitly cached, each time the application loads, it will be requested by the server. Now, if the request fails for whatever reason or if the application is unable to load the resource, it's going to load this Fallback content. In this case, the offline JPEG would be substituted for the update graphic, providing a visual clue to the user that uploading is unavailable when offline.

Now, note that the Fallback content has two parts to it. The resource that you're monitoring to see if it's successful loads or not and in the Fallback content that it should use if that resource is unavailable. Sounds pretty simple, right? It is, and for the most part it's widely supported. As of this recording, a version of all major browsers, other than Internet Explorer, supports offline applications. As you can see, Internet Explorer 9 says it will support offline caching. Now, the caching process itself has a few quirks you need to be aware of. First, if a resource is listed as explicit in the manifest, the cache version is always used.

Remember that. Even if the online connection is working. The server will not check to see if there's a new version of the resource. However, if the contents of the manifest file changes, the browser will prompt a new download and yes, it will download all of the resources again, not just the ones that have changed. So this means that if you change resources on your server, you need to update and change the cache manifest in order to force the cache to store new versions of your resources. Most online examples utilize a comment to track version numbers.

A quick change to the version number inside of a comment is all that's required to force an entirely new download of the application. Now, there's also a few points you need to consider when building offline apps. For the most part, it seems that all browsers are utilizing an opt-in nature to application caching. If you create an offline app, users are going to have to okay the downloading of the resource files before continuing. The specification is really vague about the opt-in nature of application caching. S, this is something to watch closely as the specification matures and best practices evolve.

Also, the offline application interface controls how to specify which resources should be available offline. What those resources do, how they store data, and how they control any syncing operations when connections have been restored is up to your own applications. There are online and offline events that you can capture, but it's up to you to respond to those events within your own application. If you're looking to learn more about offline apps, check out the specification on the W3C site, and you might also want to check out Mark Pilgrim's article on offline applications from his absolutely tremendous online resource, Dive Into HTML.

O'Reilly has posted the chapter on offline apps from its iPhone Apps book online as well, and it's a great resource that features several practical examples. Now, for those of you who really plan on kicking the tires of offline apps, Jonathan Stark has written a script to assist in debugging those apps, which can be notoriously hard to debug. You can find that in his blog archives. Like most of the HTML5 specification, the section on offline applications is designed to help lay the groundwork for the next generation of web applications. By allowing users to access, interact, and use your application when offline, you can add an entirely new type of functionality to your web applications.

There are currently no FAQs about HTML5 First Look.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked