How to set Cordova plugin variables in a Capacitor app?

Question

I am attempting to set up the Wonderpush integration for Ionic using the docs at https://docs.wonderpush.com/docs/mobile-push-notifications-ionic

The instructions say to install the plugin with:

ionic cordova plugin add wonderpush-cordova-sdk --variable CLIENT_ID=YOUR_CLIENT_ID --variable CLIENT_SECRET=YOUR_CLIENT_SECRET --variable SENDER_ID=YOUR_SENDER

...but since my app is a Capacitor app, I must install the plugin with:

npm install wonderpush-cordova-sdk

I can't figure out how to set the CLIENT_ID, CLIENT_SECRET, and SENDER_ID when installing the plugin this way (there is no “ --variable ” flag for this command), and I'm getting a runtime error when running the app on my device saying those variables are missing. Do you know how I can populate these values? Thanks in advance!

Answer 1

I was able to find where to put these variables. In capacitor.config.json , I made the following changes to the "cordova": {} element.

"cordova": {
    "preferences": {
      "WONDERPUSH_CLIENT_ID": "<YOUR-CLIENT-ID>",
      "WONDERPUSH_CLIENT_SECRET": "<YOUR-CLIENT-SECRET>",
      "WONDERPUSH_LOGGING": true,
      "WONDERPUSH_AUTO_INIT": true,
      "WONDERPUSH_REQUIRES_USER_CONSENT": false
    }
  }

Then, I ran ionic cap sync , started the app from the IDE, and success!

Answer 2

Capacitor apps do not support variables while installing a plugin. This is because Capacitor apps are more native oriented and do not provide configuration hooks via command line like Cordova does.

To add variable with a plugin, you need to manually update AndroidManifest.xml for Android and Info.plist for iOS . You can get more details about it here https://www.joshmorony.com/using-cordova-plugins-that-require-install-variables-with-capacitor/

Example: <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>

Although these configuration settings are missing in the current documentation of Ionic plugins but for popular plugins, you can check their native versions documents and update the platform files accordingly.

Wondershare Android Configuration: Look for "Alternate ways of specifying configuration options", Section

https://docs.wonderpush.com/docs/android-sdk#alternate-ways-of-specifying-configuration-options

Answer 3

You can automatically update the AndroidManifest.xml for Android and Info.plist for iOS using Ionic's Trapeze tool .