Is there any way to add localization/translation to the permission strings I’ve setup in config.xml?
Looking specifically for a way, that will work with Voltbuilder and iOS builds.
For example, I’d like to serve this text in different languages depending on device-language:
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>Taking a picture for use on your user account</string>
</edit-config>
This plugin looks like a popular solution: cordova-plugin-localization-strings
Thank you. Unfortunately I’m not able to get cordova-plugin-localization-strings to work.
I’m still interested in hearing if anyone have.
Been trying to set the permission text of App Tracking Transparancy to a localized string depending on device language.
The App Tracking Transparancy plugin in question is
https://github.com/chemerisuk/cordova-plugin-idfa
By using cordova-plugin-localization-strings, I’ve setup a small test:
Project
Project Root
├-- config.xml
├-- translations
│ └-- app
│ ├-- da.json
│ └-- fr.json
├-- resources (optional)
│ ├-- android
│ └-- ios
├-- voltbuilder.json
└-- www (required)
├-- index.html (required)
└-- js
Config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.burfelt.translations" version="1.0.0" android-versionCode="100" ios-CFBundleVersion="1.0.0" xmlns="http://www.w3.org/ns/widgets">
<name>Translations</name>
<!-- Apptracktransparancy plugin -->
<plugin name="cordova-plugin-idfa" source="npm" spec="2.0.0" />
<edit-config target="NSUserTrackingUsageDescription" file="*-Info.plist" mode="merge">
<string>Your data may be used to deliver personalized ads for you.</string>
</edit-config>
<!-- Localization plugin -->
<pluging name="cordova-plugin-localization-strings" source="npm" spec="3.2.1" />
<!-- Other Plugins -->
<plugin name="cordova-plugin-splashscreen" spec="~6.0.0" />
<plugin name="cordova-plugin-device" source="npm" spec="~2.0.3" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.3.5" />
<plugin name="cordova-plugin-statusbar" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="BackgroundColor" value="#060411" />
<preference name="AndroidXEnabled" value="true" />
<preference value="true" name="DisallowOverscroll" />
<preference value="portrait" name="orientation" />
<preference value="handset" name="target-device" />
<platform name="android">
<icon src="www/res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="www/res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="www/res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="www/res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="www/res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="www/res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="www/res/splash/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="www/res/splash/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="www/res/splash/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="www/res/splash/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="www/res/splash/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="www/res/splash/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<platform name="ios">
<icon src="www/res/icon/ios/icon-1024.png" width="1024" platform="ios" height="1024"/>
<icon src="www/res/icon/ios/icon-83.5@2x.png" width="167" platform="ios" height="167"/>
<icon src="www/res/icon/ios/icon.png" width="57" platform="ios" height="57"/>
<icon src="www/res/icon/ios/icon@2x.png" width="114" platform="ios" height="114"/>
<icon src="www/res/icon/ios/icon-40.png" width="40" platform="ios" height="40"/>
<icon src="www/res/icon/ios/icon-40@2x.png" width="80" platform="ios" height="80"/>
<icon src="www/res/icon/ios/icon-50.png" width="50" platform="ios" height="50"/>
<icon src="www/res/icon/ios/icon-50@2x.png" width="100" platform="ios" height="100"/>
<icon src="www/res/icon/ios/icon-60.png" width="60" platform="ios" height="60"/>
<icon src="www/res/icon/ios/icon-60@2x.png" width="120" platform="ios" height="120"/>
<icon src="www/res/icon/ios/icon-60@3x.png" width="180" platform="ios" height="180"/>
<icon src="www/res/icon/ios/icon-72.png" width="72" platform="ios" height="72"/>
<icon src="www/res/icon/ios/icon-72@2x.png" width="144" platform="ios" height="144"/>
<icon src="www/res/icon/ios/icon-76.png" width="76" platform="ios" height="76"/>
<icon src="www/res/icon/ios/icon-76@2x.png" width="152" platform="ios" height="152"/>
<icon src="www/res/icon/ios/icon-small.png" width="29" platform="ios" height="29"/>
<icon src="www/res/icon/ios/icon-small@2x.png" width="58" platform="ios" height="58"/>
<icon src="www/res/icon/ios/icon-small@3x.png" width="87" platform="ios" height="87"/>
<splash src="www/res/splash/ios/Default@2x~universal~anyany.png"/>
</platform>
<!-- Allow intents and access -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<allow-navigation href="*" />
<allow-intent href="maps:*" />
<access origin="*" subdomains="true" />
</widget>
Index.html:
<html>
<head>
<title>Translation</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=no, viewport-fit=cover">
<meta name="description" content="Translations">
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="app">
<h1>Testing Permission Translations</h1>
<p>This app should open the standard App Tracking Transparency permission pop-up from Apple. The permission text should be translated.</p>
<button id="btn-idfa">Trigger Permssion</button>
<br><br>
<button id="btn-language">Detect language of browser/device</button>
</div>
<script>
$(function(){
$("#btn-labguage").on('click', function(e) {
alert(window.navigator.language);
});
$("#btn-idfa").on('click', function(e) {
const idfaPlugin = cordova.plugins.idfa;
idfaPlugin.getInfo()
.then(info => {
if (!info.trackingLimited) {
return info.idfa || info.aaid;
} else if (info.trackingPermission === idfaPlugin.TRACKING_PERMISSION_NOT_DETERMINED) {
return idfaPlugin.requestPermission().then(result => {
if (result === idfaPlugin.TRACKING_PERMISSION_AUTHORIZED) {
return idfaPlugin.getInfo().then(info => {
return info.idfa || info.aaid;
});
}
});
}
})
.then(idfaOrAaid => {
if (idfaOrAaid) {
console.log(idfaOrAaid);
}
});
});
});
</script>
</body>
</html>
Example translation .json file (da.json):
{
"config_ios" : {
"NSUserTrackingUsageDescription": "Din data kan bruges til at lave personificerede reklamer.",
}
}
Unfortunately the build defaults to the english permission text set in config.xml.
Removing the permission text from config.xml will crash the app, which is a known error in plugins when permission strings are not defined.
I’m humbly looking for any insights that anyone can bring to the table, on how to have localized permission strings that will work in Volt Builder - thanks.
You might ask the maintainers of cordova-plugin-idfa if they have suggestions.