Estensioni ambito applicazione web

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

Demián Renzulli

Thomas Steiner

Panoramica

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

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

Nota: al momento della stesura di questo articolo, solo ChromeOS supporta entrambe le funzionalità di Estensioni ambito descritte in questo documento (navigazione in ambito cross-origin e acquisizione di link cross-origin). La navigazione in-scope cross-origin è supportata anche in Chrome su Windows, macOS e Linux, ma l'integrazione con la funzionalità di acquisizione dei link non è ancora disponibile su queste piattaforme. Le Estensioni di ambito non sono ancora disponibili sui dispositivi mobili.

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, consentire al sitoexample.com che si estende su example.com.co.uk e support.example.com di comportarsi il più possibile come una singola applicazione web.

Le estensioni di ambito consentono alle PWA multi-origine di comportarsi come un'app web contigua per quanto riguarda l'interfaccia utente dell'app web.

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

• Navigazione tra origini:consente 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 uscendo dalla PWA.
• Acquisizione di link cross-origin:consente alle app web di acquisire le navigazioni degli utenti ai siti a cui sono affiliate.

Navigazione in ambito cross-origin

Per impostazione predefinita, quando gli utenti navigano da un'origine all'altra in una PWA autonoma, viene visualizzata una UI della finestra che indica che si stanno spostando al di fuori dell'esperienza della PWA. In Chrome, questa UI è costituita da una barra "Fuori ambito" contenente l'URL della nuova origine. Ciò interrompe l'esperienza utente, in quanto gli utenti si aspettano di continuare a navigare nello 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 di ambito, l'interfaccia utente della finestra non viene mostrata quando gli utenti accedono a una delle origini associate, pertanto la PWA viene presentata come un'esperienza unificata.

Acquisizione di link cross-origin

Acquisizione link si riferisce alla capacità di un'app di acquisire i link nel suo ambito. Le modalità di implementazione variano in base ai browser e ai sistemi operativi. Ad esempio, in Chrome su ChromeOS, per impostazione predefinita i link nell'ambito di una PWA installata aprono 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 la funzionalità di acquisizione automatica dei link da quel momento in poi.

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 questa 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 alla 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 in ambito.

Implementazione

L'implementazione delle estensioni dell'ambito richiede di stabilire la 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 il proprio 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 /.well-known/web-app-origin-association file di configurazione. Questo file deve essere denominato web-app-origin-association e pubblicato in questa posizione esatta, in quanto si tratta di un URI noto.

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

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

Demo

La demo è composta 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 nell'ambito esteso: un'origine al di fuori dell'ambito della PWA principale, ma associata dopo essere stata elencata dalla PWA principale come origine associata e aver confermato la relazione tramite il suo file web-app-origin-association.

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

Testare la navigazione cross-origin

Come prerequisito 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 nell'ambito esteso e a un'origine non nell'ambito esteso.

PWA di demo con link all'origine nell'ambito esteso e all'origine non nell'ambito esteso.

Navigazione cross-origin predefinita (non nell'ambito esteso)

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

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

Navigazione tra origini con estensioni di ambito (in ambito esteso)

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

La barra "Fuori ambito" non viene visualizzata nella navigazione tra origini dopo che è stata effettuata l'associazione dell'origine con le Estensioni di ambito.

Testare la cattura dei link cross-origin

1. Apri e installa la PWA principale su un dispositivo ChromeOS.
2. Fai clic sul seguente link: origine associata.
3. Il link viene aperto in una nuova scheda del browser e viene visualizzata una richiesta di apertura nella PWA installata.

Se fai clic su un link all'origine associata di una PWA, il link si apre in una nuova scheda e viene visualizzata un'icona "Apri nell'app" che consente all'utente di attivare il salvataggio automatico 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 collegato al tuo dominio. Puoi quindi eseguire il deployment dell'app e pretendere che funzioni in un browser che supporta la funzionalità che stai testando (in questo caso, è disponibile in Chrome dalla versione 121 alla 126). Per ottenere il tuo token per eseguire una prova dell'origine, compila il modulo di richiesta.

Feedback

Il team di Chrome è alla ricerca di feedback sull'utilità di questa API. Per aiutare il team a evolvere questa API con feedback che ne spiegano l'utilità e i nuovi casi d'uso non trattati nella versione attuale, apri un Problema su GitHub.

Risorse aggiuntive

• API Estensioni ambito - Prova di origine
• Stato di Chrome - Estensioni dell'ambito delle app web
• Spiegazione delle estensioni di ambito per le applicazioni web
• Intent to Experiment
• Posizione di Mozilla in merito agli standard
• Posizione degli standard Apple
• Bug di Chromium
• App web progressive in siti multiorigine
• Creare più app web progressive nello stesso dominio

Ringraziamenti

Un ringraziamento speciale al team che si occupa dello sviluppo di questa API. Le estensioni di ambito sono state specificate da Alan Cutter e Lu Huang, con il contributo di Matt Giuca. L'API è stata implementata da Alan Cutter di Google Chrome, Hassan Talat, Kristin Lee e Lu Huang di Microsoft Edge.