Cordova - Globalization

Cordova - Globalization & Localization

Previously, cordova-plugin-globalization was used for accessing user’s locale, language, date/time, and currency information. However, this plugin is now deprecated as the W3C specification it was based on has been retired.

The modern and recommended approach for globalization and localization in JavaScript-based applications, including Cordova apps, is to use the built-in ECMAScript Internationalization API (Intl object). This API provides powerful tools for language-sensitive string comparison, number formatting, and date/time formatting.

Using the ECMAScript Internationalization API (Intl)

The Intl object is a namespace for the ECMAScript Internationalization API. It’s available in all modern web views and JavaScript environments, so no additional Cordova plugin is required for these functionalities.

1. Getting the User’s Preferred Language/Locale

You can determine the user’s preferred language(s) using navigator.language or navigator.languages.

// Add this code after the 'deviceready' event or when your app initializes

function displayLocaleInfo() {
    const preferredLanguage = navigator.language;
    console.log('Preferred language (navigator.language):', preferredLanguage); // e.g., "en-US"

    const preferredLanguages = navigator.languages;
    console.log('Preferred languages (navigator.languages):', preferredLanguages); // e.g., ["en-US", "en", "es"]

    // You can use this information to load appropriate resources or set the app's language
    alert('Preferred Language: ' + preferredLanguage);
}

// Example: Call this when a button is clicked or on app start
// document.getElementById('getLocaleInfoButton').addEventListener('click', displayLocaleInfo);

2. Formatting Dates and Times

Intl.DateTimeFormat enables language-sensitive date and time formatting.

function formatCurrentDate() {
    const now = new Date();
    const userLocale = navigator.language || 'en-US'; // Fallback to 'en-US'

    // Simple date format
    const simpleFormatter = new Intl.DateTimeFormat(userLocale);
    console.log('Simple Date:', simpleFormatter.format(now));

    // More detailed format
    const options = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        timeZoneName: 'short'
    };
    const detailedFormatter = new Intl.DateTimeFormat(userLocale, options);
    console.log('Detailed Date:', detailedFormatter.format(now));
    alert('Formatted Date (' + userLocale + '): ' + detailedFormatter.format(now));
}

// Example: Call this when a button is clicked
// document.getElementById('formatDateButton').addEventListener('click', formatCurrentDate);

3. Formatting Numbers

Intl.NumberFormat enables language-sensitive number formatting.

function formatSampleNumber() {
    const number = 123456.789;
    const userLocale = navigator.language || 'en-US';

    const numberFormatter = new Intl.NumberFormat(userLocale);
    console.log('Formatted Number:', numberFormatter.format(number));
    alert('Formatted Number (' + userLocale + '): ' + numberFormatter.format(number));
}

4. Formatting Currency

Intl.NumberFormat can also format currency values according to locale conventions.

function formatCurrencyValue() {
    const amount = 98765.43;
    const userLocale = navigator.language || 'en-US';

    // Determine currency based on locale or app setting
    // This is a simplified example; robust currency detection might be more complex
    let currencyCode = 'USD'; // Default
    if (userLocale.startsWith('en-GB')) currencyCode = 'GBP';
    if (userLocale.startsWith('de')) currencyCode = 'EUR';
    // For a real app, you might get this from user settings or a more reliable source.

    const currencyFormatter = new Intl.NumberFormat(userLocale, {
        style: 'currency',
        currency: currencyCode // ISO 4217 currency code
    });
    console.log('Formatted Currency:', currencyFormatter.format(amount));
    alert('Formatted Currency (' + userLocale + ', ' + currencyCode + '): ' + currencyFormatter.format(amount));
}

Implementation Steps in a Cordova App

1. Remove cordova-plugin-globalization: If your project still has it, remove it: cordova plugin rm cordova-plugin-globalization.

2. Use Intl API: Implement the desired formatting using the Intl object as shown in the examples above. You can create utility functions for reuse across your app.

3. HTML Structure (Example): If you want to trigger these functions from buttons:

<!-- In index.html -->
<button id="getLocaleInfoButton">Get Locale Info</button>
<button id="formatDateButton">Format Date</button>
<button id="formatNumberButton">Format Number</button>
<button id="formatCurrencyButton">Format Currency</button>

4. JavaScript Event Listeners (Example):

// In your app's JavaScript file (e.g., index.js), after 'deviceready'
document.addEventListener('deviceready', () => {
    document.getElementById("getLocaleInfoButton").addEventListener("click", displayLocaleInfo);
    document.getElementById("formatDateButton").addEventListener("click", formatCurrentDate);
    document.getElementById("formatNumberButton").addEventListener("click", formatSampleNumber);
    document.getElementById("formatCurrencyButton").addEventListener("click", formatCurrencyValue);
    // Define the functions displayLocaleInfo, formatCurrentDate, etc., as shown above.
}, false);

Benefits of using Intl API

For comprehensive internationalization (i18n) including translating strings, consider using libraries like i18next or framework-specific solutions (e.g., vue-i18n, react-intl) in conjunction with the Intl API for formatting.

Further Reading: MDN Web Docs for Intl, navigator.language, and navigator.languages.