HTML5 Mobile app localization using javascript and PhoneGap

Question

I'm creating a HTML5 mobile app that runs on all 3 mobile platforms (Android, iOS a,d Windows Mobile 8). I'm using javascript for localization(https://github.com/eligrey/l10n.js/#readme).

The app works fine on the browser. But when I deploy it on the mobile emulator the localization is not working.

I think the issue is that javascript gets language information from the browser, but in the mobile we run the HTML5 using PhoneGap.

Is there any way that I can enable localization using javascript in PhoeGap.

Answer 1

You can write your own JavaScript to grab the localisation language. This is the exact same reply I wrote elsewhere on here.

In general, the JavaScript window.navigator.language usually works for iOS and newer Androids, but earlier versions of Android have it hardcoded to en.

For older Androids I suggest pulling the language parameter out of the UserAgent string (yes sniffing!), e.g.

if (navigator && navigator.userAgent && (androidLang = navigator.userAgent.match(/android.*\W(\w\w)-(\w\w)\W/i))) {
   lang = androidLang[1];
}

Here, lang might also contain the country code (e.g. 'en-IE') so you might have to remove that also:

if (lang.indexOf('-') != -1) lang = lang.substring(0, lang.indexOf('-'));

This is what I've used in a recent app, using HTML5 and PhoneGap, and it works fine.

Answer 2

I've just solved same kind of problem by creating a custom PhoneGap plugins for each platforms that only returns the user's current locale.

for example, on Android, the plugin only checks:

var message = Locale.getDefault().getLanguage();

and then in Javascript side, when you've got that language name back, eg. en, you would use the JSON object that it named after that language. The example of JSON object would look like this:

MyApp.Language = en: {
    'Player'  : 'Player',
    'Players' : 'Players',
    'Not Set' : 'Not Set'
},
fi: {
    'Player'  : 'Pelaaja',
    'Players' : 'Pelaajat',
    'Not Set' : 'Ei määritetty'
}

The plugin for Android is simple as this:

JS file

window.localizeMe = {
    getDefaultLocale: function( callback ) {
        cordova.exec(
            callback,
            function(err) {
                callback( 'Error: ' + err.code );
            },
            "LocalizeMe",
            "getDefaultLocale",
            []);
    }
}

Java file

public class LocalizeMe extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("getDefaultLocale")) {
            String message = Locale.getDefault().getLanguage();
            this.getDefaultLocale(message, callbackContext);
            return true;
        }
        return false;
    }

    private void getDefaultLocale(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) { 
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }

}

And finally, in your main JS file, you set your app's language:

window.localizeMe.getDefaultLocale( function( result ) {
    if ( result != null && result.length > 0 ) {
        if ( result.toLowerCase().indexOf( 'fi' ) !== -1 ) {
            MyApp.Lang = MyApp.Language.fi;
        } else {
            MyApp.Lang = MyApp.Language.en;
        }
    }
});

Answer 3

There's one common pitfall with localisation, maybe this is your problem:
Many devices report locales in the form of de_DE, en_GB, etc... - note the underscore.

l10n (or in my case, globalize.js) use a hyphen to separate language and country - thus no matching culture is found and it comes up with the default fallback.

Put a console.log in your app to dump the locale string you are getting, then go the the console and check with adb logcat whether this might be the case on your device. Then simply modify the string to allow matching (e.g. locale.value.replace('_', '-') )