PWA come gestori URL

Consenti alle PWA installate di gestire gli URL per un'esperienza più integrata.

Thomas Steiner

Che cosa sono le PWA come gestori di URL?

Immagina di chattare con un amico tramite un'applicazione di messaggistica immediata come Messaggi su macOS e di parlare di musica. Immagina inoltre di aver installato la PWA music.example.com sui tuoi dispositivi. Se vuoi condividere con il tuo amico la tua traccia preferita, puoi inviargli un link diretto, ad esempio https://music.example.com/rick-astley/never-gonna-give-you-up. Poiché questo link è piuttosto lungo, gli sviluppatori di music.example.com potrebbero aver deciso di aggiungere un ulteriore link breve a ogni traccia, ad esempio https://🎵.example.com/r-a/n-g-g-y-u.

PWA come gestore di URL consente ad app come music.example.com di registrarsi come gestori di URL per gli URL che corrispondono a pattern come https://music.example.com, https://*.music.example.com o https://🎵.example.com, in modo che i link esterni alla PWA, ad esempio da un'applicazione di messaggistica immediata o da un client email, si aprano nella PWA installata anziché in una scheda del browser.

PWA come Gestori URL consiste di due aggiunte:

  1. Il membro del file manifest dell'app web "url_handlers".
  2. Il formato file web-app-origin-association per la convalida delle associazioni di URL all'interno e all'esterno dell'ambito.

Casi d'uso suggeriti per le PWA come gestori di URL

Esempi di siti che possono utilizzare questa API includono:

  • Siti di streaming di musica o video, quindi i link delle tracce o delle playlist si aprono nell'esperienza del player dell'app.
  • I lettori di notizie o RSS che seguono i siti che segui o a cui hai effettuato l'iscrizione si aprono nella modalità di lettura dell'app.

Come utilizzare le PWA come gestori di URL

Attivazione tramite about://flags

Per sperimentare le PWA come gestori di URL localmente, senza un token di prova dell'origine, abilita il flag #enable-desktop-pwas-url-handling in about://flags.

Il membro del file manifest dell'app web "url_handlers"

Per associare una PWA installata ai pattern URL, questi pattern devono essere specificati nel file manifest dell'app web. Ciò avviene tramite il membro di "url_handlers". Accetta un array di oggetti con una proprietà origin, che è un string obbligatorio che è un pattern per le origini corrispondenti. Questi pattern possono avere un prefisso con caratteri jolly (*) per includere più sottodomini (come https://*.example.com). Gli URL che corrispondono a queste origini potrebbero essere gestiti da questa app web. Lo schema viene sempre considerato https://, ma deve essere menzionato esplicitamente,

L'estratto del file manifest di un'app web riportato di seguito mostra come potrebbe configurarlo l'esempio della PWA musicale nel paragrafo introduttivo. La seconda voce con il carattere jolly ("https://*.music.example.com") assicura che l'app venga attivata anche per https://www.music.example.com o per potenziali altri esempi come https://marketing-activity.music.example.com.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Il file web-app-origin-association

Poiché la PWA risiede su un'origine diversa (music.example.com) rispetto ad alcuni degli URL che deve gestire (ad es. https://🎵.example.com), l'app deve verificare la proprietà di queste altre origini. Questo si verifica in un file web-app-origin-association ospitato su altre origini.

Questo file deve contenere JSON valido. La struttura di primo livello è un oggetto con un membro denominato "web_apps". Questo membro è un array di oggetti e ogni oggetto rappresenta una voce per un'app web univoca. Ogni oggetto contiene:

Campo Descrizione Tipo Predefinito
"manifest" (Obbligatorio) Stringa dell'URL del manifest dell'app web della PWA associata string N/A
"details" (Facoltativo) Un oggetto che contiene array di pattern URL inclusi ed esclusi object N/A

Ogni oggetto "details" contiene:

Campo Descrizione Tipo Predefinito
"paths" (Facoltativo) Array di stringhe di percorso consentite string[] []
"exclude_paths" (Facoltativo) Array di stringhe di percorso non consentite string[] []

Di seguito è riportato un file web-app-origin-association di esempio per la PWA musicale di esempio sopra. Verrà ospitato sull'origine 🎵.example.com e stabilisce l'associazione con la PWA music.example.com, identificata dall'URL manifest dell'app web.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Quando corrisponde un URL?

