HTML5WebApppart4: Use WebWorkers to accelerate your mobile Web application (below )...-

Listing 4. loadDeals function vardeals; varsections; vardealDetails {}; vardealsUrl & amp; quot; deals. ebay. comfeedsxml & amp; quot; functionloadDeals () {varxhrnewXMLHttpRequest (); xhr. onreadystatechan ...,. Listing 4.loadDealsFunction

Var deals = []; var sections = []; var dealDetails ={}; var dealsUrl = "http://deals.ebay.com/feeds/xml"; function loadDeals () {var xhr = new XMLHttpRequest (); xhr. onreadystatechange = function () {if (this. readyState = 4 & this. status = 200) {var I = 0; var j = 0; var dealsXml = this. responseXML. firstChild; var childNode ={}; for (I = 0; I <dealsXml. childNodes. length; I ++) {childNode = dealsXml. childNodes. item (I); switch (childNode. localName) {case 'item': deals. push (parseDeal (childNode); break; case "MoreDeals": for (j = 0; j
 
  
InloadDetailsFirst, check the global scope (windowObject)WorkerFunction. If the function is not there, you do not need to do anything. Otherwise, checklocalStorageTo obtain the details of the transaction. This is a common local cache policy for mobile Web applications. This policy is described in detail in Part 1 of this series.
  
If XML is located locallyparseFromXmlThe function parses it and adds transaction detailsdealDetailsObject. Otherwise, a Web Worker is derived and usedpostMessageSend the Item ID to it. After the Worker retrieves the data and publishes the data back to the main thread, you parse the XML and add the resultdealDetailsAnd then store the XMLlocalStorage. Listing 6 shows the Worker Script: details. js.
  
Listing 6. Transaction details Worker script
  
importScripts("common.js?6.1.3");onmessage = function(message){    var itemId = message.data;    var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function(){        if (this.readyState == 4 && this.status == 200){            postMessage({responseXml: this.responseText});        }    };    var urlStr = generateUrl(itemId);    xhr.open("GET", "proxy?url=" + escape(urlStr));    xhr.send(null);}
  
This Worker script is very simple. You use Ajax to call the proxy, which then calls the eBay Shopping API. After you receive the XML from the proxy, use a JavaScript object text (object literal) to send it back to the main thread. Note that even if you can useXMLHttpRequestBut all information will return itsresponseTextAttribute, not itsresponseXmlAttribute. This is because the Worker script does not have a JavaScript DOM parser. Note,generateUrlThe function is from the common. js file (see listing 7 ). You useimportScriptsFunction imports the common. js file.
  
Listing 7. Worker import script
  
function generateUrl(itemId){    var appId = "YOUR APP ID GOES HERE";    return "http://open.api.ebay.com/shopping?callname=GetSingleItem&"+        "responseencoding=XML&appid=" + appId + "&siteid=0&version=665"            +"&ItemID=" + itemId;}
  
Now that you know how to fill in the transaction details (to support Web Workers browsers), we return to figure 1 to study how to use this method in applications. Note that each transaction hasShow DetailsClick the button to modify the UI, as shown in figure 2.
  
Figure 2. Transaction details 
  
  
  
This UI will be calledshowDetailsFunction. Listing 8 shows this function.
  
Listing 8. showDetails Functions
  
function showDetails(id){    var el = $(id);    if (el.style.display == "block"){        el.style.display = "none";    } else {        el.style.display = "block";        if (!el.innerHTML){            var details = dealDetails[id];            if (details){                var ui = createDetailUi(details);                el.appendChild(ui);            } else {                var itemId = id;                var xhr = new XMLHttpRequest();                xhr.onreadystatechange = function(){                    if (this.readyState == 4 &&                                      this.status == 200){                        var itemDetails =                                        parseFromXml(this.responseText);                        if (window.localStorage){                            localStorage.setItem(                                              itemDetails.id,                                              this.responseText);                        }                        dealDetails[id] = itemDetails;                        var ui = createDetailUi(itemDetails);                        el.appendChild(ui);                    }                };                var urlStr = generateUrl(id);                xhr.open("GET", "proxy?url=" + escape(urlStr));                xhr.send(null);            }        }    }}
  
You receive the ID of the transaction to be displayed and switch whether to display it. When this function is called for the first time, it checks whether the details are stored in the dealDetails detaing. If the browser supports Web Workers, these details have been stored and Its UI has been created and added to the DOM. If the details are not loaded yet, or if the browser does not support Workers, You need to execute an Ajax call to load the data. This is why this application works normally, no matter whether it has Workers or not. This means that if Workers is supported, the data is loaded and the UI will respond immediately. Without Workers, the UI will still be loaded, but it takes several seconds.
  
Conclusion
  
For Web developers, Web Workers sounds like a new external technology. However, as described in this article, they are very practical applications. This is especially true for mobile Web applications. These Workers can be used to prefetch data or perform other pre-operations to provide a more real-time UI. This is especially true for mobile Web applications that need to load data through a network that may be slow. Using this technology and cache policy together, your application's quick response will surprise your users!