Changing the language of a Phonegap App.
All my iOS apps have app store descriptions in multiple languages, the download increase from this simple step alone is enormous. However, I did notice that the increase in downloads doesn’t match the increase in actual app engagement, and it’s pretty obvious why, a Russian user might be tempted to download your app from your description in Russian, but then once downloaded, can’t use the app because he doesn’t speak english.
Earlier in this blog, I listed a way to determine the user’s language by using HTTP headers, however, I thought that it’s not a great solution, since I’m relying on a third party service, which could go offline tomorrow. So, I used a better solution as follows;
function checkLanguage()
{
navigator.globalization.getPreferredLanguage(
function (language)
{
console.log(‘language: ‘ + language.value + ‘\n’);
changelanguage(language.value);
},
function () {
console.log(‘Error getting language\n’);}
);
}
This only works in the context of PhoneGap, and not in the normal web. But that didn’t matter for me. The next trick, is to test this in a real device, not the simulator, since the emulator has a bug that prevents this from happening naturally (there’s a work around via edit-scheme > options > language). But with a real iPhone to hand, it works perfectly.
What I did is created a JSON object like this;
var translations = {
“en” : {
“#line1” : “In order to use this app, you will need to install the print spooler software available for purchase at”,
“#btnBuy” : “Download Software”,
“#line2” : “You can use this app to send photos from your photo gallery to print. To send other types of files, simply email them as an attachment to [username] @printfromipad.com, where [username] is your username that you have previously set up.”,
“#line3” : “If you have any problems using this printing system, please email us at support@openmerchantaccount.com, or phone us on (0044)2871226151”,
“#btnCreateAccount” : “Register”,
“#btnLogin” : “Login”,
“.ui-title” : “Print”,
“.ui-header .ui-btn” : “Help”
},
“fr” : {
“#line1” : “Pour utiliser cette application, vous aurez besoin d’installer le logiciel du gestionnaire d’impression disponible à l’achat au”,
“#btnBuy” : “Télécharger le logiciel”,
“#line2” : “Vous pouvez utiliser cette application pour envoyer des photos de votre galerie de photos à imprimer. Pour envoyer d’autres types de fichiers, il suffit de les envoyer par courriel en pièce jointe à [nom d’utilisateur] @ printfromipad.com, où [nom d’utilisateur] est votre nom d’utilisateur que vous avez précédemment créé.”,
“#line3” : “Si vous avez des problèmes avec ce système d’impression, se il vous plaît écrivez-nous à support@openmerchantaccount.com, ou appelez-nous au (0044) 2871226151”,
“#btnCreateAccount” : “Créer un compte”,
“#btnLogin” : “Connexion”,
“.ui-title” : “Imprimer”,
“.ui-header .ui-btn” : “Aide”
},
Where you can see a JQuery selector, and the localised text; and this is applied like this
function changelanguage(lang)
{
for(var i in translations[lang])
{
var translation = translations[lang][i];
console.log(i + “->” + translation);
$(i).html(translation);
}
}
Really happy with this. The only bug I found was that the element has to be present on-screen when changeLanguage is called, so in the next version, I’ll ensure that this is called on every page load.