Configurar reescrituras de internacionalización (i18n)

Utilice reescrituras de internacionalización ("reescrituras i18n") para ofrecer contenido diferente según el país o el idioma preferido del usuario. A continuación se muestran algunos ejemplos de configuraciones que puede configurar:

  • Ofrezca el mismo contenido en francés a todos los usuarios que prefieran el francés (independientemente del país).
    Ejemplo: una página de inicio con texto en francés

  • Ofrezca contenido en francés estándar a los usuarios que prefieran el francés, pero para los usuarios canadienses que prefieran el francés, proporcione contenido en francés canadiense.
    Ejemplo: una página de inicio con redacción en francés estándar frente a una página de inicio con redacción en francés canadiense

  • Ofrecer el mismo contenido a todos los usuarios canadienses (independientemente de su preferencia de idioma).
    Ejemplo: una página de inicio con el idioma "predeterminado" de su sitio pero con una característica específica de Canadá (como un tema festivo)

  • Ofrezca contenido en francés canadiense a usuarios canadienses que prefieran el francés.
    Ejemplo: una página de inicio con redacción en francés canadiense y una característica específica de Canadá (como un tema festivo)

Firebase Hosting determina el país de un usuario a partir de su dirección IP y las preferencias de idioma del usuario a partir del encabezado de solicitud Accept-Language (generalmente configurado automáticamente por su navegador web ).

Configurar reescrituras i18n

Para configurar reescrituras de i18n para su sitio de hosting, debe crear un directorio de "contenido i18n" para todo su contenido localizado y luego agregar el atributo i18n a su archivo firebase.json para que apunte a su nuevo directorio de "contenido i18n".

Aquí están los pasos detallados:

  1. Dentro de la carpeta public del directorio de su aplicación local, cree un directorio separado para su "contenido i18n" y luego cree subcarpetas para cada combinación de idioma y país admitida por su sitio.

    En cada subcarpeta, agregue el contenido específico para esa combinación, como páginas de inicio con temas navideños o páginas 404 específicas de un idioma.

    Aquí hay un ejemplo de directorio de "contenido i18n" llamado localized-files :

    public/
        index.html  // your site's default homepage
        404.html  // your site's custom 404 page
    
        localized-files/
            ALL_ca/
                index.html
            es_ALL/
                index.html
                404.html
            fr/
                index.html
                404.html
            fr_ca/
                index.html
    

    El directorio localized-files/ contiene subcarpetas separadas para cada combinación de idioma y país admitida por su sitio. El patrón de nomenclatura para cada subcarpeta debe seguir cualquiera de estos formatos:

    • languageCode_countryCode : Contiene contenido específico para usuarios que tienen esa preferencia de idioma y ese código de país.

    • languageCode : contiene contenido específico para usuarios que tienen esa preferencia de idioma, pero el contenido no es específico de un país; básicamente equivalente a languageCode_ALL

    Consulte la subsección Códigos de país e idioma a continuación para obtener más detalles sobre estos códigos. Puede utilizar el valor de ALL (distingue entre mayúsculas y minúsculas) para indicar cualquier país (como es_ALL/ ) o cualquier idioma (como ALL_ca/ ).

    No es necesario que los archivos de una subcarpeta tengan archivos análogos en el directorio public u otras subcarpetas. Puede crear contenido que sea completamente específico de un idioma y/o país.

  2. Agregue el atributo i18n a su archivo firebase.json y especifique el directorio que contiene su "contenido i18n". Siguiendo con nuestro ejemplo:

    // firebase.json
    
    "hosting": {
    
      "public": "public",
    
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
    
      "i18n": {
        "root": "/localized-files"  // directory that contains your "i18n content"
      }
    
      ...
    }
    

    El directorio especificado para root debe ser el nombre del directorio que contiene todas las subcarpetas de "contenido i18n". Si colocó todas sus subcarpetas de "contenido i18n" en la raíz de su directorio public , use / para el valor de root . Las barras diagonales iniciales y finales en el valor root son opcionales.

  3. Implemente su "contenido i18n" y configúrelo en su sitio de alojamiento.

Puede probar su configuración mediante anulaciones de cookies .

Códigos de país e idioma

Al nombrar las subcarpetas de "contenido i18n", debe utilizar minúsculas tanto para los códigos de país como de idioma. Puede utilizar el valor de ALL (distingue entre mayúsculas y minúsculas) para indicar cualquier país (como es_ALL/ ) o cualquier idioma (como ALL_ca/ ).

Hosting obtiene el código de país de la dirección IP del usuario. Los códigos de país son códigos ISO 3166-1 alfa-2 de dos letras.

