Search code examples
androidioscordovalocalizationinappbrowser

Redirect user to specific language url based on OS language in Cordova webview app


I have following code in my index.html in a Cordova project:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="img-src * 'self' data:; default-src * 'self' gap: wss: ws: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>MyBilli</title>
    </head>
    <body>
    <script type="text/javascript">
        document.addEventListener('deviceready', function() {
            var url = 'http://sub.domain.com/app/nl/login/' // change to whatever you want
            cordova.InAppBrowser.open(url, '_blank', 'location=no,zoom=no');
        }, false)
    </script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

The list of current Cordova plugins:

cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-media 3.0.1 "Media"
cordova-plugin-media-capture 1.4.3 "Capture"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"

Is it possible to redirect a user based on his OS language (only 3 languages allowed: en, fr or nl) to a different url: sub.domain.com/app/[en|fr|nl]/login/

If en, fr or nl is not user's OS language, default to en


Solution

  • Looks like you can get the devices language with https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-globalization/

    You'd then just have to replace the url parts for what is picked up