Configurer les réécritures d'internationalisation (i18n)

Utilisez des réécritures d'internationalisation ("réécritures i18n") pour diffuser du contenu différent en fonction du pays ou de la langue préférée de l'utilisateur. Voici quelques exemples de configurations que vous pouvez configurer:

• Diffusez le même contenu en français auprès de tous les utilisateurs qui préfèrent le français (quel que soit leur pays).
  Exemple: une page d'accueil en français

• Diffusez du contenu en français standard auprès des utilisateurs qui préfèrent le français, mais pour les utilisateurs canadiens qui préfèrent le français, diffusez plutôt du contenu en français canadien.
  Exemple: page d'accueil avec une formulation en français standard par rapport à une page d'accueil avec une formulation en français canadien

• Diffusez le même contenu auprès de tous les utilisateurs canadiens (quelle que soit leur langue préférée).
  Exemple: une page d'accueil dans la langue "par défaut" de votre site, mais avec une fonctionnalité spécifique au Canada (comme un thème de fête)

• Diffusez du contenu en français canadien auprès des utilisateurs canadiens qui préfèrent le français.
  Exemple: une page d'accueil avec des expressions en français canadien et une fonctionnalité spécifique au Canada (comme un thème de fête)

Firebase Hosting détermine le pays d'un utilisateur à partir de son adresse IP et ses préférences linguistiques à partir de l'en-tête de requête Accept-Language (généralement définies automatiquement par son navigateur Web).

Configurer les réécritures i18n

Pour configurer les réécritures i18n pour votre site Hosting, vous devez créer un répertoire "contenu i18n" pour tous vos contenus localisés, puis ajouter l'attribut i18n à votre fichier firebase.json pour qu'il pointe vers votre nouveau répertoire "contenu i18n".

Voici la procédure détaillée:

1. Dans le dossier public de votre répertoire d'application local, créez un répertoire distinct pour votre "contenu i18n", puis créez des sous-dossiers pour chaque combinaison de langue et de pays prise en charge par votre site.

   Dans chaque sous-dossier, ajoutez le contenu spécifique à cette combinaison, comme des pages d'accueil à thème de fête ou des pages 404 spécifiques à une langue.

   Voici un exemple de répertoire "contenu i18n" appelé 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
   

   Afficher les requêtes correspondantes pour le contenu de chaque sous-dossier

   public/
       // matches requests that aren't specified by your "i18n content" subfolders
       // example: display your homepage in the "default" language for your site with no country-specific features
       index.html  // your site's default homepage
       404.html  // your site's custom 404 page
   
       localized-files/
   
           // matches requests from Canada with any language preference
           // example: display your homepage in the "default" language for your site with a Canada-specific feature
           ALL_ca/
               index.html
   
           // matches requests from any country with a language preference of `es` or `es-foo`
           // example: display your homepage in Spanish with no country-specific features
           es_ALL/
               index.html
               404.html  // your site's custom 404 page in Spanish
   
           // matches requests from any country with a language preference of `fr` or `fr-foo`
           // example: display your homepage in Standard French with no country-specific features
           fr/
               index.html
               404.html  // your site's custom 404 page in French
   
           // matches requests from Canada with a language preference of `fr` or `fr-foo`
           // example: display your homepage in Canadian French and/or with a Canada-specific feature
           fr_ca/
               index.html
   
   

   Le répertoire localized-files/ contient des sous-dossiers distincts pour chaque combinaison de langue et de pays prise en charge par votre site. Le format de dénomination de chaque sous-dossier doit respecter l'un des formats suivants:

   • languageCode_countryCode: contient du contenu spécifique aux utilisateurs qui ont cette préférence linguistique et ce code pays

   • languageCode: contient du contenu spécifique aux utilisateurs qui ont cette préférence linguistique, mais le contenu n'est pas spécifique au pays. Il équivaut essentiellement à languageCode_ALL.

   Pour en savoir plus sur ces codes, consultez la sous-section Codes de pays et de langue ci-dessous. Vous pouvez utiliser la valeur ALL (sensible à la casse) pour indiquer n'importe quel pays (comme es_ALL/) ou n'importe quelle langue (comme ALL_ca/).

   Les fichiers d'un sous-dossier n'ont pas besoin d'avoir de fichiers analogues dans le répertoire public ou dans d'autres sous-dossiers. Vous pouvez créer des contenus entièrement spécifiques à une langue et/ou à un pays.

   Remarque :Consultez la section Ordre de priorité pour le contenu multilingue ci-dessous pour connaître l'ordre dans lequel Hosting sert vos fichiers de contenu multilingue.