Una PWA corrisponde a un URL per la gestione se vengono soddisfatte entrambe le seguenti condizioni:

  • L'URL corrisponde a una delle stringhe di origine in "url_handlers".
  • Il browser è in grado di verificare tramite il rispettivo file web-app-origin-association che ogni origine accetta di consentire a questa app di gestire un URL di questo tipo.

In merito al rilevamento di web-app-origin-association file

Affinché il browser possa rilevare il file web-app-origin-association, gli sviluppatori devono inserire il file web-app-origin-association nella cartella /.well-known/ nella directory principale dell'app. Affinché funzioni, il nome del file deve essere esattamente web-app-origin-association.

Demo

Per testare le PWA come Gestori URL, assicurati di impostare il flag del browser come descritto in precedenza e di installare la PWA all'indirizzo https://mandymsft.github.io/pwa/. Controllando il file manifest dell'app web, puoi notare che gestisce gli URL con i seguenti pattern URL: https://mandymsft.github.io e https://luhuangmsft.github.io. Poiché quest'ultima si trova su un'origine diversa (luhuangmsft.github.io) rispetto alla PWA, la PWA su mandymsft.github.io deve dimostrare la proprietà, il che avviene tramite il file web-app-origin-association ospitato all'indirizzo https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Per verificare che tutto funzioni, invia un messaggio di prova utilizzando un'app di messaggistica immediata di tua scelta o un'email visualizzata in un client di posta non basato sul web come Mail su macOS. L'email o il messaggio devono contenere i link https://mandymsft.github.io o https://luhuangmsft.github.io. Entrambi dovrebbero aprirsi nella PWA installata.

L'app di messaggistica immediata Windows Skype accanto alla PWA demo installata, che viene aperta in modalità autonoma dopo aver fatto clic su un link gestito dall'app in un messaggio di chat Skype.

Sicurezza e autorizzazioni

Il team di Chromium ha progettato e implementato le PWA come gestori di URL utilizzando i principi fondamentali definiti nell'articolo Controllare l'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo degli utenti, trasparenza ed ergonomia.

Controllo utente

Se più di una PWA si registra come gestore di URL per un determinato pattern URL, all'utente verrà chiesto di scegliere la PWA con cui vuole gestire il pattern, se presente. Le navigazioni che si avviano in una scheda del browser non vengono gestite da questa proposta, ma è esplicitamente mirata a quelle che iniziano all'esterno del browser.

Trasparenza

Se per qualsiasi motivo la convalida dell'associazione necessaria non può essere completata correttamente durante l'installazione della PWA, il browser non registrerà l'app come gestore di URL attivo per gli URL interessati. I gestori di URL, se implementati in modo non corretto, possono essere utilizzati per compromettere il traffico dei siti web. Questo è il motivo per cui il meccanismo di associazione delle app è una parte importante dello schema.

Le applicazioni specifiche della piattaforma possono già utilizzare le API del sistema operativo per enumerare le applicazioni installate sul sistema dell'utente. Ad esempio, le applicazioni su Windows possono utilizzare l'API FindAppUriHandlersAsync per enumerare i gestori di URL. Se le PWA vengono registrate come gestori di URL a livello di sistema operativo in Windows, la loro presenza sarà visibile ad altre applicazioni.

Persistenza delle autorizzazioni

Un'origine può modificare le sue associazioni con le PWA in qualsiasi momento. I browser tenteranno regolarmente di riconvalidare le associazioni di app web installate. Se la registrazione di un gestore di URL non viene riconvalida perché i dati dell'associazione sono cambiati o non sono più disponibili, il browser rimuoverà le registrazioni.

Feedback

Il team di Chromium vuole saperne di più sulle tue esperienze con le PWA come gestori di URL.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Segnala un problema relativo alle specifiche nel repository GitHub corrispondente o aggiungi le tue opinioni su un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e di istruzioni semplici per la riproduzione e inserisci UI>Browser>WebAppInstalls nella casella Componenti. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra il supporto dell'API

Intendi utilizzare le PWA come gestori di URL? Il supporto pubblico aiuta il team di Chromium a stabilire la priorità delle funzionalità e mostra ad altri fornitori di browser l'importanza di supportarle.

Invia un tweet a @ChromiumDev usando l'hashtag #URLHandlers e facci sapere dove e come lo stai usando.

Link utili

Ringraziamenti

Le PWA come gestori di URL sono state specificate e implementate da Lu Huang e Mandy Chen del team di Microsoft Edge. Questo articolo è stato esaminato da Joe Medley. Immagine hero di Bryson Hammer su Unsplash.