Configurar reescrituras de internacionalización (i18n)

Use reescrituras de internacionalización ("reescrituras de i18n") para servir contenido diferente según el país del usuario o el idioma preferido. Estas son algunas configuraciones de ejemplo que podría configurar:

  • Sirva 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

  • Sirva contenido en francés estándar a los usuarios que prefieren el francés, pero para los usuarios canadienses que prefieren el francés, sirva contenido en francés canadiense en su lugar.
    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

  • Sirva 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 de vacaciones)

  • Sirva contenido en francés canadiense a los usuarios canadienses que prefieran el francés.
    Ejemplo: una página de inicio con frases en francés canadiense y una característica específica de Canadá (como un tema de vacaciones)

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

Configurar reescrituras i18n

Para configurar reescrituras de i18n para su sitio de alojamiento, debe crear un directorio de "contenido de i18n" para todo su contenido localizado, luego agregue el atributo i18n a su archivo firebase.json para apuntar a su nuevo directorio de "contenido de 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", luego cree subcarpetas para cada combinación de idioma y país compatible con su sitio.

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

    Aquí hay un ejemplo de directorio 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 nombres 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 los usuarios que tienen esa preferencia de idioma, pero el contenido no es específico del 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 usar 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/ ).

    Los archivos en una subcarpeta no necesitan tener archivos análogos en el directorio public u otras subcarpetas. Puede crear contenido que sea completamente específico para 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". Continuando 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 subcarpetas de "contenido i18n", debe usar minúsculas para los códigos de país e idioma. Puede usar 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 cuando utilice códigos de idioma:

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

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

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

Orden de prioridad para "contenido i18n"

Si configura reescrituras de i18n, Hosting sirve 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 pedido sigue los valores de calidad para cada idioma en el encabezado Accept-Language idioma 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 pedido sigue los valores de calidad para cada idioma en el encabezado Accept-Language idioma 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. manejo 404

    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 solicitud de información

    • Códigos de idioma: fr , en (francés, luego inglés)
      Los códigos de idioma se ordenan en función de 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. manejo 404

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

  • Página solicitada: index.html

  • Página solicitada: awesome-page.html

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

  • El directorio localized-files/ en realidad no contiene en_ca/ , en_ALL/ o en/ , por lo que Hosting simplemente omitirá la lista de prioridades hasta que encuentre una subcarpeta que coincida con 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 de las preferencias de país e idioma del usuario. Sin embargo, si existen ambas subcarpetas, Hosting fr_ALL/ content antes que fr/ content.

Puede cambiar el contenido que se sirve mediante el uso de cookies para anular los encabezados de país e idioma.

Aquí hay algunas formas en que puede usar anulaciones de cookies:

  • Pruebe una característica con diferentes combinaciones de idioma/país para verificar qué contenido se sirve.

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

Para configurar anulaciones de cookies, configure las 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 separada por comas de códigos de idioma en orden de preferencia, sin subetiquetas ni valores de calidad.

Las anulaciones de cookies no se reflejan en los registros.