HTML5 LogoThe cache manifest file allows you to easily set up an HTML5 offline application. The applicationCache JavaScript Object allows you to monitor and act upon the events that take place as your app loads.

In Part I of this article, we learned the basics of creating HTML5 Offline Web Applications. In Part II, we learned about the “FALLBACK:” section, allowing us to provide default assets for files and pages that we do not want to be available offline. In this third part, we will learn about the events that fire during the process of loading your application.

The key to using JavaScript to interact with your HTML5 offline application is the global applicationCache object. This object has properties that we may want to know about and events that we may want to monitor.

It might make more sense to view the full working example first. This way the content of this article will make more sense. http://examples.kevinchisholm.com/html5/offline-web-apps/example-3/index.php

Example # 1

In Example # 1, we have our cache manifest file. The only thing here that is new is the file: cache-events.js. This is the JavaScript that will interact with the page.
text

File Structure

Image # 1

App File Structure

In Image # 1, we see the file structure of our application. I’ve consolidated the HEAD tag for each page into head.php, and cache-events.js is consolidated in footer.php.

Example # 2

In Example # 2 we have a simple function that takes a message as an argument and appends it to the DOM as an update. This will make more sense when you see the working example.

Example # 3

In Example # 3, we assign a function to the document’s “onreadystatechange” event. Whenever this event fires, we will add a list item element to the DOM, with the current value of the document’s readyState property. If that value happens to be “complete”, we add a message which lets us know whether or not we are online.

Example # 4

 

In Example # 4, we add an event listener to the applicationCache object. Each time an event fires on that object, we check to see if the event is named “updateready”. If so, we know that the cache manifest file has changed. The browser will update the UI the NEXT time the page is loaded. We inform the user that there is an update to the app, and ask if they want to reload. If they click “yes”, then we force a reload of the page, which will force the browser to use the newly cached assets.

Example # 5

 

In Example # 5, we add a series of event listeners to the applicationCache object. In each case, we call our logEvent() function. This function takes the event object as its first argument. In the logEvent() function, we examine the event object’s “type” property, and then call the updateUI function, in order to update the web page.

Image # 2

Ready State Events

In Image # 2, we see our JavaScript code in action. We see that the readyStateChange event fires twice. The first value of the readyState property is “interactive”, which means that the page is downloading. The second value is “complete”. At this point, we check our online status, which is “true”. If you turn your internet connection off and reload the page, that value would be “false”. We also see that two applicationCache events fire: “checking” and “noupdate”. This means that the browser checked to see if the cache manifest file changed, and in this case, there was no change.

Image # 3

Ready State Events

In Image # 3, we see that after the applicationCache event: “checking” fires, the “downloading” event fires. This is because the browser found that the cache manifest file has changed. Our JavaScript code prompts the user, asking if he or she wants to reload the page.
Image # 4

App Cache Error

Image # 5

App Cache Error in the JS Console

In Image # 4, we see that an error event has fired. Image # 5 shows the JavaScript console. We see that this error is expected because we are offline, so the cache manifest file cannot be checked.

Summary

In this article, we learned how to interact with HTML5 Offline Web Applications through JavaScript. We learned about the global applicationCache JavaScript object. We discussed the properties of this object that can be useful, and how to add event listeners so that we can monitor the activities of our offline web application.

Helpful Links for the HTML5 Application Cache JavaScript API

http://www.bennadel.com/blog/2029-Using-HTML5-Offline-Application-Cache-Events-In-Javascript.htm

http://motyar.blogspot.com/2011/09/handling-html5-application-cache-with.html

One Comment

Comments are closed.