Registrazione del gestore del protocollo URL per le PWA

Consenti alle PWA installate di gestire i link che usano un protocollo specifico per un'esperienza più integrata.

Informazioni sugli schemi (ovvero protocolli)

Un URI (Uniform Resource Identifier) è una sequenza compatta di caratteri che identifica una risorsa astratta o fisica. Ogni URI inizia con un nome schema che fa riferimento a una specifica per l'assegnazione di identificatori all'interno di quello schema. Di conseguenza, la sintassi dell'URI è un sistema di denominazione federato ed estensibile in cui la specifica di ogni schema può limitare ulteriormente la sintassi e la semantica degli identificatori che utilizzano quello schema. Gli schemi sono noti anche come protocolli. Puoi vedere alcuni esempi di programmi di seguito.

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

Il termine Uniform Resource Locator (URL) si riferisce al sottoinsieme di URI che, oltre a identificare una risorsa, forniscono un mezzo per individuare la risorsa descrivendone il meccanismo di accesso principale (ad esempio la località della rete).

Informazioni generali sul metodo registerProtocolHandler()

Il metodo Navigator basato solo su contenuti sicuri registerProtocolHandler() consente ai siti di registrare la loro capacità di aprire o gestire determinati schemi di URL. Pertanto, i siti devono chiamare il metodo in questo modo: navigator.registerProtocolHandler(scheme, url). I due parametri sono definiti come segue:

  • scheme: una stringa contenente il protocollo che il sito vuole gestire.
  • url: una stringa contenente l'URL del gestore. Questo URL deve includere %s, come segnaposto che verrà sostituito con l'URL con caratteri di escape da gestire.

Lo schema deve essere uno degli schemi inclusi nella lista sicura (ad esempio mailto, bitcoin o magnet) oppure iniziare con web+, seguito da almeno una o più lettere ASCII minuscole dopo il prefisso web+, ad esempio web+coffee.

Per renderlo più chiaro, ecco un esempio concreto della procedura:

  1. L'utente visita un sito in https://coffeeshop.example.com/ che effettua la seguente chiamata: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. In un secondo momento, durante la visita a https://randomsite.example.com/, l'utente fa clic su un link, ad esempio <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
  3. Questo fa sì che il browser acceda al seguente URL: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. La stringa di ricerca decodificata con URL restituisce quindi ?type=web+coffee://latte-macchiato.

Oggetto della gestione dei protocolli

L'attuale meccanismo di registrazione del gestore di protocollo URL per le PWA riguarda l'offerta della registrazione dei gestori di protocollo come parte di un'installazione PWA tramite il relativo manifest. Dopo aver registrato una PWA come gestore di protocollo, quando un utente fa clic su un link ipertestuale con uno schema specifico come mailto, bitcoin o web+music da un browser o un'app specifica della piattaforma, la PWA registrata si aprirà e riceverà l'URL. È importante notare che sia la registrazione basata su manifest proposta sia la tradizionale registerProtocolHandler() svolgono ruoli molto simili nella pratica, pur consentendo la possibilità di esperienze utente complementari:

  • Le somiglianze includono requisiti relativi all'elenco di schemi che è possibile registrare, al nome e al formato dei parametri e così via.
  • Le differenze nella registrazione basata su manifest sono minime, ma potrebbero essere utili per migliorare l'esperienza per gli utenti di PWA. Ad esempio, la registrazione della PWA basata su manifest potrebbe non richiedere un'ulteriore azione dell'utente oltre all'installazione della PWA avviata dall'utente.

casi d'uso

  • In una PWA di elaborazione testi, l'utente in un documento trova un link a una presentazione, ad esempio web+presentations://deck2378465. Quando l'utente fa clic sul link, la PWA della presentazione si apre automaticamente nell'ambito corretto e mostra la presentazione.
  • In un'app di chat specifica per la piattaforma, l'utente in un messaggio di chat riceve un link a un URL magnet. Dopo aver fatto clic sul link, viene avviata una PWA torrent installata e avviata il download.
  • L'utente ha installato una PWA streaming di musica. Quando un amico condivide un link a un brano come web+music://songid=1234&time=0:13 e l'utente fa clic sul brano, la PWA di streaming musicale verrà avviata automaticamente in una finestra indipendente.

Come utilizzare la registrazione del gestore di protocolli URL per le PWA

L'API per la registrazione del gestore di protocollo URL è modellata strettamente su navigator.registerProtocolHandler(). Solo questa volta le informazioni vengono passate in modo dichiarativo tramite il manifest dell'app web in una nuova proprietà denominata "protocol_handlers" che accetta un array di oggetti con le due chiavi richieste "protocol" e "url". Lo snippet di codice riportato di seguito mostra come registrare web+tea e web+coffee. I valori sono stringhe contenenti l'URL del gestore con il segnaposto %s richiesto per l'URL con caratteri di escape.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Più app che si registrano per lo stesso protocollo

