Capacitor: Platform-specific preferences in capacitor.config.json

[jcleary98]

Is it possible to have different values for android and ios in capacitor.config.json? I need to add APP_SECRET (used by AppCenter plugins), which has different values on each platform. When I add the following:

"cordova": { "preferences": { "APP_SECRET": "0000-0000-0000-0000-000000000000" } }

It will add this preference to the native config.xml files. If I manually add separate preference values to the config.xml files, they're cleared out when I run npx cap copy.

Alternatively, is there another way I can set these values in the native projects? Any help appreciated, thanks.

[jcesarmobile]

You are talking about cordova preferences and those don't support platform-specific values in cordova neither, so we won't implement this in Capacitor as it will make it different from Cordova behaviour.

For Capacitor configurations, some of them allow different values per platform.

[asangadev]

Is it possible to have different values for android and ios in capacitor.config.json? I need to add APP_SECRET (used by AppCenter plugins), which has different values on each platform. When I add the following:

"cordova": { "preferences": { "APP_SECRET": "0000-0000-0000-0000-000000000000" } }

It will add this preference to the native config.xml files. If I manually add separate preference values to the config.xml files, they're cleared out when I run npx cap copy.

Alternatively, is there another way I can set these values in the native projects? Any help appreciated, thanks.

@jcleary98 did you find any solution for this?

[jcleary98]

@asangadev No, I haven't been able to integrate the App Center plugins as a result.

[tntwist]

Hi @jcesarmobile ,
working with platform specific preferences always worked in cordova for me.
This is also suggested by Microsoft in order to use the app center plugin for cordova:

As a complete example, for a Apache Cordova project that supports both Android and iOS targets, you'll have separate app project definitions in App Center, and therefore different app secret values for each target platform. The relevant section of the project's config.xml file will look like the following:

<platform name="android">
   <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000001" />
</platform>
<platform name="ios">
   <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000002" />
</platform>

See here: https://docs.microsoft.com/en-us/appcenter/sdk/getting-started/cordova

I could not find any specifiy statement on the cordova docs, that this is supported but I it works to specify specific preferences in the platform tags. This also works with preferences of some common cordova plugins like cordova-plugin-statusbar or cordova-plugin-splashscreen. There is even a blog post on the offical corodva blog showing how to set the "WKWebViewOnly"-Preference specific for iOS.

<platform name="ios">
    <preference name="WKWebViewOnly" value="true" />

    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>

    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>

It would be great if you could reconsider this issue.

@asangadev and @jcleary98
As a temporary workaround I dont use the copy command of capacitor via the Capacitor CLI.

I wrote a little script that adds this functionality on top of the copy command.
Please keep in mind this is just a REALLY dirty solution:

// task to copy only the web assets.
// uses capacitor infrastructure: https://github.com/ionic-team/capacitor/blob/master/cli/src/tasks/copy.ts
// added functionality to specify platform specific cordova settings
const Config = require('@capacitor/cli/dist/config');
const Copy = require('@capacitor/cli/dist/tasks/copy');

const replace = require('replace-in-file');
const path = require('path');

async function run() {
    const config = new Config.Config(process.platform, process.cwd(), '../node_modules/@capacitor/cli/bin');
    await copy(config, 'android');
    await copy(config, 'ios');

    // fixes google api key for uk.co.workingedge.phonegap.plugin.launchnavigator
    await replace({
        files: path.join(process.cwd(), '/android/**/*.*'),
        from: "$GOOGLE_API_KEY_FOR_ANDROID",
        to: "MYKEY"
    });
};

async function copy(config, platform) {
    let basePrefs;
    if (config.app.extConfig && config.app.extConfig.cordova && config.app.extConfig.cordova[platform]) {
        const platformPreferences = config.app.extConfig.cordova[platform].preferences;
        if (platformPreferences) {
            basePrefs = config.app.extConfig.cordova.preferences;

            let combinedPrefs = {};
            if (basePrefs) Object.assign(combinedPrefs, basePrefs);
            Object.assign(combinedPrefs, platformPreferences);
            config.app.extConfig.cordova.preferences = combinedPrefs;
        }
    }

    await Copy.copyCommand(config, platform);

    if (config.app.extConfig && config.app.extConfig.cordova) {
        config.app.extConfig.cordova.preferences = basePrefs;
    }
}

run();

Hope it can help you.

[jcleary98]

That's excellent @tntwist, I'll give it a try.

[tntwist]

I found a little bug in this script that sets the "global" cordova preferences to undefined when the given platform has no own preferences here is the updated script:

// task to copy only the web assets.
// uses capacitor infrastructure: https://github.com/ionic-team/capacitor/blob/master/cli/src/tasks/copy.ts
// added functionality to specify platform specific cordova settings
const Config = require('@capacitor/cli/dist/config');
const Copy = require('@capacitor/cli/dist/tasks/copy');

const replace = require('replace-in-file');
const path = require('path');

async function run() {
    const config = new Config.Config(process.platform, process.cwd(), '../node_modules/@capacitor/cli/bin');
    await copy(config, 'android');
    await copy(config, 'ios');

    // fixes google api key for uk.co.workingedge.phonegap.plugin.launchnavigator
    await replace({
        files: path.join(process.cwd(), '/android/**/*.*'),
        from: "$GOOGLE_API_KEY_FOR_ANDROID",
        to: "MYKEY"
    });
};

async function copy(config, platform) {
    let basePrefs;
    if (config.app.extConfig && config.app.extConfig.cordova) {
        basePrefs = config.app.extConfig.cordova.preferences;
    }

    if (config.app.extConfig && config.app.extConfig.cordova && config.app.extConfig.cordova[platform]) {
        const platformPreferences = config.app.extConfig.cordova[platform].preferences;
        if (platformPreferences) {
            let combinedPrefs = {};

            if (basePrefs) Object.assign(combinedPrefs, basePrefs);

            Object.assign(combinedPrefs, platformPreferences);

            config.app.extConfig.cordova.preferences = combinedPrefs;
        }
    }

    await Copy.copyCommand(config, platform);

    if (config.app.extConfig && config.app.extConfig.cordova) {
        config.app.extConfig.cordova.preferences = basePrefs;
    }
}

run();

[ollydixon]

Hello, I'm just getting into Ionic (React). I cannot figure out how to apply preferences; the config.xml doesn't work and there's no guide for Ionic Capacity?

[tntwist]

Hi @ollydixon ,
the config.xml from cordova does not work with capacitor.
You need to use the capactitor.config.json.

Here are the docs:
https://capacitorjs.com/docs/reference/config

If you want to apply platform specific preferences like in cordova you need to use the script I provided in this issue.
Here is an example config:

{
    "appId": "com.my.app",
    "appName": "My app",
    "bundledWebRuntime": false,
    "npmClient": "npm",
    "webDir": "www",
    "plugins": {
        "SplashScreen": {
            "launchAutoHide": false,
            "showSpinner": false,
            "spinnerColor": "#2698f3",
            "androidSplashResourceName": "splash_full"
        }
    },
    "cordova": {
        "android": {
            "preferences": {
                "APP_SECRET": "XXXDROID"
            }
        },
        "ios": {
            "preferences": {
                "APP_SECRET": "XXXXIOS"
            }
        }
    }
}

Have fun.

[ollydixon]

@tntwist thanks, I don't see the mention of 'preferences' anywhere on those docs? It's very confusing hehe.