Dalla versione 122 di Chrome puoi abbonarti alla prova dell'origine per scope_extensions
membro manifest dell'app che consente ai siti che controllano più sottodomini e i principali
a livello di dominio da presentare come un'unica app web. Questo documento spiega perché
il team di Chrome presenterà questa funzionalità e quando potrebbe essere utile utilizzarla.
Panoramica
Alcune applicazioni web hanno più
origins, per
ad esempio example.com
come app principale e poi space_1.example.com
, ...,
space_n.example.com
, a volte combinato con special-example.com
, come
tutte sotto il tetto dell'app principale. Questo tipo di sito
ha implicazioni nel contesto delle app web progressive.
Le limitazioni includono la mancata condivisione dei service worker, qualsiasi tipo di dispositivo,
spazio di archiviazione locale e autorizzazioni trasversali. Inoltre, la navigazione multiorigine
una PWA autonoma mostra una UI della finestra (barra "Fuori ambito") che indica che l'utente
è stata ritirata dall'esperienza PWA. Puoi scoprire come aggirare alcuni
a 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 si impone su questo tipo di architettura del sito. Consente alle app web di estendere scope ad altre origini per raggiungere un'esperienza unificata, in base all'accordo tra il e le origini associate.
Obiettivi
L'obiettivo principale dell'API Scope Extensions è consentire ai siti che controllano
più sottodomini e domini di primo livello affinché si comportino come un'unica app web contigua.
nell'interfaccia utente delle app web
e nell'acquisizione dei link. Ad esempio, consentire al sito
example.com
che comprende example.com.co.uk
e support.example.com
si comportano come
il più possibile come una singola applicazione web.
Le estensioni di ambito consentono alle PWA multiorigine di comportarsi come app web contigue quando in merito alla UI delle app web.
In pratica, ciò si traduce in due obiettivi più specifici:
- Navigazione multiorigine: consenti agli utenti di navigare tra le origini associate senza interrompere l'esperienza utente richiamando la UI della finestra che informa il che sta abbandonando la PWA.
- Acquisizione link multiorigine: consente alle app web di acquisire le navigazioni degli utenti verso i siti a cui sono affiliati.
Navigazione nell'ambito multiorigine
Per impostazione predefinita, quando gli utenti navigano da un'origine all'altra in una PWA autonoma, viene mostrata una UI di una finestra che indica che si sta spostando al di fuori dell'esperienza PWA. In Chrome, questa UI è composta da un elemento "fuori ambito" barra contenente l'URL della la nuova origine. Ciò influisce negativamente sull'esperienza utente, in quanto gli utenti si aspettano di continuano a navigare all'interno dello stesso contesto applicativo, ma potrebbero percepire ne vengono eliminate.
"Fuori ambito" barra mostrata in Chrome quando gli utenti navigano tra origini diverse in una PWA autonoma.
Con le estensioni di ambito, l'interfaccia utente della finestra non viene visualizzata quando gli utenti navigano delle origini associate, in modo che la PWA venga presentata come un'esperienza unificata.
Acquisizione link multiorigine
Acquisizione link si riferisce alla capacità di un'app di acquisire link all'interno della sua l'ambito di attività. Le modalità di implementazione variano a seconda del browser e del sistema operativo. sistemi operativi. In Chrome su ChromeOS, ad esempio, link che rientrano nell'ambito di una Per impostazione predefinita, PWA apre 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.
Frammento della barra degli indirizzi di Chrome di una scheda in ChromeOS che mostra un'indicazione visiva che il link possa 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 a sottodomini o domini di primo livello), non verranno riconosciuti come appartenenti che le sono assegnati. 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. Ambito L'API Extensions consente di estendere l'ambito della PWA in modo che gli elementi associati vengono trattate come link nell'ambito.
Implementazione
L'implementazione delle estensioni di ambito richiede di stabilire la relazione tra e le origini associate.
Dichiara l'elenco delle origini associate
Aggiungi un membro 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
Ciascuna delle origini elencate conferma l'associazione con l'app web utilizzando un
di configurazione di /.well-known/web-app-origin-association
. Questo file deve
verranno denominati web-app-origin-association
e serviti nella stessa località, come
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 è costituita da due siti:
- PWA principale: la PWA effettiva che
dichiara l'elenco di origini associate tramite il membro
scope_extensions
nel relativo file manifest dell'app web. - Origine in ambito esteso: un'istanza
esterna all'ambito della PWA principale, ma associata dopo essere stata elencata
dalla PWA principale come origine associata e confermando la relazione
attraverso le sue
web-app-origin-association
file.
Per eseguire i seguenti test, devi abilitare il
about://flags/#enable-desktop-pwas-scope-extensions
flag (disponibile da
Chrome versione 115 e successive).
Testa la navigazione multiorigine
Come condizione preliminare per questi test, apri il PWA principale in un browser, installala come PWA. e aprirlo per eseguirlo in modalità standalone. La PWA contiene link a un origin in ambito esteso e a un origine non in ambito esteso.
Demo della PWA con i link all'origine in ambito esteso e all'origine non in quella estesa l'ambito di attività.
Navigazione multiorigine predefinita (non nell'ambito esteso)
- Fai clic sul link all'origine non in ambito esteso all'interno della PWA a schermo intero.
- Di conseguenza, la navigazione avviene e viene visualizzata la barra Fuori ambito.
"Fuori ambito" mostrata per impostazione predefinita per una navigazione multiorigine per una PWA in modalità autonoma.
Navigazione multiorigine con estensioni di ambito (in ambito esteso)
- Torna alla home page della PWA.
- Fai clic sul link a l' origine non rientra in un ambito esteso.
- Per impostazione predefinita, "fuori ambito" a barre, ma a causa dell'ambito associazione delle estensioni, non lo è.
"Fuori ambito" barra non visualizzata nella navigazione multiorigine dopo l'associazione dell'origine è stata creata con le estensioni di ambito.
Testa l'acquisizione dei link multiorigine
- Apri e installa la PWA principale in una Dispositivo ChromeOS
- Fai clic sul seguente link: origine associata.
- Il link viene aperto in una nuova scheda del browser e viene visualizzato un messaggio che richiede di aprirlo in la PWA installata.
Se fai clic su un link all'origine associata di una PWA, il link viene aperto in una nuova scheda e mostra la dicitura "Apri nell'app" icona che consente all'utente di attivare il link automatico acquisire immagini.
Prova dell'origine
Se desideri testare questa API nella tua applicazione sul campo con utenti, puoi farlo con prove 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 della tua app si aspetta che funzioni in un browser che supporta la funzione che stai testando (in questo è disponibile in Chrome dalla versione 121 alla versione 126). Per ottenere il tuo token per eseguire una prova dell'origine, compila modulo di richiesta.
Feedback
Il team di Chrome vuole ricevere feedback sull'utilità di questa API. A aiutare il team a evolvere questa API con feedback relativi all'utilità e nuovi casi d'uso non trattati nella versione attuale, apri Problema su GitHub.
Risorse aggiuntive
- API Scope Extensions - Prova dell'origine
- Stato di Chrome - Estensioni ambito app web
- Spiegazione delle estensioni di ambito per le applicazioni web
- Intenzione di sperimentare
- Posizione degli standard di Mozilla
- Posizione degli standard Apple
- Bug di Chromium
- App web progressive in siti multiorigine
- Creazione di più app web progressive sullo stesso dominio
Ringraziamenti
Un ringraziamento speciale al team responsabile dello sviluppo di questa API. Estensioni di ambito è stato specificato da Alan Cutter e Lu Huang, con input di Matt Giuca. L'API è stata implementata da Alan Cutter di Google Chrome e Hassan Talat Kristin Lee e Lu Huang di Microsoft Edge.