Platform-specific preferences in capacitor.config.json

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.

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

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