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 utilizzando un'applicazione di messaggistica istantanea come Messaggi su macOS e di parlare di musica. Inoltre, immagina che entrambi tu abbia installato la PWA music.example.com sui dispositivi. Se vuoi condividere il tuo brano preferito con un amico, puoi inviargli un link diretto come 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 altro link breve a ogni traccia, ad esempio https://🎵.example.com/r-a/n-g-g-y-u.

Le PWA come gestori di URL consentono 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 istantanea o da un client email, si aprano nella PWA installata anziché in una scheda del browser.

Le PWA come gestori di URL prevedono due aggiunte:

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

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

Ecco alcuni esempi di siti che potrebbero utilizzare questa API:

  • Siti di streaming di musica o video per monitorare i link o i link alle playlist aperti nell'esperienza del player dell'app.
  • I lettori di notizie o RSS che hanno seguito o a cui si sono iscritti aprono i siti 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, attiva 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 a pattern URL, questi pattern devono essere specificati nel manifest dell'app web. Ciò avviene tramite l'abbonamento "url_handlers". Accetta un array di oggetti con una proprietà origin, ovvero un string obbligatorio che è un pattern per l'associazione delle origini. Questi pattern possono avere un prefisso 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 è sempre considerato https://, ma deve essere menzionato esplicitamente.

L'estratto del manifest di un'app web riportato di seguito mostra come l'esempio di PWA musicale del paragrafo introduttivo potrebbe configurare questa opzione. 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 si trova 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 accade in un file web-app-origin-association ospitato nelle 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/D
"details" (Facoltativo) Un oggetto contenente array di pattern di URL inclusi ed esclusi object N/D

Ogni oggetto "details" contiene:

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

Di seguito è riportato un esempio di file web-app-origin-association per l'esempio di PWA musicale riportato sopra. Verrebbe ospitato nell'origine 🎵.example.com e stabilisce l'associazione con la PWA music.example.com, identificata dall'URL del 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 sono soddisfatte entrambe le seguenti condizioni:

  • L'URL corrisponde a una delle stringhe di origine in "url_handlers".
  • Il browser è in grado di convalidare 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 collocarlo nella cartella /.well-known/ nella radice dell'app. Per farlo funzionare, il nome del file deve essere esattamente web-app-origin-association.web-app-origin-association

Demo

Per testare le PWA come gestori di URL, assicurati di impostare il flag del browser come indicato sopra, quindi installa la PWA all'indirizzo https://mandymsft.github.io/pwa/. Controllando il file manifest dell'app web, puoi vedere che gestisce gli URL con i seguenti pattern URL: https://mandymsft.github.io e https://luhuangmsft.github.io. Poiché quest'ultimo si trova su un'origine (luhuangmsft.github.io) diversa dalla PWA, la PWA su mandymsft.github.io deve dimostrare la proprietà, tramite il file web-app-origin-association ospitato all'indirizzo https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Per verificare che funzioni, inviati un messaggio di prova utilizzando un'app di messaggistica istantanea 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 di testo deve contenere uno dei link https://mandymsft.github.io o https://luhuangmsft.github.io. Entrambi dovrebbero aprirsi nella PWA installata.

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

Sicurezza e autorizzazioni

Il team di Chromium ha progettato e implementato le PWA come gestori di URL utilizzando i principi fondamentali definiti nella sezione Controllare l'accesso a funzionalità avanzate della piattaforma web, tra cui controllo utente, 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 con quale PWA gestire il pattern, se presente. Le navigazioni che iniziano in una scheda del browser non sono gestite da questa proposta, che è esplicitamente rivolta alle navigazioni che iniziano al di fuori 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 degli URL attivi per gli URL interessati. I gestori degli URL, se implementati in modo improprio, possono essere utilizzati per rubare il traffico dei siti web. Per questo motivo, il meccanismo di associazione delle app è una parte importante del sistema.

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

Persistenza dell'autorizzazione

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

Feedback

Il team di Chromium vuole conoscere le tue esperienze con le PWA come gestori di URL.

Fornisci informazioni sul design 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? Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi il tuo parere a un problema esistente.

Segnalare un problema con l'implementazione

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

Mostra il supporto per l'API

Hai intenzione di utilizzare le PWA come gestori degli URL? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.

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

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.