Better way of checking device's network connection state in SAPUI5

[kachiever]

This blog is around a key feature which is used in Hybrid Application. The applications which can be used both online & offline. So basically developer add a code which detects if the application is connected to internet or not, depending to it features of the app are enabled or disabled.

What is the issue ?

So, if you would have developed some of these apps you too would have used the network state to toggle offline/online mode. Its usually done by Cordova inbuilt plugins. So, whats the issue with standard method , why is the method I am discussing better. The standard plugin uses an older version of Cordova. The standard method had issues, Cordova fixed those in version 2.3.0 which is not available for SAP yet. Irrespective of the connection state it always return "UNKNOWN".

Basically we use the below code snippet to detect the connection state :

function checkConnection() {
var networkState = navigator.connection.type;

var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';

alert('Connection type: ' + states[networkState]);
}

checkConnection();

What's a better yet simple a way to do it ? 

Now, when we have seen the issue & code used conventionally lets see the better way or a solution to this issue. We can use a 3rd Party JS file called "Offline JS". So we just need to include this JS file in our project. Import in code & use its function to check device's network connection status. It's useful as its simple, have no dependencies , setup is simple & small. You can easily configure & start using this wonderful JS.

Some Key Features

• Monitors Ajax requests looking for failure


• Confirms the connection status by requesting an image or fake resource


• Automatically grabs Ajax requests made while the connection is down and remakes them after the connection is restored.

So what exactly we have to do ?

I am sharing a simple example of using this JS.

Step 1 :  Download this Offline JS file from GitHub : https://github.com/hubspot/offline.

Step 2 :  Create a folder in your SAPUI5 project & add the downloaded file there.

Step 3 :  Define path in your controller (under default, "sap/ui/core/mvc/Controller",).

sap.ui.define([
"sap/ui/core/mvc/Controller",
"TestExternal/TestExternal/lib/offline",
],

Step 4 : You are done with the setup , now can directly use methods :

var conn = Offline.check();
console.log(Offline.state);

Offline.state will return "up" if it's connected to internet else return "down".

Conclusion

It's a simple example of checking if device is online or not but, there are various other  methods/functions present  to explore in OfflineJS that can be leveraged as well as per different needs. Hope it will help those who are facing this issue & add some knowledge to those who haven't worked on such application, but now can use OfflineJS for there hands-on on Hybrid Applications.