Hybrid App Setup - Cordova-Ionic SDK

Note

Before proceeding with the hybrid app setup, install the Cordova-Ionic SDK and Web SDK.

You can configure the Airbridge Cordova-Ionic SDK to handle Airbridge-related tasks within the hybrid app's in-app website without modifying the website's code.

Handle Web SDK Commands with the Unreal SDK

The Cordova-Ionic SDK can handle commands related to event transmission, device settings, and user settings that occur within the Web SDK. Before displaying the website in the web view, configure the Cordova-Ionic SDK using the Airbridge.createWebInterfaceScript and Airbridge.handleWebInterfaceCommand functions.

  • webToken: This is the Web SDK token. Your Web SDK token can be found on the [Settings]>[Tokens] page in the Airbridge dashboard.

  • postMessageScript: This JavaScript code transmits the payload variable, which stores the command passed from the Web SDK to the Expo SDK, to the React Native area.

  • command: This command is passed from the Web SDK to the Expo SDK.

123456789101112131415161718192021222324252627
async function open() {
    const script = await Airbridge.createWebInterfaceScript(
        'YOUR_WEB_SDK_TOKEN',
        (function (arg) {
            return `window.cordova_iab.postMessage(${arg})`;
        })
    );

    var url = 'https://...';
    var target = ;
    var options = 
    var inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

    inAppBrowserRef.addEventListener('loadstart', loadstartCallback);
    inAppBrowserRef.addEventListener('loadstop', ...);
    inAppBrowserRef.addEventListener('loaderror', ...);
    inAppBrowserRef.addEventListener('exit', ...);
    inAppBrowserRef.addEventListener('message', messageCallBack);

    function loadstartCallback(event) {
        inAppBrowserRef.executeScript({ code : script });
    }

    function messageCallBack(params){
        Airbridge.handleWebInterfaceCommand(JSON.stringify(params.data));
    }
}

Attention

Was this page helpful?

Have any questions or suggestions?