Los códigos de idioma se obtienen del encabezado de solicitud Accept-Language del usuario (generalmente configurado automáticamente por su navegador web ). Son códigos ISO 639-1 . Tenga en cuenta lo siguiente al utilizar códigos de idioma:

  • Cuando Hosting busca qué "contenido i18n" servir, ordena los idiomas según los valores de calidad en el encabezado Accept-Language .

  • Hosting elimina las subetiquetas regionales y de país en el encabezado Accept-Language , por lo que el código de idioma en el nombre de una subcarpeta "contenido i18n" no puede contener estas subetiquetas. Por ejemplo, no puedes usar es-419 o es-US como código de idioma en el nombre de una subcarpeta, pero puedes usar es .

    Si desea ofrecer contenido regional o nacional específico, puede crear subcarpetas que contengan el contenido específico del idioma y del país que desea admitir.

Orden de prioridad para "contenido i18n"

Si configura reescrituras i18n, Hosting ofrece contenido según el siguiente orden de prioridad:

  1. Espacios de nombres reservados que comienzan con un segmento de ruta /__/*

  2. Redirecciones configuradas

  3. Contenido estático de coincidencia exacta

    1. Código de idioma + Código de país (por ejemplo, contenido de fr_ca/ )
      El orden sigue los valores de calidad para cada idioma en el encabezado Accept-Language de la solicitud.

    2. Solo código de país (por ejemplo, contenido de ALL_ca/ )

    3. Solo código de idioma (por ejemplo, contenido de fr/ o es_ALL/ )
      El orden sigue los valores de calidad para cada idioma en el encabezado Accept-Language de la solicitud.

    4. Contenido estático de coincidencia exacta "predeterminado"
      Este es contenido que está fuera del directorio "contenido i18n", como en la raíz del directorio public .

  4. Reescrituras configuradas

  5. 404 manejo

    1. i18n 404 páginas
      Esto sigue el mismo orden de prioridad mencionado anteriormente para el contenido estático de coincidencia exacta.

    2. Página 404 personalizada

    3. Página 404 predeterminada (proporcionada por Firebase)

Ejemplo de orden de prioridad

Sigamos con nuestro ejemplo de arriba. Usaremos el mismo directorio de ejemplo y una solicitud de ejemplo.

  • Ejemplo de directorio de proyecto local con un directorio de "contenido i18n" (llamado localized-files )

    public/
        index.html  // your site's default homepage
        404.html  // your site's custom 404 page
    
        localized-files/
            ALL_ca/
                index.html
            es_ALL/
                index.html
                404.html
            fr/
                index.html
                404.html
            fr_ca/
                index.html
    
  • Ejemplo de información de solicitud

    • Códigos de idioma: fr , en (francés, luego inglés)
      Los códigos de idioma se ordenan según los valores de calidad en el encabezado Accept-Language .

    • Código de país: ca (Canadá)

De acuerdo con el orden de prioridad de coincidencia exacta y los valores de calidad para las preferencias de idioma, Hosting buscará en los directorios una página solicitada en el siguiente orden.

  1. public/localized-files/fr_ca/

  2. public/localized-files/en_ca/

  3. public/localized-files/ALL_ca/

  4. public/localized-files/fr_ALL/

  5. public/localized-files/fr/

  6. public/localized-files/en_ALL/

  7. public/localized-files/en/

  8. public/

  9. 404 manejo

¿Qué página se mostrará al usuario?

  • Página solicitada: index.html

  • Página solicitada: awesome-page.html

Tenga en cuenta lo siguiente acerca de esta búsqueda y servicio del directorio "contenido i18n":

  • El directorio localized-files/ en realidad no contiene las subcarpetas en_ca/ , en_ALL/ o en/ , por lo que Hosting simplemente saltará la lista de prioridades hasta que encuentre una subcarpeta coincidente para la combinación de idioma y país de la solicitud.

  • Aunque el directorio localized-files/ contiene una subcarpeta es_ALL/ , la solicitud de ejemplo anterior no incluye un código de idioma es o es-foo , por lo que Hosting no buscará "contenido i18n" que coincida con es .

  • Las subcarpetas denominadas fr/ y fr_ALL/ son equivalentes desde la perspectiva del país y las preferencias de idioma del usuario. Sin embargo, si ambas subcarpetas existen, Hosting servirá el contenido fr_ALL/ antes que el contenido fr/ .

Puede cambiar el contenido que se ofrece utilizando cookies para anular los encabezados de país e idioma.

A continuación se muestran algunas formas en las que puede utilizar las anulaciones de cookies:

  • Pruebe una función con diferentes combinaciones de idioma/país para comprobar qué contenido se ofrece.

  • Permita que sus usuarios cambien el contenido que ven. Por ejemplo, puede implementar un selector de idioma y luego configurar la cookie firebase-language-override del usuario en consecuencia.

Para configurar la anulación de cookies, configura cookies con ambos o cualquiera de estos nombres: firebase-country-override y firebase-language-override . Por ejemplo, el siguiente fragmento de código JavaScript anula el código de país para que sea ca y el encabezado Accept-Language para que sea fr,en :

document.cookie = "firebase-country-override=ca";
document.cookie = "firebase-language-override=fr,en";

Las anulaciones de cookies de idioma deben ser una lista de códigos de idioma separados por comas en orden de preferencia, sin subetiquetas ni valores de calidad.

Las anulaciones de cookies no se reflejan en los registros.