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 (ovvero i protocolli)

Un Uniform Resource Identifier (URI) è una sequenza compatta di caratteri che identifica un risorsa fisica o astratta. Ogni URI inizia con schema che fa riferimento a una specifica per assegnando identificatori all'interno dello schema. Per questo, la sintassi dell'URI è federata ed estensibile sistema di denominazione in cui la specifica di ogni schema può limitare ulteriormente la sintassi e la semantica che usano questo schema. Gli schemi sono noti anche come protocolli. Puoi vedere alcuni esempi schemi che seguono.

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 identificando una risorsa, fornisci un mezzo per localizzarla descrivendone l'accesso principale meccanismo di attenzione (ad es. la sua posizione di rete).

Informazioni generali sul metodo registerProtocolHandler()

Il metodo Navigator di tipo secure-content-only registerProtocolHandler() consente ai siti di registrare la loro capacità di aprire o gestire determinati schemi URL. Pertanto, i siti devono chiama 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 dei schemi inclusi nell'elenco indirizzi attendibili (ad es. mailto, bitcoin o magnet) oppure inizia con web+, seguito da almeno uno o più lettere ASCII minuscole dopo il prefisso web+, ad esempio web+coffee.

Per maggiore chiarezza, ecco un esempio concreto di questa procedura:

  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, 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. In questo modo il browser accede al seguente URL: https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. La ricerca stringa decodificata in URL, quindi legge ?type=web+coffee://latte-macchiato.

Che cos'è la gestione del protocollo

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

  • Le somiglianze includono requisiti relativi all'elenco di schemi che possono essere registrati e ai nome e formato dei parametri, ecc.
  • Le differenze nella registrazione basata su manifest sono minime, ma possono essere utili per migliorare il per gli utenti di PWA. Ad esempio, la registrazione PWA basata su manifest potrebbe non richiedere un un'altra azione dell'utente oltre all'installazione della PWA avviata dall'utente.

Casi d'uso

  • In una PWA di elaborazione testi, l'utente di un documento trova un link a una presentazione come 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 della piattaforma, l'utente in un messaggio di chat riceve un link a un URL magnet. Facendo clic sul link, viene avviata una PWA di torrent installata e viene avviato il download.
  • L'utente ha installato una PWA di streaming di musica. Quando un amico condivide il link a un brano, ad esempio web+music://songid=1234&time=0:13 e l'utente fa clic su di esso, la PWA di streaming di musica si avvia automaticamente in una finestra autonoma.

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

L'API per la registrazione dei gestori del protocollo degli URL è modellata attentamente navigator.registerProtocolHandler(). Questa volta le informazioni vengono trasmesse in modo dichiarativo tramite il file manifest dell'app web in una nuova proprietà denominata "protocol_handlers" che accetta un array di con le due chiavi richieste "protocol" e "url". Lo snippet di codice riportato di seguito mostra come registra 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 che si registrano per lo stesso protocollo

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

La stessa app che 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. Là 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 del gestore (separato dall'app la disinstallazione).

Debug dei gestori di protocollo in DevTools

Vai alla sezione Gestori di protocollo tramite Applicazione > Riquadro Manifest. Puoi per 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 Test Protocol (Testa il protocollo) per aprire la pagina del bar. nella PWA.

Gestori di protocollo nel riquadro Manifest

Demo

Puoi vedere una demo della registrazione dei gestori del protocollo URL per le PWA su Glitch.

  1. Vai all'indirizzo https://protocol-handler.glitch.me/ e installa il 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/. In questo modo aprire una nuova scheda del browser con tre link. Fai clic sul primo o sul secondo (latte macchiato o americano). Il browser ora mostrerà un prompt in cui ti verrà chiesto se va bene che l'app sia un gestore di protocollo per il protocollo web+coffee. Se accetti, la PWA si aprirà e mostrerà caffè selezionato.
  3. Per fare un confronto con il flusso tradizionale che utilizza navigator.registerProtocolHandler(), fai clic il pulsante Registra gestore di protocollo nella PWA. Nella scheda del browser, fai clic sul terzo link (chai). Allo stesso modo, mostrerà un prompt, ma poi 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. Dovrebbe aprirsi anche ha installato PWA.

Demo sul gestore del protocollo URL con una scheda del browser con link a sinistra e una finestra PWA autonoma a destra.

Considerazioni sulla sicurezza

Poiché l'installazione della PWA richiede che il contesto sia sicuro, la gestione del protocollo eredita questo di blocco. L'elenco dei gestori di protocollo registrati non è esposto al web in alcun modo, quindi non possono essere utilizzate come vettore di fingerprinting.

Tentativi di navigazione non avviati dall'utente

I tentativi di navigazione non avviati dall'utente, ma programmatici, potrebbero non aprirsi app. L'URL di 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(), c'è una lista consentita di protocolli che le app possono registrare da gestire.

Al primo avvio della PWA a causa di un protocollo richiamato, 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 del protocollo. Se un utente rifiuta la finestra di dialogo di autorizzazione, nella gestore di protocollo registrato verrà ignorato dal sistema operativo. Per annullare la registrazione del protocollo , l'utente deve disinstallare la PWA in cui l'ha registrata. Il browser annullerà anche la registrazione Il gestore di protocollo se l'utente seleziona "Ricorda la mia scelta" e seleziona "Non consentire".

Feedback

Il team di Chromium vuole saperne di più sulla tua esperienza con la registrazione come gestore del protocollo URL per PWA.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o le proprietà necessarie per implementare la tua idea? Hai una domanda o un commento sulla sicurezza modello? Segnala un problema relativo alle specifiche sul repository GitHub corrispondente o aggiungi le tue opinioni a un problema esistente.

Segnalare 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. Includi il maggior numero di dettagli possibile, semplici istruzioni per la riproduzione e inserisci UI>Browser>WebAppInstalls nel campo Componenti . Glitch è la soluzione perfetta per condividere riproduzioni in modo facile e veloce.

Mostra il supporto per l'API

Intendi utilizzare la registrazione come gestore del protocollo URL per le PWA? Il tuo supporto pubblico aiuta Il team di Chromium assegna priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportare che li rappresentano.

Spiega come intendi utilizzarlo nel thread del discorso di WicG. Invia un tweet a @ChromiumDev utilizzando l'hashtag #ProtocolHandler: e facci sapere dove e come lo utilizzi.

Ringraziamenti

La registrazione del gestore del 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 è stata recensita da Joe Medley e Fabio Rocha. Immagine hero di JJ Ying su Unsplash.