Offline Capable (Internet Explorer) AJAX Client

Why Is There a Need for an Offline Capable Client?

A Web application serving a large number of clients can suffer bandwidth and server performance bottlenecks. From a business perspective, it makes sense to single out the pages that hit the server the most, and bring the server requests from these pages to a minimum.

An offline AJAX client accomplishes exactly that; it all but eliminates server roundtrips so that a single server can handle many more clients. In addition, an offline AJAX client improves reliability by allowing the client to continue using the application even if the server or the Internet connection is disrupted. Moreover, an offline AJAX client supports untethered users, allowing users who are on-the-go to continue working while away from an internet connection.

Ultimately, by addressing these issues, you can eliminate the two most prevalent problems with Web applications from a user's perspective: speed and reliability.

How Is the Proposed Application Different than Standard Web Applications and other AJAX Applications?

The evolution of web applications...

In a Standard web application:

Client Server
Reads user input  
Posts data Receives and stores data
Waits Renders HTML (possibly by use of XSLT)
Displays HTML  

In other AJAX applications:

Client Server
Reads user input  
Asynchronously posts data Receives and stores data
Displays HTML Renders HTML (possibly by use of XSLT)

In the proposed AJAX applications:

Client Server
Reads user input then save data locally  
Asynchronously posts data, at the same time rendering HTML Receives and stores data
Displays HTML  

What Elements Are Necessary for a Successful Offline AJAX Application?

  1. Browser-based display/rendering:
    • The sample code uses cached XSLT and performs the XSLT transformation in the browser:
  2. Use a sophisticated data store.
    • The sample code uses the IE "userData store" that is a persistent data store. It replaces the need for cookies.
  3. The ability to tell whether the browser is in online/offline mode.
  4. Intelligent loading:
    • Document/stylesheet caching
    • Image pre-loading if necessary

The SAMPLE

The following section describes an offline capable (IE) AJAX client that has all of the required elements highlighted above. The compiled sample is available online at: http://www.wcg-itx.com/article/order.aspx. All client/ server files are attached to this article.

Sample Code: Overview

The sample program allows a user to create orders and send them to a processing center. The user has a user interface with three screens: "Create Order," "Add items," and "Pending Orders."

The User Interface Client Server
The "Create Order" screen allows the user to create an order.
Note: Only one open order is allowed at a given time.
This order is saved locally in the "userData" store. This store is persistent and is not wiped out if the browser is closed or the machine is re-started (see Technology). No Activity
The "Add items" screen allows the user to:
  1. Add items to the open order.
  2. When finished adding items, the user may click "close."
The added items are added to the order XML that is saved locally in the "userData" store.

When "close" is clicked, the client will attempt to post the order asynchronously to the server.

An asynchronous post implies that the browser will not "lock." Meanwhile, the user is free to create a new order.

If an acknowledgement from the server is received, a pop-up message will appear. If no acknowledgement is received from the server, the order will be marked "pending."

Sends back an acknowledgement of received orders.
Pending orders can be viewed from the "Pending Orders" screen. Displays the orders the server did not acknowledge at the time they were closed and sent to the server (because of disrupted connectivity).  

Sample Code: Offline Capability

The browser offline mode is achieved by checking "Work Offline" under the "File" tab. When working offline:

  • The client application knows that there is no connectivity. Thus, it won't try to send out orders to the server and the no-connectivity-warning message will not appear.
  • The cached screens will appear and the user will be able to process orders as usual. All closed orders will remain in the pending state.
  • When connectivity is restored, the user may uncheck "Work Offline." At the next screen switch, all orders listed on the pending orders screen will be sent to the server. (Try it.)

Detailed below are the different scenarios possible:

  • BM = Browser mode. on = online, off = offline.
  • C = Connectivity. P = present, A = absent
