Overview

Skill Level: Intermediate

Note: Dial permission has been separated out into it's own module. If you use the dial action, you'll need to also install the co.acoustic.mobile.push.plugin.dial module.

Prerequisites

Not what you’re looking for? Check out all our available tutorials for mobile app messaging here.

Step-by-step

  1. Remove existing cordova plugins

    A. Execute the following shell commands:

    1. See what plugins are installed
        cordova plugin ls

    2. Remove only the ones that are installed

    cordova plugin rm com.xtify.mce.sdk
    cordova plugin rm com.xtify.mce.sdk.gcm
    cordova plugin rm com.xtify.mce.sdk.fcm
    cordova plugin rm com.xtify.mce.sdk.snooze
    cordova plugin rm com.xtify.mce.sdk.calendar
    cordova plugin rm com.xtify.mce.sdk.displayweb
    cordova plugin rm com.xtify.mce.sdk.geofence
    cordova plugin rm com.xtify.mce.sdk.beacon
    cordova plugin rm com.xtify.mce.sdk.location
    cordova plugin rm com.xtify.mce.sdk.inbox
    cordova plugin rm com.xtify.mce.sdk.inapp
    

    B. If the Cordova system refuses to remove the plugins, execute the following:
    1. Remove the node modules

    rm node_modules/Display-Web-Action-for-IBM-MCE-Cordova-Plugin
    rm node_modules/IBM-MCE-Cordova-Plugin
    rm node_modules/IBM-MCE-Cordova-Plugin-FCM
    rm node_modules/IBM-MCE-Cordova-Plugin-GCM
    rm node_modules/IBM-MCE-Geofence-Cordova-Plugin
    rm node_modules/IBM-MCE-iBeacon-Cordova-Plugin
    rm node_modules/IBM-MCE-Location-Cordova-Plugin
    rm node_modules/InApp-Action-for-IBM-MCE-Cordova-Plugin
    rm node_modules/Inbox-Action-for-IBM-MCE-Cordova-Plugin
    rm node_modules/Snooze-Action-for-IBM-MCE-Cordova-Plugin
    

    2. Remove the cordova plugins
        

    rm plugins/com.xtify.mce.sdk
    rm plugins/com.xtify.mce.sdk.beacon
    rm plugins/com.xtify.mce.sdk.calendar
    rm plugins/com.xtify.mce.sdk.displayweb
    rm plugins/com.xtify.mce.sdk.fcm
    rm plugins/com.xtify.mce.sdk.geofence
    rm plugins/com.xtify.mce.sdk.inapp
    rm plugins/com.xtify.mce.sdk.inbox
    rm plugins/com.xtify.mce.sdk.location
    rm plugins/com.xtify.mce.sdk.snooze
    

        
    3. Edit package.json and package-lock.json
         a. Remove each entry starting with com.xtify.mce.sdk in the “cordova”, “plugins” object
         b. Remove each entry containing IBM-MCE in the “dependencies” object

  2. Install new plugins from 3.8.0 SDK Package (replace below)

    Only install the plugins that were removed previously.

    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk --variable ANDROID_APPKEY=<android appkey> --variable IOS_DEV_APPKEY=<ios dev appkey> --variable IOS_PROD_APPKEY=<ios prod appkey> --variable SERVER_URL=<server base url> --force
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.fcm
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.dial
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.snooze
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.displayweb
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.calendar
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.inbox
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.inapp
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.geofence
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.location
    cordova plugin add <path to download>/plugins/co.acoustic.mobile.push.sdk.beacon --variable UUID=<beacon UUID>
    

    You may also need the AndroidX conversion plugins:

    cordova plugin add cordova-plugin-androidx-adapter
    cordova plugin add cordova-plugin-androidx
    

     

  3. In Xcode, replace the IBMMobilePushNotificationService.framework

    In Xcode, replace the IBMMobilePushNotificationService.framework with the AcousticMobilePushNotification.xcframework in the Notification Service Extension. This xcframework is included in the 3.8.0 SDK package.

  4. Add the following to your index.js file

    document.addEventListener('deviceready', function() {
    	// Replace on load
    	MCEPlugin.replaceImages();
       
    	// Listen for dark mode changes
    	window.matchMedia("(prefers-color-scheme: dark)").addListener(function(e) {e.matches && MCEPlugin.replaceImages(); });
    	
    	// Listen for light mode changes
    	window.matchMedia("(prefers-color-scheme: light)").addListener(function(e) {e.matches && MCEPlugin.replaceImages(); });
    });
    
  5. Execute cordova prepare

  6. Load into development environment or compile from command line as normal

    Dark Mode Support

    Android
    There is no support for Dark Mode in Android 10 in Cordova due to the lack of support in the web view libraries of the OS. Without this support automatic styling via CSS and even detection in Javascrpt is impossible.

    iOS
    On iOS, Dark Mode is supported via a combination of CSS and Javascript.

    @media (prefers-color-scheme: dark) {
    /* Dark Mode Stylesheet here */
    }
    

    The Javascript function, included in the SDK, replaces images loaded via `<img>` tags with images that are scaled to the display (@2x, @3x) and specific for the current mode (-dark, -light) So, in the case of a iPhone in dark mode, `<img src=”foo.png”>` might be replaced with `<img src=”foo-dark@3x.png”>` if the device has a 3x screen and a dark mode image included in the bundle. If those are not included, other varients will be attempted. See the code in MCEPlugin.js for details.

     

    document.addEventListener('deviceready', function() {
    	// Replace on load
    	MCEPlugin.replaceImages();
    	
    	// Listen for dark mode changes
    	window.matchMedia("(prefers-color-scheme: dark)").addListener(function(e) {e.matches && MCEPlugin.replaceImages(); });
    	
    	// Listen for light mode changes
    	window.matchMedia("(prefers-color-scheme: light)").addListener(function(e) {e.matches && MCEPlugin.replaceImages(); });
    
    }
    

     

Expected outcome

Need more help? Check out all of our available tutorials for mobile app messaging here.

Join The Discussion

Your email address will not be published. Required fields are marked *