2. Ajoutez l'attribut i18n à votre fichier firebase.json et spécifiez le répertoire contenant votre "contenu i18n". Poursuivons notre exemple:

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

   Le répertoire spécifié pour root doit être le nom du répertoire contenant tous vos sous-dossiers de contenu i18n. Si vous avez placé tous vos sous-dossiers "contenu i18n" à la racine de votre répertoire public, utilisez / pour la valeur de root. Les barres obliques de début et de fin de la valeur root sont facultatives.

3. Déployez votre "contenu multilingue" et votre configuration sur votre site Hosting.

Vous pouvez tester votre configuration à l'aide de remplacements de cookies.

Codes pays et langue

Lorsque vous nommez des sous-dossiers "Contenu i18n", vous devez utiliser des minuscules pour les codes de pays et de langue. Vous pouvez utiliser la valeur ALL (sensible à la casse) pour indiquer n'importe quel pays (comme es_ALL/) ou n'importe quelle langue (comme ALL_ca/).

Hosting obtient le code pays à partir de l'adresse IP de l'utilisateur. Les codes pays sont des codes ISO 3166-1 alpha-2 à deux lettres.

Les codes de langue sont obtenus à partir de l'en-tête de requête Accept-Language de l'utilisateur (généralement défini automatiquement par son navigateur Web). Il s'agit de codes ISO 639-1. Tenez compte des points suivants lorsque vous utilisez des codes de langue:

• Lorsque Hosting recherche le "contenu i18n" à diffuser, il trie les langues en fonction des valeurs de qualité de l'en-tête Accept-Language.

• Hosting supprime tous les sous-tags régionaux et nationaux dans l'en-tête Accept-Language. Par conséquent, le code de langue dans le nom d'un sous-dossier "Contenu i18n" ne peut pas contenir ces sous-tags. Par exemple, vous ne pouvez pas utiliser es-419 ou es-US comme code de langue dans le nom d'un sous-dossier, mais vous pouvez utiliser es.

  Si vous souhaitez diffuser du contenu spécifique à une région ou à un pays, vous pouvez créer des sous-dossiers contenant le contenu spécifique à la langue et au pays que vous souhaitez prendre en charge.

  Afficher des exemples pour prendre en charge des contenus spécifiques à une région ou à un pays

  Diffusez du contenu en espagnol applicable à l'Espagne par rapport à tout autre pays (imitez le comportement de es-419).

  Dans cet exemple, une requête provenant d'Espagne avec la préférence linguistique es, es-es ou même es-419 recevrait du contenu du sous-dossier es_es/, car Hosting traite tous ces codes de langue comme es.

  Une requête provenant des États-Unis, du Mexique ou de tout autre pays avec la préférence linguistique es-419 recevra du contenu du sous-dossier es_ALL/, car Hosting traite es-419 comme es.

  public/
      // matches requests that aren't specified by your "i18n content" subfolders
      index.html  // the site's default homepage
  
      localized-files/
  
          // matches requests from Spain with a language preference of `es` or `es-foo`
          es_es/
              index.html
  
          // matches requests from any other country with a language preference of `es` or `es-foo`
          es_ALL/
              index.html
  

  Diffuser du contenu en espagnol applicable à des pays spécifiques

  Dans cet exemple, une requête provenant du Mexique avec la préférence linguistique es-419 recevra du contenu du sous-dossier es_mx/, car Hosting traite le code de langue es-419 comme es.

  Toutefois, une requête provenant des États-Unis avec la préférence linguistique es-419 recevra du contenu du sous-dossier es_ALL/, car Hosting traite es-419 comme es et il n'y a pas de sous-dossier es_us/.

  public/
      // matches requests that aren't specified by your "i18n content" subfolders
      index.html  // the site's default homepage
  
      localized-files/
  
          // matches requests from Argentina with a language preference of `es` or `es-foo` (mimics behavior of `es-ar` header tag)
          es_ar/
              index.html
  
          // matches requests from Spain with a language preference of `es` or `es-foo` (mimics behavior of `es-es` header tag)
          es_es/
              index.html
  
          // matches requests from Mexico with a language preference of `es` or `es-foo` (mimics behavior of `es-mx` header tag)
          es_mx/
              index.html
  
          // matches requests from any other country with a language preference of `es` or `es-foo` (mimics behavior of `es-419` header tag)
          es_ALL/
              index.html
  

Ordre de priorité pour le contenu "i18n"

Si vous configurez des réécritures i18n, Hosting diffuse le contenu en fonction de l'ordre de priorité suivant:

