Building HTML5 applications that can tolerate temporary network disconnects.
Visit our site for our entire selection of blogs Gizmox Blog
Enterprise mobility means that people are working in wide range of environments – not all of which have reliable internet connections. Even with pervasive wifi and LTE data, temporary disconnects are a matter of daily life – elevators, subways, tunnels or that weird stretch highway you hit every night on the way home. When deploying enterprise applications on HTML5, one needs to consider what happens when a user loses their connection.
Visual WebGui Offline mode
Gizmox built an Offline Mode feature into Visual WebGui to give developers the option to design applications that can tolerate adverse network conditions. In the event of a lost or interrupted server connection applications can continue to operate without post-backs to the server. Beyond dropped connections, Offline Mode can help keep your Visual WebGui application responsive in the event of a slow network connection, with changes requiring an internet connection being synchronized in the background.Designing HTML5 applications that tolerate offline conditions
When planning your development of HTML5 applications that can manage offline conditions, keep the following best practices in mind. Secure-by-design While putting application logic on the client can help with managing offline situations, it is best to keep the algorithms and business logic on the server. Keeping sensitive data and logic on the server minimizes application security risk. Leverage local device data storage capabilities Think strategically about how you can keep event handling logic on the client and avoid server post backs. Even when the server is connected, you can improve performance by executing simple tasks (e.g. validation) on the client – see prior blog post about leveraging Visual WebGui Client APIs. During offline conditions, events that execute on the client accumulate, synchronizing on the server when connectivity returns. Actively plan for online return Developers should explicitly plan for the return to online conditions after events have accumulated on the client during offline periods. Care should be taken in ensuring integrity of IDs during resynchronization. As the session is explicitly interrupted during an offline event, resynch logic should consider the potential of out of synch ID changes.Sample offline mode implementation
The first step in implementing offline mode client side logic is to check to confirm that the user (i.e. user’s client) is offline. Below is a sample for the “OfflineConfirming” event which is triggered whenever an error occurs in the form. Code in this event handler will check whether the error originated from a disconnection or from some other problem, for example, an image that is not found. To begin, you need to set:vwgContext.events.eventArgs().offlineConfirm = true;Next, in the OfflineConfirming event handler, set:
private void Form1_OfflineConfirming(object objSender, Gizmox.WebGUI.Forms.Client.ClientEventArgs objArgs)
{
objArgs.Context.Invoke("OfflineConfirming");
}Following this, you need to add OfflineConfirm to the JavaScript file:
function OfflineConfirming() {
// example of error checking
var objXmlHttp = vwgContext.eventArgs.XmlHTTP;
var intStatus = objXmlHttp.status;
// vwgContext.eventArgs.XmlHTTP.status returns number of the w3c error
// vwgContext.eventArgs.responseText returns text of the error
// error list from w3c (e.g. 404 = not found, 500 = server error, etc.)
if (intStatus == 500) {
var strResponseText = objXmlHttp.responseText;
if (typeof strResponseText != 'undefined' && strResponseText != null) {
if (strResponseText.indexOf('offline error') >= 0) {
vwgContext.events.eventArgs().offlineConfirm = true;
}
else {
vwgContext.events.eventArgs().offlineConfirm = false;
}
}
}
else {
vwgContext.eventArgs.OfflineMode = true;
}
}
Example: Managing offline conditions in a HTML5 mobile CRM application
For a good example of offline mode implemented, check our demo CRM mobile app on your device. Navigate to tinyurl.com/gizmox-mcrm on your mobile device or scan the QR code below. Once you are on the app, switch to offline (i.e. set your phone to “airplane mode”) and observe the behavior of the app. Note the app continues to offer basic navigation without returning error links. You would have the ability to develop further navigation logic using the client API as discussed in prior bogs.
Visit our site for our entire selection of blogs:
Gizmox Blog
Happy Coding!