Estensioni ambito applicazione web

A partire da Chrome 122, puoi registrarti alla prova dell'origine per il membro del manifest dell'app scope_extensions, che consente di presentare come singola app web i siti che controllano più sottodomini e domini di primo livello. Questo documento spiega perché il team di Chrome sta introducendo questa funzionalità e quando potresti volerla utilizzare.

Demián Renzulli
Demián Renzulli
X GitHub
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 in combinazione con special-example.com, come sottoesperienze, il tutto sotto l'ombrello dell'app principale. Questo tipo di architettura del sito ha implicazioni nel contesto delle Progressive Web App. Le limitazioni includono l'impossibilità di condividere service worker, qualsiasi tipo di dispositivo, l'archiviazione locale e le autorizzazioni tra le origini. Inoltre, la navigazione multiorigine 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 risolvere alcuni di questi problemi negli articoli App web progressive in siti multiorigine e Creare più app web progressive sullo stesso dominio.

L'API Scope Extensions consente alle app web di superare alcune delle sfide che i criteri di stessa origine impongono a questo tipo di architettura del sito. Consente alle app web di estendere il proprio ambito ad altre origini per contribuire a ottenere un'esperienza unificata, previo 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 dell'app web e l'acquisizione dei link. Ad esempio, consentendo al sito example.com che si estende su example.com.co.uk e support.example.com di comportarsi il più possibile come una singola applicazione web.

Diagramma che mostra una PWA principale e le relative sottoesperienze.

Le estensioni dell'ambito consentono alle PWA multiorigine 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 multiorigine:consente agli utenti di navigare tra 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 multiorigine nell'ambito

Per impostazione predefinita, quando gli utenti navigano tra le origini in una PWA autonoma, viene mostrata un'interfaccia utente della 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ò interrompe l'esperienza utente, in quanto gli utenti si aspettano di continuare a navigare all'interno dello stesso contesto dell'applicazione, ma potrebbero percepire di esserne usciti.

Barra fuori ambito nella parte superiore di una PWA autonoma.

Barra "Al di fuori dell'ambito" mostrata in Chrome quando gli utenti navigano tra origini diverse in una PWA autonoma.

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

L'acquisizione dei link si riferisce alla capacità di un'app di acquisire i link all'interno del suo ambito. Il modo in cui viene implementata varia a seconda dei browser e dei sistemi operativi. In Chrome su ChromeOS, ad esempio, i link nell'ambito di una PWA installata aprono per impostazione predefinita una scheda del browser con un'indicazione nella barra degli indirizzi che esiste un'app in grado di gestire questi link, consentendo all'utente di attivare l'acquisizione automatica dei link da quel momento in poi.

Prompt della barra degli indirizzi per una PWA installata.

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 esterno all'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 inclusi nell'ambito.

Implementazione

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

Dichiarare 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 le associazioni

Ciascuna delle origini elencate conferma l'associazione all'app web utilizzando un file di configurazione /.well-known/web-app-origin-association. Questo file deve essere denominato web-app-origin-association e pubblicato in questa posizione esatta, in quanto è un URI Well-Known.

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

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

Demo

La demo è costituita da due siti:

Per eseguire i seguenti test, devi attivare il flag about://flags/#enable-desktop-pwas-scope-extensions (disponibile a partire da Chrome v115).

Testare la navigazione multiorigine

Come precondizione 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.

Finestra principale della PWA con link inclusi e con ambito esteso.

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

Navigazione multiorigine predefinita (non nell'ambito esteso)

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

Finestra principale della PWA con la barra fuori ambito dopo aver fatto clic sul link fuori ambito.

Barra "Al di fuori dell'ambito" mostrata per impostazione predefinita per una navigazione cross-origin per una PWA in modalità standalone.

Navigazione multiorigine con Scope Extensions (ambito esteso)

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

Finestra principale della PWA senza la barra fuori ambito dopo aver fatto clic sul link all'ambito esteso.

La barra "Fuori ambito" non viene visualizzata nella navigazione multiorigine dopo che è stata eseguita l'associazione di origine con le estensioni dell'ambito.

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

Prompt della barra degli indirizzi per una PWA installata con ambito esteso.

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 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 funzionalità sperimentali con i tuoi utenti ottenendo un token di test collegato al tuo dominio. A questo punto puoi eseguire il deployment dell'app e prevedere 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 far evolvere questa API con feedback sulla sua utilità e nuovi casi d'uso non coperti nella versione attuale, apri un problema su GitHub.

Risorse aggiuntive

Ringraziamenti

Un ringraziamento speciale al team che ha sviluppato questa API. Le estensioni dell'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 e Hassan Talat, Kristin Lee e Lu Huang di Microsoft Edge.