Scenario BM C The User Interface Client Server
The user opens a new browser window and logs onto the system (types "http://www.wcg-itx.com/article/order.aspx" in the address bar or accesses a bookmark). on P User will see the "create order" screen The client hits the server once to download and display the user interface. Sends back HTML
on A Error page    
off P User will see the "create order" screen Client uses cached files to display the user interface  
off A User will see the "create order" screen Client uses cached files to display the user interface  
The user switches between screens on P New screen will be displayed. Switching between the screens is done on the client side without hitting the server. If pending orders exist, client will attempt to post them to server. If client posted order, server will acknowledge receipt or orders
on A New screen will be displayed. If pending order exists, a connectivity warning message will appear (suggesting that the user select "Work offline" from the browser file menu) Switching between the screens is done on the client side without hitting the server. If pending orders exist, client will attempt to post them to server but will fail.  
off P New screen will be displayed Switching between the screens is done on the client side without hitting the server  
off A New screen will be displayed Switching between the screens is done on the client side without hitting the server  
The user closes an order   P Create order screen will be displayed Client will attempt to post the closed orders (and any pending ones) to server. Server will acknowledge receipt or orders
on A Create order screen will be displayed. A connectivity warning message will appear (suggesting that the user select "Work offline" from the browser file menu) Client will attempt to post the closed orders (and any pending ones) to server, but will fail. Order will be set to pending.  
off P Create order screen will be displayed Order will be set to pending.  
off A Create order screen will be displayed Order will be set to pending.  

Offline Capable (Internet Explorer) AJAX Client

Technology Notes

MSXML

MSXML ActiveX objects are used in this example to parse XML documents and perform the XSLT transformations.

Data Islands

The XSL document is loaded from a "data island" (an <xml> tag defined in the order.htm template). For example:

<xml id="createorder" src="createorder.xsl" />

JavaScript "Online" State Detection

navigator.online is the JavaScript code that tests whether the browser is online.

Caching: Something to watch out for

If a Web application uses HTTP's cache-control header "no-cache," the client user might be getting some "Web page unavailable while offline" dialog boxes when working offline.

"userData" Store

As far as I know at this point, the "userData behavior" is only implemented by IE.

The userData behavior persists information across sessions by writing to a UserData store. This provides a data structure that is more dynamic and has a greater capacity than cookies. The capacity of the UserData store depends on the security zone of the domain.

See: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp.

User Data Handling

Behavior Definition

The "user data" type is defined as follows (inside the head element of the HTML)"

<html>
   <head> ....
      <STYLE>
         .userData { behavior: url(#default#userData) }
      </STYLE>
   </head>
   ....
</html>

The "user data" is accessed through a div tag whose class is "userData;" for example:

<div id="orderXML" class="userData/>

(JavaScript) manipulation

The "user data" is initialized as follows:

orderXML.XMLDocument.loadXML( xml.xml);    // where xml is an XML
                                           // document

The "user data" is loaded into orderXML as follows:

orderXML.save( "order" );    // where "order" is the unique name
                             // orderXML was saved by

The "user data" is referenced as follows:

var ndRoot = orderXML.XMLDocument;
var ndItem =
   ndRoot.selectSingleNode("//orders[@orderno='111111111']/item");

The "user data" is saved as follows:

orderXML.save( "order" );    // "order" is a unique name

Files

Client files

Name Description
order.htm A page template for the screens
order.js JavaScript file included in the order.htm template that contains all client-side code
createorder.xsl Stylesheet for the "create order" screen
additems.xsl Stylesheet for the "add items" screen
pendingorder.xsl Stylesheet for the "pending orders" screen

Server Files

Name Description
order.aspx If the request is a GET, it returns the "create order" HTML. If it's POST, it handles client-posted orders
Web.config Web project's IIS configuration file
article.dll Web project's DLL
article.csproj .NET ASPX project file


Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: December 11, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Market pressures to move more quickly and develop innovative applications are forcing organizations to rethink how they develop and release applications. The combination of public clouds and physical back-end infrastructures are a means to get applications out faster. However, these hybrid solutions complicate DevOps adoption, with application delivery pipelines that span across complex hybrid cloud and non-cloud environments. Check out this …

  • CentreCorp is a fully integrated and diversified property management and real estate service company, specializing in the "shopping center" segment, and is one of the premier retail service providers in North America. Company executives travel a great deal, carrying a number of traveling laptops with critical current business data, and no easy way to back up to the network outside the office. Read this case study to learn how CentreCorp implemented a suite of business continuity services that included …

Most Popular Programming Stories

More for Developers

RSS Feeds