Configurare le riscritture di internazionalizzazione (i18n)

Utilizza le riscritture di internazionalizzazione ("riscritture i18n") per pubblicare contenuti diversi a seconda del paese o della lingua preferita di un utente. Ecco alcune configurazioni di esempio che potresti impostare:

  • Pubblica gli stessi contenuti in francese a tutti gli utenti che preferiscono il francese (indipendentemente dal paese).
    Esempio: una home page con testo in francese

  • Pubblica contenuti in francese standard per gli utenti che preferiscono il francese, ma per gli utenti canadesi che preferiscono il francese, pubblica invece contenuti in francese canadese.
    Esempio: una home page con espressioni in francese standard rispetto a una home page con espressioni in francese canadese

  • Pubblica gli stessi contenuti a tutti gli utenti canadesi (indipendentemente dalla loro lingua preferita).
    Esempio: una home page con la lingua "predefinita" del tuo sito, ma con una funzionalità specifica per il Canada (ad esempio un tema festivo)

  • Pubblica contenuti in francese canadese per gli utenti canadesi che preferiscono il francese.
    Esempio: una home page con espressioni in francese canadese e una funzionalità specifica per il Canada (ad esempio un tema festivo)

Firebase Hosting determina il paese di un utente in base al suo indirizzo IP e le preferenze di lingua di un utente dall'intestazione della richiesta Accept-Language (in genere impostata automaticamente dal browser web).

Configurare le riscritture i18n

Per configurare le riscritture i18n per il tuo sito Hosting, devi creare una directory "contenuti i18n" per tutti i contenuti localizzati, quindi aggiungere l'attributo i18n al file firebase.json per indirizzare alla nuova directory "contenuti i18n".

Ecco i passaggi dettagliati:

  1. Nella cartella public della directory dell'app locale, crea una directory separata per i "contenuti i18n", quindi crea sottocartelle per ogni combinazione di lingua e paese supportata dal tuo sito.

    In ogni sottocartella, aggiungi i contenuti specifici per quella combinazione, ad esempio home page a tema festivo o pagine 404 specifiche per la lingua.

    Ecco un esempio di directory "contenuti i18n" chiamata 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

    La directory localized-files/ contiene sottocartelle separate per ogni combinazione di lingua e paese supportata dal tuo sito. Il pattern di denominazione per ogni sottocartella deve seguire uno di questi formati:

    • languageCode_countryCode: contiene contenuti specifici per gli utenti che hanno quella preferenza di lingua e quel codice paese

    • languageCode: contiene contenuti specifici per gli utenti che hanno quella preferenza di lingua, ma i contenuti non sono specifici per paese; in pratica, è equivalente a languageCode_ALL

    Per ulteriori dettagli su questi codici, consulta la sottosezione Codici paese e lingua di seguito. Puoi utilizzare il valore ALL (distingue tra maiuscole e minuscole) per indicare qualsiasi paese (ad esempio es_ALL/) o qualsiasi lingua (ad esempio ALL_ca/).

    I file in una sottocartella non devono necessariamente avere file analoghi nella public directory o in altre sottocartelle. Puoi creare contenuti completamente specifici per una lingua e/o un paese.

  2. Aggiungi l'i18n attributo al file firebase.json e specifica la directory che contiene i "contenuti i18n". Continuando con il nostro esempio:

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

    La directory specificata per root deve essere il nome della directory che contiene tutte le sottocartelle dei "contenuti i18n". Se hai inserito tutte le "sottocartelle dei contenuti i18n" nella directory principale di public, utilizza / per il valore di root. Le barre iniziali e finali nel root valore sono facoltative.

  3. Esegui il deployment dei "contenuti i18n" e della configurazione nel tuo sito Hosting.

Puoi testare la configurazione utilizzando gli override dei cookie.

Codici paese e lingua

Quando assegni un nome alle sottocartelle dei "contenuti i18n", devi utilizzare le lettere minuscole sia per i codici paese sia per i codici lingua. Puoi utilizzare il valore di ALL (distingue tra maiuscole e minuscole) per indicare qualsiasi paese (ad esempio es_ALL/) o qualsiasi lingua (ad esempio ALL_ca/).

Hosting ottiene il codice paese dall'indirizzo IP dell'utente. I codici paese sono codici ISO 3166-1 alpha-2 a due lettere.

