Cordova Integration for Mapp Cloud

Acknowledgments

iOS: Mapp plugin n support iOS10 and above
Android: Mapp plugin support for Android 19(KitKat) and above

Prerequisites

Node and Cordova CLI/PhoneGap CLI installed on your mac.
Cordova 5.0.0 and above
Mapp Cordova plugin 0.0.1 +

Installation

Use command cordova plugin add https://github.com/MappCloud/Cordova-plugin.git

Integration - Phase 1

Download the plugins. For Android and iOS, download the Mapp Plugin. However, to integrate inApp for iOS you must also download the Mapp In-App Cordova plugin.
First, update the appcompat/androidx library for Android to version 27+ (the best is version 29). You can use the plugin cordova-android-support-gradle-release
To create an FCM project for Android, follow the instructions in Step A: Enable Firebase Cloud Messaging for Mapp Cloud.
Add the plugin with the following command:

Cordova CLI

cd MappCordovaPlugin
cordova plugin add ./MappCordovaPlugin

**** Due to the Cordova way of working, it is recommended to keep the default setting of the landing pages to open outside of the application. The non-default configuration to open landing pages inside the app will lead to cases where the landing page will not be rendered due to initialization issues. ****

Cordova CLI

cd Path/To/My/PhonegapProject
cordova plugin add /path/to/location/of/plugin --variable APX_OPEN_URL_INTERNAL='no' 
/* pass 'no' or 'yes' when adding the plugin to indicate if on Android, landing pages should be opened inside or outside the application. */

Integration - Phase 2

Android - Initialize the plugin in your Javascript application as soon as possible by calling the following:

Initialize plugin

function engage() {

	  MappPlugin.engage("sdkKey",
                         "googleProjectId",
                         "server",
                         "appID",
                         "tenantID",
                         function (json) {
                         alert(JSON.stringify(json));
                         },
                         function (json) {
                         alert(JSON.stringify(json));
                         });
}

iOS - No need to explicitly engage the plugin via your JavaScript code.

Locate AppoxeeConfig.plist on the Cordova Xcode project file structure (this file should be located in the 'Resources' folder on Xcode's project navigator).

AppoxeeConfig.plist location

Enter your app ID.
Enter your SDK key.
Enter your system ID (this is provided by our account management)
Choose the Mapp environment to work against.
Choose if landing pages open inside or outside the application.
Enter jamie_url (this is provided by our account management)
Choose if you this should open internal in the application or in your default web browser.

**** Due to the Cordova way of working, it is recommended to keep the default setting of landing pages to open outside of the application. The non-default configuration to open landing pages inside the app will lead to cases where the landing page will not be rendered due to initialization issues. ****

application.plist

Note that iOS / Android applications will not share the same SDK key & secret. If you are compiling the same code for both iOS and Android, you will need to supply the correct key for each platform.

Content Security Policy & inline functions

In order to:

run the engage() method in your HTML code
enable iOS10 with Cordova

make sure your meta tag of Content-Security-Policy contains the following definition (allowing inline function and code execution):

Android small icon

To override the small icon in the notification bar, you will have to create a drawable named "apx_small_icon" - place an image file with that name in the project's drawable folder(s) (eg: <project>/platforms/android/res/drawable-xhdpi )