Estensioni ambito applicazione web

Da Chrome 122 puoi abbonarti alla prova dell'origine per il membro del manifest dell'app scope_extensions, che consente ai siti che controllano più sottodomini e domini di primo livello di essere presentati come un'unica app web. Questo documento spiega perché il team di Chrome sta introducendo questa funzionalità e quando potrebbe essere opportuno utilizzarla.

Demián Renzulli

Thomas Steiner

Panoramica

Alcune applicazioni web hanno più origini, ad esempio example.com come app principale, e poi space_1.example.com, ..., space_n.example.com, a volte combinate con special-example.com, come esperienze secondarie, il tutto all'interno dell'app principale. Questo tipo di architettura del sito ha implicazioni nel contesto delle app web progressive. Le limitazioni includono la mancata possibilità di condividere i service worker, qualsiasi tipo di dispositivo, lo spazio di archiviazione locale e le autorizzazioni tra le origini. Inoltre, la navigazione multiorigine in una PWA indipendente mostra una UI della finestra ("barra fuori ambito") che indica che l'utente è uscito dall'esperienza PWA. Puoi scoprire come risolvere alcuni di questi problemi negli articoli App web progressive in siti multiorigine e Creazione di più app web progressive sullo stesso dominio.

L'API Scope Extensions consente alle app web di superare alcune delle sfide che il criterio della stessa origine impone su questo tipo di architettura del sito. Consente alle app web di estendere il loro ambito ad altre origini per contribuire a ottenere un'esperienza unificata, in base a un accordo tra l'origine principale dell'app web e le origini associate.

Obiettivi

L'obiettivo principale dell'API Scope Extensions è consentire ai siti che controllano più sottodomini e domini di primo livello di comportarsi come un'unica app web contigua per quanto riguarda l'interfaccia utente delle app web e l'acquisizione dei link. Ad esempio, puoi consentire al sito example.com che comprende example.com.co.uk e support.example.com di comportarsi il più possibile come una singola applicazione web.

Le estensioni ambito consentono alle PWA multiorigine di comportarsi come un'app web contigua quando si tratta dell'interfaccia utente di un'app web.

In pratica, questo si traduce in due obiettivi più specifici:

• Navigazione tra origini: consenti agli utenti di navigare tra le origini associate senza interrompere l'esperienza utente richiamando l'interfaccia utente della finestra che informa l'utente che sta abbandonando la PWA.
• Acquisizione di link multiorigine: consente alle app web di acquisire le navigazioni degli utenti verso i siti a cui sono affiliate.

Navigazione nell'ambito multiorigine

Per impostazione predefinita, quando gli utenti navigano da più origini in una PWA autonoma, visualizzano una UI finestra che indica che si stanno spostando al di fuori dell'esperienza PWA. In Chrome, questa UI è costituita da una barra "fuori ambito" che contiene l'URL della nuova origine. Ciò compromette l'esperienza utente, poiché gli utenti si aspettano di continuare a navigare all'interno dello stesso contesto dell'applicazione, ma potrebbero percepire di essere stati rimossi.

Barra "Fuori ambito" mostrata in Chrome quando gli utenti navigano da origini diverse in una PWA autonoma.

Con le estensioni dell'ambito, l'interfaccia utente della finestra non verrà mostrata quando gli utenti visitano una qualsiasi delle origini associate, in modo che la PWA venga presentata come un'esperienza unificata.

Acquisizione link multiorigine

L'acquisizione di link si riferisce alla capacità di un'app di acquisire i link nel suo ambito. La modalità di implementazione varia a seconda del browser e del sistema operativo. Ad esempio, in Chrome su ChromeOS, i link che rientrano nell'ambito di una PWA installata aprono per impostazione predefinita una scheda del browser con un'indicazione nella barra degli indirizzi che indica che esiste un'app in grado di gestire questi link, consentendo all'utente di attivare l'acquisizione automatica dei link da quel punto.

Frammento della barra degli indirizzi di Chrome per una scheda in ChromeOS che mostra un'indicazione visiva che il link può essere gestito da una PWA e l'opzione per ricordare la decisione.

Se un utente fa clic su un link che non rientra nell'ambito della PWA (inclusi i link a sottodomini o domini di primo livello), non verrà riconosciuto come appartenente a tale PWA. Ad esempio, i link verranno aperti in una scheda del browser senza alcuna indicazione all'utente che esiste un'app in grado di gestire il link. L'API Scope Extensions consente di estendere l'ambito della PWA in modo che le origini associate vengano trattate come link nell'ambito.

