Mobile App Performance, mPulse SDK - Cordova Integration Guide (iOS)

Kumar, Anish

Mobile App Performance, mPulse SDK - Cordova Integration Guide (iOS)

Instructions for adding the Mobile App Performance(MAP) / mPulse SDK to your Cordova app for iOS.

Required For Setup

You must be an Akamai Ion customer to use this SDK. If you are not an Ion customer, please reach out to us at specialist@akamai.com
MAP SDK License Key - Follow the steps given in this document to activate MAP SDK from the marketplace.

Example Project

For your convenience, we've created a Sample App/project that you can use to get started and learn about using MAP/mPulse SDK with Cordova.

Adding Akamai MAP/ mPulse SDK

1. Create an application

cordova create <directory> <appId (bundleId for iOS)> <appName>

cordova create /Volumes/Disk1/SampleCord com.akamai.cord sampleCord

2. Add iOS to Cordova

cordova platform add ios

3. Add akamai_sdk_init.xml to root directory of your project and modify/update the licenses and segments you are using:

com_akamai_map_license_key

com_akamai_mpulse_license_key

com_akamai_map_segments

<?xml version="1.0" encoding="utf-8"?>

<com_akamai_sdk_init>

    <!-- Set the correct parameter values -->

 <com_akamai_map_license_key>e04d913a1b5277c4b65d9ee068780da840280a5c5dbb0712100ff49e075496d5</com_akamai_map_license_key>

    <com_akamai_mpulse_license_key>WXGVC-642RA-9Y42X-N32NE-ETSR</com_akamai_mpulse_license_key>

    <com_akamai_map_segments>segment1</com_akamai_map_segments>

</com_akamai_sdk_init>

4. Modify iOS platform in config.xml (in the root directory of your project). Update the license keys and segment of your app

<platform name="ios">

<preference name="deployment-target" value="8.0" />

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />


<!--APNs configuration-->

<config-file target="*-Info.plist" parent="UIBackgroundModes">

<array>

<string>fetch</string>

<string>remote-notification</string>

</array>

</config-file>

<!--MAP and mPulse configuration-->

<config-file target="*-Info.plist" parent="com.akamai">

<dict>

<key>mpulse</key>

<dict>

<key>api_key</key>

<string>WXGVC-642RA-9Y42X-N32NE-ETSR</string>

</dict>

<key>map</key>

<dict>

<key>api_key</key>

<string>e04d913a1b5277c4b65d9ee068780da840280a5c5dbb0712100ff49e075496d5</string>

<key>segments</key>

<array>

<string>segment1</string>

</array>

</dict>

</dict>

</config-file>

</platform>

5. Copy customPlugins from the SampleApplication to root directory of your project

6. Add akaIntegration plugin. Run this command at the root directory of your project

cordova plugin add customPlugins/akaIntegration

akaIntegration will now be added to the plugins folder.

7. Use the steps shared below to re-add the plugin if needed during changes to the app/cordova setup

cordova plugin rm akaIntegration

cordova plugin add customPlugins/akaIntegration

8. Prepare and build the app

cordova prepare ios

cordova build ios

9. MAP and mPulse Native iOS SDK will be added along with AkaCommon to your project

Adding Firebase

1. Add google-services.json and GoogleService-Info.plist to the root directory of your project.

2. Modify package.json to add Firebase in the root directory of your project

{

  "name": "com.akamai.pushid",

  "displayName": "sampleCord3",

  "version": "1.0.0",

  "description": "A sample Apache Cordova application that responds to the deviceready event.",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "ecosystem:cordova"

  ],

  "author": "Apache Cordova Team",

  "license": "Apache-2.0",

  "dependencies": {

    "cordova-ios": "^5.1.1",

    "cordova-plugin-akaIntegration": "file:customPlugins/akaIntegration",

    "cordova-plugin-androidx": "^1.0.2",

    "cordova-plugin-androidx-adapter": "^1.1.0",

    "cordova-plugin-firebasex": "^7.0.2"

  },

  "devDependencies": {

    "cordova-plugin-whitelist": "^1.3.4"

  },

  "cordova": {

    "plugins": {

      "cordova-plugin-whitelist": {},

      "cordova-plugin-firebasex": {

        "FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",

        "FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",

        "FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true"

      },

      "cordova-plugin-akaIntegration": {}

    },

    "platforms": [

      "ios"

    ]

  }

}

3. Prepare and build the app

cordova prepare ios

cordova build ios

Integration with SDK's

Integration in this app is done using mainly two files:

customPlugins/akaIntegration/src/ios/akaIntegration.m
customPlugins/akaIntegration/www/akaIntegration.js

Basic initialization is done in akaIntegration.m file in

- (void)pluginInitilize

This will be called when the main WebView for application is created. To allow access to native functions you need to create a "wrapper" function. Add JS function to akaIntegration.js file and then implement it in akaIntegration.m.