1. Espaces de noms réservés commençant par un segment de chemin d'accès /__/*

2. Redirections configurées

3. Contenu statique en correspondance exacte

   1. Code de langue + Code pays (par exemple, contenu de fr_ca/)
      L'ordre suit les valeurs de qualité pour chaque langue dans l'en-tête Accept-Language de la requête.

   2. Code pays uniquement (par exemple, contenu de ALL_ca/)

   3. Code de langue uniquement (par exemple, contenu de fr/ ou es_ALL/)
      L'ordre suit les valeurs de qualité pour chaque langue dans l'en-tête Accept-Language de la requête.

   4. Contenu statique "par défaut" avec correspondance exacte
      Il s'agit d'un contenu situé en dehors du répertoire "Contenu i18n", par exemple à la racine du répertoire public.

4. Réécritures configurées

5. Gestion des erreurs 404

   1. Pages 404 i18n
      Cette approche suit le même ordre de priorité que celui indiqué ci-dessus pour le contenu statique en correspondance exacte.

   2. Page d'erreur 404 personnalisée

   3. Page 404 par défaut (fournie par Firebase)

Exemple d'ordre de priorité

Poursuivons notre exemple ci-dessus. Nous utiliserons le même exemple de répertoire et un exemple de requête.

• Exemple de répertoire de projet local avec un répertoire "contenu i18n" (appelé 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
  

• Exemple d'informations de requête

  • Codes de langue: fr, en (français, puis anglais)
    Les codes de langue sont triés en fonction des valeurs de qualité dans l'en-tête Accept-Language.

  • Code pays: ca (Canada)

Selon l'ordre de priorité de la correspondance exacte et les valeurs de qualité des préférences linguistiques, Hosting recherche une page demandée dans les répertoires dans l'ordre suivant.

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. Gestion des erreurs 404

Quelle page sera diffusée auprès de l'utilisateur ?

• Page demandée: index.html

  Réponse

  index.html à partir du sous-dossier fr_ca/

  Comme Hosting recherche d'abord le sous-dossier fr_ca/, il trouvera la correspondance exacte de index.html dans ce sous-dossier.

• Page demandée: awesome-page.html

  Réponse

  404.html à partir du sous-dossier fr/

  Hosting recherche d'abord l'intégralité du répertoire (y compris tous les sous-dossiers "contenu i18n" et le répertoire racine) par ordre de priorité pour une correspondance exacte, mais il n'y a pas de correspondance exacte pour awesome-page.html.

  Hosting commencera donc à gérer l'erreur 404, qui suit le même ordre de priorité d'i18n que les recherches exactes. Le sous-dossier fr/ est le premier sous-dossier recherché qui contient une page 404.

Notez les points suivants concernant cette recherche et diffusion du répertoire "Contenu i18n" :

• Le répertoire localized-files/ ne contient pas de sous-dossiers en_ca/, en_ALL/ ou en/. Hosting parcourt donc la liste de priorité jusqu'à trouver un sous-dossier correspondant à la combinaison langue-pays de la requête.

• Même si le répertoire localized-files/ contient un sous-dossier es_ALL/, l'exemple de requête ci-dessus n'inclut pas de code de langue es ou es-foo. Hosting ne recherche donc pas de "contenu i18n" correspondant à es.

• Les sous-dossiers appelés fr/ et fr_ALL/ sont équivalents du point de vue des préférences de langue et de pays de l'utilisateur. Toutefois, si les deux sous-dossiers existent, Hosting diffusera le contenu fr_ALL/ avant le contenu fr/.

Remplacer les codes de langue et de pays par des cookies

Vous pouvez modifier le contenu diffusé à l'aide de cookies pour remplacer les en-têtes de pays et de langue.

Voici quelques exemples d'utilisation des forçages de cookies:

• Testez une fonctionnalité avec différentes combinaisons de langues/pays pour vérifier le contenu diffusé.

• Permettez à vos utilisateurs de modifier le contenu qu'ils voient. Par exemple, vous pouvez implémenter un sélecteur de langue, puis définir le cookie firebase-language-override de l'utilisateur en conséquence.

Pour configurer des forçages de cookies, définissez des cookies avec les deux noms suivants : firebase-country-override et firebase-language-override. Par exemple, l'extrait de code JavaScript suivant remplace le code pays par ca et l'en-tête Accept-Language par fr,en:

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

Les forçages de cookies de langue doivent être une liste de codes de langue séparés par une virgule, par ordre de préférence, sans sous-tags ni valeurs de qualité.

Les forçages de cookies ne sont pas reflétés dans les journaux.