Implementazione

L'implementazione delle estensioni di ambito richiede la definizione della relazione tra l'origine principale e le origini associate.

Dichiara l'elenco delle origini associate

Aggiungi un membro del manifest dell'app web scope_extensions all'origine PWA principale per consentire all'app web di estendere l'ambito ad altre origini.

Manifest dell'app web (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Conferma associazioni

Ogni origine elencata conferma l'associazione con l'app web utilizzando un file di configurazione /.well-known/web-app-origin-association. Questo file deve essere denominato web-app-origin-association e deve essere pubblicato in questa posizione esatta, poiché si tratta di un URI ben noto.

/.well-known/web-app-origin-association (origine associata)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Demo

La demo è costituita da due siti:

• PWA principale: la PWA effettiva che dichiara l'elenco delle origini associate tramite il membro scope_extensions nel suo manifest dell'app web.
• Origine in ambito esteso: un'origine esterna all'ambito della PWA principale, ma associata dopo essere stata elencata dalla PWA principale come origine associata e confermata la relazione tramite il relativo file web-app-origin-association.

Per eseguire i test seguenti, devi abilitare il flag about://flags/#enable-desktop-pwas-scope-extensions (disponibile a partire dalla versione 115 di Chrome).

Testa la navigazione multiorigine

Come condizione preliminare per questi test, apri la PWA principale in un browser, installala come PWA e aprila per eseguirla in modalità autonoma. La PWA contiene link a un'origine in ambito esteso e a un'origine non in ambito esteso.

Demo PWA con link all'origine in ambito esteso e a un'origine non in ambito esteso.

Navigazione multiorigine predefinita (non in ambito esteso)

1. Fai clic sul link all'origine non in ambito esteso all'interno della PWA a schermo intero.
2. Di conseguenza, la navigazione avviene e viene visualizzata la barra fuori ambito.

Barra "Fuori ambito" mostrata per impostazione predefinita per una navigazione multiorigine per una PWA in modalità autonoma.

Navigazione multiorigine con estensioni ambito (in ambito esteso)

1. Torna alla home page della PWA.
2. Fai clic sul link all' origine non in ambito esteso.
3. Per impostazione predefinita, dovrebbe essere visualizzata una barra "Fuori ambito", ma non a causa dell'associazione Estensioni di ambito.

Barra "Fuori ambito" non viene mostrata nella navigazione multiorigine dopo che è stata creata l'associazione dell'origine con le estensioni ambito.

Testare l'acquisizione di link multiorigine

1. Apri e installa la PWA principale in un dispositivo ChromeOS.
2. Fai clic sul seguente link: origine associata.
3. Il link si apre in una nuova scheda del browser e viene visualizzato un messaggio per aprirlo nella PWA installata.

Se si fa clic su un link all'origine associata di una PWA, il link viene aperto in una nuova scheda e viene visualizzata l'icona "Apri nell'app" che consente all'utente di attivare l'acquisizione automatica dei link.

Prova dell'origine

Se vuoi testare questa API nella tua applicazione sul campo con utenti reali, puoi farlo con una prova dell'origine. Le prove dell'origine ti consentono di provare le funzionalità sperimentali con i tuoi utenti ottenendo un token di test associato al tuo dominio. Puoi quindi eseguire il deployment della tua app e aspettarti che funzioni in un browser che supporta la funzionalità che stai testando (in questo caso, è disponibile in Chrome dalla versione 121 alla versione 126). Per ottenere il tuo token per eseguire una prova dell'origine, compila il modulo di richiesta.

Feedback

Il team di Chrome vorrebbe ricevere feedback sull'utilità di questa API. Per aiutare il team a evolvere questa API con il feedback sull'utilità dell'API e nuovi casi d'uso non trattati nella versione attuale, apri un Problema su GitHub.

Altre risorse

• API Scope Extensions - Prova dell'origine
• Stato di Chrome - Estensioni ambito applicazione web
• Spiegazione delle estensioni di ambito per le applicazioni web
• Intenzione di sperimentare
• Posizione standard di Mozilla
• Posizione degli standard Apple
• Bug di Chromium
• App web progressive in siti di più origini
• Creazione di più app web progressive nello stesso dominio

Ringraziamenti

Un ringraziamento speciale al team che ha sviluppato questa API. Le estensioni ambito sono state specificate da Alan Cutter e Lu Huang, con l'input di Matt Giuca. L'API è stata implementata da Alan Cutter di Google Chrome, Hassan Talat, Kristin Lee e Lu Huang di Microsoft Edge.