Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 5 CREATING OFFLINE WEB APPS...The HTML5 Application Cache API is expressed through the window.applicationCache browserobject. This object triggers events to inform the web app of changes in the cache status. The mostimportant for us at the moment is the updateready event, which means that there is updated cache dataavailable. In addition to the events, the applicationCache object defines some useful methods andproperties. Once again, I’ll return to these later in the chapter, but the method I care about now isswapCache, which applies the updated manifest and its contents to the application cache.I am now ready to demonstrate updating a cached web application. But before I do, I must removethe existing cached data. I have created a zombie web app by applying a manifest without adding the callto the swapCache method, and there is no way I can get updates to take effect. I need to clear the cacheand start again. There is no way to clear the cache using JavaScript, and the browser has a differentmechanism for manually clearing application cache data. For Google Chrome, you delete the regularbrowsing history. For Mozilla Firefox, you must select the Advanced ➤ Network options tab, select theweb site from the list, and click the Remove button.Once you have cleared the application cache, reload the listing to load the manifest and cache thedata. Reload the page again to switch to the cached version of the application (which will have the whitebackground).Finally, you can uncomment the blackwave.png entry in the cheeselux.appcache file. At this point,you will need to reload the web page twice. The first time causes the browser to check for an updatedmanifest, find that there is a new version, and download the updated resources into the cache. At thispoint, the updateready event is triggered, and my script calls the swapCache method, applying the updatesto the cache. Those changes don’t take effect until the next time that the web app is loaded, which is whythe second reload is required. This is an awkward approach, but I’ll show you how to improve upon itshortly. At this point, the cache will have been updated with a manifest that does include theblackwave.png file, and the web app background will have turned black.• Tip The browser checks to see only if the manifest file has changed. Changes to individual resources, includingHTML and script files, are ignored unless the manifest also changes. If the manifest has changed, then thebrowser will check to see whether the individual resources have been updated since they were last downloaded(and, of course, will download any resources that have been added to the manifest).Taking Control of the Cache Update ProcessI took you the long way around the updates because I wanted to emphasize the way in which thebrowser tries to isolate us from having to deal with an inconsistent cache. There is no standard way for aJavaScript web app to respond to a cache change while it is running, so the HTML5 Application Cachestandard errs on the side of caution, and cache updates are applied only when the application is loaded.116www.it-ebooks.info