Registrazione del gestore del protocollo URL per le PWA

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

Thomas Steiner

Informazioni generali sugli schemi (noti anche come protocolli)

Un Uniform Resource Identifier (URI) è una sequenza compatta di caratteri che identifica una risorsa astratta o fisica. Ogni URI inizia con un nome di schema che fa riferimento a una specifica per l'assegnazione degli identificatori all'interno di questo schema. Di conseguenza, la sintassi 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 lo utilizzano. Gli schemi sono noti anche come protocolli. Di seguito sono riportati alcuni esempi di schemi.

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 individuarla descrivendone il meccanismo di accesso principale (ad es. la posizione di rete).

Informazioni di base sul metodo registerProtocolHandler()

Il metodo Navigator solo contenuti sicuri registerProtocolHandler() consente ai siti di registrare la propria capacità di aprire o gestire particolari schemi URL. Pertanto, i siti devono chiamare il metodo nel seguente 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 dei schemi inclusi nella lista consentita (ad esempio mailto, bitcoin o magnet) o iniziare con web+, seguito da almeno una o più lettere ASCII minuscole dopo il prefisso web+, ad esempio web+coffee.

Per chiarire, ecco un esempio concreto del flusso:

  1. L'utente visita un sito all'indirizzo https://coffeeshop.example.com/ che effettua la seguente chiamata: navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
  2. In un secondo momento, mentre visita https://randomsite.example.com/, l'utente fa clic su un link come <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
  3. Di conseguenza, il browser si apre sul seguente URL: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. La stringa di ricerca con URL decodificato viene quindi letta come ?type=web+coffee://latte-macchiato.

Informazioni sulla gestione dei protocolli

Il presente meccanismo di registrazione del gestore di protocollo URL per le PWA riguarda l'offerta della registrazione del gestore di protocollo nell'ambito 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 da un'app specifica per la piattaforma, la PWA registrata si aprirà e riceverà l'URL. È importante notare che sia la registrazione basata sul manifest proposta sia il registerProtocolHandler() tradizionale svolgono ruoli molto simili nella pratica, pur consentendo la possibilità di esperienze utente complementari:

  • Le somiglianze includono i requisiti relativi all'elenco degli schemi consentiti per la registrazione, al nome e al formato dei parametri e così via.
  • Le differenze nella registrazione basata sul manifest sono sottili, ma potrebbero essere utili per migliorare l'esperienza degli utenti delle PWA. Ad esempio, la registrazione di una PWA basata su manifest potrebbe non richiedere un'azione aggiuntiva da parte dell'utente, a parte l'installazione della PWA avviata dall'utente.

Casi d'uso

  • In una PWA di videoscrittura, l'utente in un documento trova un link a una presentazione comeweb+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 riceve un link a un URL magnet in un messaggio di chat. Dopo aver fatto clic sul link, viene avviata una PWA torrent installata e inizia il download.
  • L'utente ha installato una PWA per lo streaming di musica. Quando un amico condivide un link a un brano comeweb+music://songid=1234&time=0:13 e l'utente ci fa clic sopra, la PWA di streaming musicale si avvia automaticamente in una finestra autonoma.

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

L'API per la registrazione del gestore di protocollo URL è modellata in modo molto simile a navigator.registerProtocolHandler(). Solo che questa volta le informazioni vengono trasmesse 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 obbligatorie "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 obbligatorio 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 registrate 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 registrata per più protocolli

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

Aggiornamenti dell'app e registrazione dell'handler

Le registrazioni degli handler vengono sincronizzate con la versione manifest più recente 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 la loro annullamento della registrazione (separata dalla disinstallazione dell'app).

Debug del gestore di protocollo in DevTools

Vai alla sezione Protocol Handlers (Gestione protocolli) tramite il riquadro Application (Applicazione) > Manifest (Manifesto). Puoi visualizzare e testare tutti i protocolli disponibili qui.

Ad esempio, installa questa PWA dimostrativa. Nella sezione Gestori di protocollo, digita "cappuccino" e fai clic su Testa protocollo per aprire la pagina del caffè nella PWA.

Gestori di protocollo nel riquadro Manifest

Demo

Puoi guardare una demo della registrazione del gestore di protocollo URL per le PWA su Glitch.

  1. Vai alla pagina https://protocol-handler.glitch.me/, installa la PWA e ricarica l'app dopo l'installazione. Il browser ha ora registrato la PWA come gestore per il 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 sulla prima o sulla seconda opzione (latte macchiato o americano). A questo punto il browser ti chiederà se l'app può essere un gestore di protocolli per il protocollo web+coffee. Se accetti, la PWA si aprirà e mostrerà il caffè selezionato.
  3. Per fare 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). Verrà visualizzata una richiesta, ma la PWA verrà aperta in una scheda, non in una finestra del browser.
  4. Inviati un messaggio su un'applicazione specifica per la piattaforma, come Skype su Windows, con un link come <a href="web+coffee://americano">Americano</a> e fai clic sul link. Dovrebbe anche aprirsi la PWA installata.

Demo del gestore di protocollo URL con la scheda del browser con i link a sinistra e la finestra della PWA autonoma a destra.

Considerazioni sulla sicurezza

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

Tentativi di navigazione non avviati dall'utente

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

Lista consentita di protocolli

Come per registerProtocolHandler(), esiste una lista consentita di protocolli che le app possono registrare per gestirli.

Al primo avvio della PWA a causa di un protocollo invocato, all'utente verrà presentata una finestra di dialogo per le 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 che lo ha registrato. Il browser unregister anche il gestore di protocollo se l'utente seleziona "Ricorda la mia scelta" e "Non consentire".

Feedback

Il team di Chromium vuole conoscere le tue esperienze con la registrazione del gestore di protocollo URL per le PWA.

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

Prevedi di utilizzare la registrazione del gestore di protocollo 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 sia fondamentale supportarle.

Spiega come prevedi di utilizzarlo nel thread di Discourse del WICG. Invia un tweet a @ChromiumDev utilizzando l'hashtag #ProtocolHandler e facci sapere dove e come lo utilizzi.

Ringraziamenti

La registrazione del gestore di protocollo 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.