Documentation
Help CenterCommunityDevelopersAcademyStatus

Migrate Cordova plugin from 3.6.5 to 3.8.0

Suggest Edits

Replace the plugins

📘

Note:

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

  1. Run the following shell command to see what plugins are installed:
cordova plugin ls
  1. 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
  1. If the Cordova system refuses to remove the plugins, complete the following steps:

a. 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

b. 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

c. Edit package.json and package-lock.json to remove

  • Each entry starting with com.xtify.mce.sdk in the cordova, plugins object.
  • Each entry containing IBM-MCE in the dependencies object.
  1. Install new plugins from 3.8.0 SDK package

📘

Note:

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

  1. 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.

  2. 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(); });
});
  1. Load into the development environment or compile from the command line as normal. 
`cordova prepare`

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 Javascript is impossible.

iOS
On iOS, Dark mode is supported through 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 through the <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 an iPhone in dark mode, <img src=”foo.png”> might be replaced with <img src=”[email protected]”> 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(); });

}

Updated 8 months ago