Hybrid apps

Hybrid apps are built as a native iOS or Android applications, 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) and for Android devices via Google’s FCM (Firebase 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 (for example, tag some behaviour in the web portion of your app) you will need to create wrapper methods around the native API methods.

iOS

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

For Android, to call Xtremepush methods from your web pages you will need to modify the activity where you are loading your web view.

First, ensure that JavaScript is enabled in your web view. JavaScript is disabled in Android WebViews by default. Enable it 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 your WebView 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.