Localization, HTML5 and WebView

I will to release the first version of my game, and this version it only will be in English. Not that there are many lines to translate bu I sent the first build to the App Store (Waiting for review) and now I'll wait to the next version.

The point is that it's the first time I'm going to localize an HTML5 App and I have to investigate how can I do it. It's not possible to use the Android or iOS system to localize apps because the messages appear in dialog boxes into the webview. So I've been looking how I can do it.

If I had created the app with Apache Cordova, there is a module named Globalization for this and information can be found here. But I don't use Cordova so that I can't use it. Another option will could be i18next but when use it in a webview without server appear problems with CORS for what I can not use. More info of i18next here and CORS here.

Finally I opted for write by myself the code necessary for localize the few text who appear in the dialogs. 

For that I write the text strings in JSON format like as

 
var resources = {
    
    "en": {
        "invalidMovement": "This node is not in the route",
        "isVisited": "A node can only be visited once",

        ...........
    },
    
    "es": {
        "invalidMovement": "Este nodo no está en la ruta",
        "isVisited": "Un nodo solo puede ser visitado una vez",
        
        ...........
    },
    
    "ca": {
        "invalidMovement": "Aquest node no es a la ruta",
        "isVisited": "Un node sols pot ser visitat un cop",
      
        ...........
    }
    
}

And in the dialog boxes functions

 
        var lng = navigator.language.split("-");        

        var message;
        var close; 

        if (lng[0] === "ca") {
            message = resources.ca.isVisited;
            close = resources.ca.close;
        }else if (lng[0] === "es") {
            message = resources.es.isVisited;

            close = resources.es.close;

        } else {
            message = resources.en.isVisited;        

            close = resources.en.close;
        }

        document.getElementById('loser').innerHTML = message;
        document.getElementById('closeLoser').innerHTML = close;

First you get the language, next get the string from the resources and finally writes the result.

I don't know if this is the best option, but it is easy to implement and for a little project I think it is sufficient.