Se più applicazioni si registrano come gestori per lo stesso schema, ad esempio il protocollo mailto, il sistema operativo mostrerà all'utente un selettore e gli consentirà di decidere quale dei gestori registrati utilizzare.

La stessa app si registra per più protocolli

La stessa app può registrarsi per più protocolli, come puoi vedere nell'esempio di codice riportato sopra.

Aggiornamenti delle app e registrazione dei gestori

Le registrazioni dei gestori vengono sincronizzate con l'ultima versione del file manifest fornita dall'app. Esistono due casi:

  • Un aggiornamento che aggiunge nuovi gestori attiva la registrazione dei gestori (separata dall'installazione dell'app).
  • Un aggiornamento che rimuove i gestori attiva l'annullamento della registrazione dei gestori (separato dalla disinstallazione delle app).

Debug del gestore di protocollo in DevTools

Vai alla sezione Gestori di protocollo tramite il riquadro Applicazione > Manifest. Puoi visualizzare e testare tutti i protocolli disponibili qui.

Ad esempio, installa questa PWA demo. Nella sezione Gestori di protocollo, digita "americano" e fai clic su Verifica protocollo per aprire la pagina relativa al caffè nella PWA.

Gestori di protocollo nel riquadro Manifest

Demo

Puoi vedere una demo della registrazione del gestore di protocolli URL per le PWA su Glitch.

  1. Vai a https://protocol-handler.glitch.me/, installa la PWA e ricarica l'app dopo l'installazione. Il browser ha ora registrato la PWA come gestore del protocollo web+coffee con il sistema operativo.
  2. Nella finestra della PWA installata, fai clic sul link https://protocol-handler-link.glitch.me/. Si aprirà una nuova scheda del browser con tre link. Fai clic sul primo o sul secondo (latte macchiato o americano). Il browser ora mostrerà un messaggio e ti chiederà se vuoi che l'app sia un gestore di protocollo per il protocollo web+coffee. Se accetti, la PWA si aprirà e mostrerà il caffè selezionato.
  3. Per un confronto con il flusso tradizionale che utilizza navigator.registerProtocolHandler(), fai clic sul pulsante Registra gestore di protocollo nella PWA. Poi nella scheda del browser fai clic sul terzo link (chai). Allo stesso modo, mostrerà un prompt, ma aprirà la PWA in una scheda, non in una finestra del browser.
  4. Inviati un messaggio su un'applicazione specifica della piattaforma come Skype su Windows con un link come <a href="web+coffee://americano">Americano</a> e fai clic sul link. Allo stesso modo, dovrebbe aprire la PWA installata.

Demo del gestore di protocolli URL con la scheda del browser con i link a sinistra e la finestra PWA indipendente a destra.

Considerazioni sulla sicurezza

Poiché l'installazione di PWA richiede che il contesto sia sicuro, la gestione dei protocolli eredita questo vincolo. L'elenco dei gestori di protocollo registrati non è esposto al web in alcun modo, quindi non può essere utilizzato come vettore di fingerprinting.

Tentativi di navigazione non avviati dall'utente

I tentativi di navigazione non avviati dall'utente, ma che sono programmatici, non possono aprire le app. L'URL del protocollo personalizzato può essere utilizzato solo in contesti di navigazione di primo livello ma non, ad esempio, come URL di un iframe.

Lista consentita di protocolli

Proprio come con registerProtocolHandler(), esiste una lista consentita di protocolli che le app possono gestire.

Al primo avvio della PWA a causa di un protocollo richiamato, all'utente viene visualizzata una finestra di dialogo delle autorizzazioni. Questa finestra di dialogo mostra il nome e l'origine dell'app e chiede all'utente se l'app è autorizzata a gestire i link dal protocollo. Se un utente rifiuta la finestra di dialogo delle autorizzazioni, il gestore di protocollo registrato verrà ignorato dal sistema operativo. Per annullare la registrazione del gestore di protocollo, l'utente deve disinstallare la PWA da cui è stato registrato. Il browser annulla la registrazione del gestore di protocollo anche se l'utente seleziona "Memorizza la mia scelta" e "Non consentire".

Feedback

Il team di Chromium vuole conoscere la tua esperienza con la registrazione del gestore di protocolli URL per le PWA.

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 la registrazione del gestore di protocolli URL per le PWA? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto è fondamentale supportarle.

Condividi come prevedi di utilizzarlo nel thread del discorso WiCG. Invia un tweet a @ChromiumDev usando l'hashtag #ProtocolHandler e facci sapere dove e come lo stai usando.

Ringraziamenti

La registrazione del gestore di protocolli URL per le PWA è stata implementata e specificata da Fabio Rocha, Diego González, Connor Moody e Samuel Tang del team di Microsoft Edge. Questo articolo è stato esaminato da Joe Medley e Fabio Rocha. Immagine hero di JJ Ying su Unsplash.