Estensioni ambito applicazione web

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.

Demián Renzulli

Thomas Steiner

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.

Nota: al momento della stesura del presente documento, solo ChromeOS supporta entrambi Funzionalità delle estensioni trattate in questo documento (navigazione multiorigine nell'ambito e l'acquisizione di link multiorigine). Anche la navigazione tra origini nell'ambito supportata in Chrome su Windows, macOS e Linux, ma l'integrazione con il link l'acquisizione non è ancora disponibile su queste piattaforme. Le estensioni di ambito non sono ancora disponibili disponibile sui dispositivi mobili.

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)

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.

"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)

1. Torna alla home page della PWA.
2. Fai clic sul link a l' origine non rientra in un ambito esteso.
3. 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

1. Apri e installa la PWA principale in una 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 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.