I codici lingua vengono ottenuti dall'intestazione della richiesta Accept-Language dell'utente (in genere impostata automaticamente dal browser web). Sono codici ISO 639-1. Tieni presente quanto segue quando utilizzi i codici lingua:

  • Quando Hosting cerca i "contenuti i18n" da pubblicare, ordina le lingue in base ai valori di qualità nell'intestazione Accept-Language.

  • Hosting elimina tutti i sottotag regionali e paese nell'Accept-Language intestazione, pertanto il codice lingua nel nome di una sottocartella di "contenuti i18n" non può contenere questi sottotag. Ad esempio, non puoi utilizzare es-419 o es-US come codice lingua nel nome di una sottocartella, ma puoi utilizzare es.

    Se vuoi pubblicare contenuti specifici per regione o paese, puoi creare sottocartelle che contengono i contenuti specifici per lingua e paese che vuoi supportare.

Ordine di priorità per i "contenuti i18n"

Se configuri le riscritture i18n, Hosting pubblica i contenuti in base al seguente ordine di priorità:

  1. Spazi dei nomi riservati che iniziano con un segmento di percorso /__/*

  2. Reindirizzamenti configurati

  3. Contenuti statici a corrispondenza esatta

    1. Codice lingua + codice paese (ad esempio, contenuti da fr_ca/)
      L'ordine segue i valori di qualità per ogni lingua nell'intestazione Accept-Language della richiesta.

    2. Solo codice paese (ad esempio, contenuti da ALL_ca/)

    3. Solo codice lingua (ad esempio, contenuti da fr/ o es_ALL/)
      L'ordine segue i valori di qualità per ogni lingua nell'intestazione Accept-Language della richiesta.

    4. Contenuti statici a corrispondenza esatta "predefiniti"
      Si tratta di contenuti esterni alla directory "contenuti i18n", ad esempio nella directory principale di public directory.

  4. Riscritture configurate

  5. Gestione degli errori 404

    1. Pagine 404 i18n
      Segue lo stesso ordine di priorità elencato sopra per i contenuti statici a corrispondenza esatta.

    2. Pagina 404 personalizzata

    3. Pagina 404 predefinita (fornita da Firebase)

Esempio di ordine di priorità

Continuiamo con l'esempio precedente. Utilizzeremo la stessa directory di esempio e una richiesta di esempio.

  • Esempio di directory del progetto locale con una directory "contenuti i18n" (denominata 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
  • Esempio di informazioni sulla richiesta

    • Codici lingua: fr, en (francese, poi inglese)
      I codici lingua sono ordinati in base ai valori di qualità nell' Accept-Language intestazione.

    • Codice paese: ca (Canada)

In base all'ordine di priorità a corrispondenza esatta e ai valori di qualità per le preferenze di lingua, Hosting cercherà le directory per una pagina richiesta nel seguente ordine.

  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. Gestione degli errori 404

Quale pagina verrà pubblicata per l'utente?

  • Pagina richiesta: index.html

  • Pagina richiesta: awesome-page.html

Tieni presente quanto segue in merito alla ricerca e alla pubblicazione della directory "contenuti i18n":

  • La directory localized-files/ non contiene effettivamente le sottocartelle en_ca/, en_ALL/ o en/, pertanto Hosting salterà l'elenco di priorità fino a quando non troverà una sottocartella corrispondente alla combinazione di lingua e paese della richiesta.

  • Anche se la directory localized-files/ contiene una sottocartella es_ALL/, la richiesta di esempio sopra non include un codice lingua es o es-foo, pertanto Hosting non cercherà "contenuti i18n" che corrispondano a es.

  • Le sottocartelle denominate fr/ e fr_ALL/ sono equivalenti dal punto di vista di un utente in base alle preferenze di lingua e paese. Tuttavia, se esistono entrambe le sottocartelle, Hosting pubblicherà i contenuti fr_ALL/ prima dei contenuti fr/.

Puoi modificare i contenuti pubblicati utilizzando i cookie per eseguire l'override delle intestazioni di paese e lingua.

Ecco alcuni modi in cui puoi utilizzare gli override dei cookie:

  • Testa una funzionalità con diverse combinazioni di lingua/paese per verificare quali contenuti vengono pubblicati.

  • Consenti agli utenti di modificare i contenuti visualizzati. Ad esempio, puoi implementare un selettore di lingua, quindi impostare il cookie dell'utente firebase-language-override di conseguenza.

Per configurare gli override dei cookie, imposta i cookie con entrambi i nomi o uno dei due: firebase-country-override e firebase-language-override. Ad esempio, il seguente snippet di codice JavaScript esegue l'override del codice paese impostandolo su ca e dell'intestazione Accept-Language impostandola su fr,en:

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

Gli override dei cookie di lingua devono essere un elenco di codici lingua separati da virgole in ordine di preferenza, senza sottotag o valori di qualità.

Gli override dei cookie non si riflettono nei log.