Hybrid Apps

Hybrid Apps - are apps which are built as a native iOS or Android application, do not use a well known cross platform framework but have most of their functionality implemented via HTML pages, using CSS for UI customisation and JavaScript as the main language for implementation of the functionality.

XtremePush supports push notifications for iOS devices via Apple's Push Notification Service (APNs for short).  And push notifications for Android devices via Google’s GCM (Google Cloud Messaging for Android) service. If you have a custom Hybrid iOS or Android App that mixes native code and Web technologies it should be possible to integrate successfully. First you should perform a native integration using the native iOS or Android documentation.

By performing a native integration you will be able to use features such as push notifications and location services. If you need to use some of the native API calls from the web portion of your app you will need to create wrapper methods around the native API methods. You may for example want to tag some behaviour in the web portion of your app.

iOS - Hybrid: calling XtremePush methods from web pages

To call XtremePush methods from your web pages you will need to modify your web view controller. First you will need to import XtremePush.


#import "XPush.h"


Then you will need to add a wrapper method around the XtremePush method you want to call for example the hitTag method.


//Native methods which will be called via JS
-(void) callHitTagFromJS:(NSString *)tag{
[XPush hitTag: tag];
}

To make this method available in your web pages you should add it to a JSContext in your web view controllers webViewDidFinishLoad method as shown below:


-(void) webViewDidFinishLoad:(UIWebView *)webView{

//Create a JS context for WebViews, add any callbacks to native methods to this context
JSContext *context = [_testWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

//assigning call to callHitTagFromJS native method to hitTag JS method
context[@"hitTag"] = ^(NSString *param1) {
[self callHitTagFromJS:param1];
};
}

You can then use the methods you have added in your web pages, for example you could call the hitTag function to tag an in app behaviour like a button press. If you have a button in your HTML with an onclick function like this:

<input type = "button" value = "click me" onclick = "onclickfunction()"></input>

You can tag that button press by calling the hitTag wrapper method you added to your JSContext, in its javascript onclick function for example:

<script type="text/javascript">
    function onclickfunction(){

      hitTag("btn_click");

      //some custom onclick  behaviour

      }
</script>


Android - Hybrid: calling XtremePush methods from web pages

To call XtremePush methods from your web pages you will need to modify the activity where you are loading your web view. First you will need to ensure that javascript is enabled in your web view.

JavaScript is disabled in android WebViews by default. Enable javascript in the the WebSettings attached to your WebView as follows.



//enabling javascript engine
webView.getSettings().setJavaScriptEnabled(true);


To make an XtremePush API method such as the hitTag method used to tag in App behaviour available in your web pages you will need to create an interface between your JavaScript code and the client-side Android code. To bind a new interface between your JavaScript and Android code, call addJavascriptInterface(), passing it a class instance to bind to your JavaScript and an interface name that your JavaScript can call to access the class.

Below is an example of a JavaScript interface class you can add to you web view to allow you to use the hitTag method.



public class WebViewJavaScriptInterface{

private Context mContext;

//XtremePush PushConnector
private PushConnector _pushConnector;

/*
* Method for adding your XtremePush PushConnector to your interface.
* The PushConnector must be added so its methods can be called
* via the JavaScript Interface on the JavaScript side
*/

public void setPushConnector( PushConnector connector)
{
_pushConnector = connector;
}

/*
* Instantiate the interface and set the context
*/
public WebViewJavaScriptInterface(Context c){
this.mContext = c;
}

/*
* This method can be used to call the XtremePush hitTag method from JavaScript
* @JavascriptInterface required after SDK version 17.
*/
@JavascriptInterface
public void callHitTagFromJS(String message){

_pushConnector.hitTag(context, message);

}
}


To use it you will need to bind this class to the JavaScript that runs in your WebView with addJavascriptInterface() and give the interface a name e.g. "Android". But first you will need to initialise it with your applications PushConnector as shown below.



/* Set up javascript interface for calling Android methods from js side
* and add your apps XtremePush PushConnector
*/
WebViewJavaScriptInterface wInterface = new WebViewJavaScriptInterface(this);
wInterface.setPushConnector(mPushConnector);

// Bind the javascript interface to webview
webView.addJavascriptInterface(wInterface, "Android");

You can then use the methods you have added via this interface in your web pages, for example you could call the hitTag function to tag an in app behaviour like a button press. If you have a button in your HTML with an onclick function like this:

<input type = "button" value = "click me" onclick = "onclickfunction()"></input>

You can tag that button press by calling the hitTag wrapper method you added via your JavaScript interface, in its javascript onclick function. You will need to use the interface name you set when you added it, in the example above this was "Android" addJavascriptInterface(wInterface, "Android") . This name will be used when you call your tagging method as shown below:

<script type="text/javascript">
     function onclickfunction(){

            Android.callHitTagFromJS("Android");

            //Other onclick functionality
       }
</script>


You can find more information on working with Web Views in the Android Developer Docs online.

Have more questions? Submit a request

0 Comments

Article is closed for comments.