Cordova

On a recent app I worked on, we needed to internationalize the App Name. Currently, Cordova does not allow you to easily handle this via configuration. One alternative is to open the Android project and modify it to include the internationalization. However, if a developer removes the platform, the process has to be repeated. This article explains how to accomplish this in a repeatable process that works when the developer removes and adds the Android App. I will be using the Ionic Framework to build this sample app; however, this should work for any Cordova project.

Why do I want this repeatable? Great, question. Maybe I have an App that is used by multiple clients so I need a configurable build process for each client where one client supports English but another supports English and Spanish. If so, this builds the basic foundation necessary to create such a dynamic build environment.

Assumptions: I am assuming you have some experience writing Mobile Hybrid Apps with Cordova and Ionic Framwork.

Cordova Hooks

Cordova allows developers to create hooks that run to customize Cordova commans like adding/removing platforms, running a build, etc. Hooks can be written in any language according to their documentation but I personally have only used Node.js for writing hooks.

This hook has a dependency for the the fs.extra NPM Package. It can be found in the following location. Dependencies

For this project, our hook will run when the Android app is prepared. Therefore, we will create a js file named 020_i18n_app_name.js in the “hooks/after_prepare” folder.

Unlike iOS, this is rather simple. We just need to copy the necessary resources files into the Android project. Therefore, this hook checks to see if the Cordova Project is configured for the Android platform and the copies predefined Android Resource files to the appropriate Android platform folder.

You need to create a values folder for each language. The default language will have a folder called values; while each other language will use the following syntax: values-{{language code}}. IE. values-fr for French, values-es for Spanish, etc…

I placed these folders and files under a folder called resources/android in my root folder for my project. The hook will then copy the files to the appropriate location in the Android project.

Check it out

Since I am using Ionic, I’ll run the following command:

ionic run android

That command is basically a wrapper for the Cordova command. Notice the output and you will see the hook running and adding the files to the Android project before building and installing the app.

Conclusion

At this time, this process certainly meets my needs. But this obviously could be considered immature and easily improved on by adding configuration to config.xml that contains the languages and resource locations. Certainly a project for another day!