Cette page a été traduite par l'API Cloud Translation.

Enregistrement du gestionnaire de protocoles d'URL pour les PWA

Autorisez les PWA installées à gérer les liens qui utilisent un protocole spécifique pour une expérience plus intégrée.

Thomas Steiner

Informations sur les schémas (également appelés protocoles)

Un identifiant de ressource uniforme (URI) est une séquence compacte de caractères qui identifie une ressource abstraite ou physique. Chaque URI commence par un nom de schéma qui fait référence à une spécification d'attribution d'identifiants dans ce schéma. Par conséquent, la syntaxe URI est un système de dénomination fédéré et extensible dans lequel la spécification de chaque schéma peut encore restreindre la syntaxe et la sémantique des identifiants utilisant ce schéma. Les schémas sont également appelés protocoles. Vous trouverez ci-dessous quelques exemples de schémas.

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

Le terme Uniform Resource Locator (URL) fait référence au sous-ensemble d'URI qui, en plus d'identifier une ressource, fournit un moyen de la localiser en décrivant son mécanisme d'accès principal (par exemple, son emplacement réseau).

Informations sur la méthode `registerProtocolHandler()`

La méthode Navigator pour le contenu sécurisé uniquement (registerProtocolHandler()) permet aux sites d'enregistrer leur capacité à ouvrir ou à gérer des schémas d'URL particuliers. Par conséquent, les sites doivent appeler la méthode comme suit: navigator.registerProtocolHandler(scheme, url). Les deux paramètres sont définis comme suit:

scheme: chaîne contenant le protocole que le site souhaite gérer.
url: chaîne contenant l'URL du gestionnaire. Cette URL doit inclure %s, en tant qu'espace réservé qui sera remplacé par l'URL échappée à gérer.

Le schéma doit être l'un des schémas de la liste de confiance (par exemple, mailto, bitcoin ou magnet) ou commencer par web+, suivi d'au moins une ou plusieurs lettres ASCII minuscules après le préfixe web+, par exemple web+coffee.

Pour que tout soit plus clair, voici un exemple concret du flux:

L'utilisateur consulte un site sur https://coffeeshop.example.com/ qui effectue l'appel suivant : navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
Plus tard, alors qu'il consulte https://randomsite.example.com/, l'utilisateur clique sur un lien tel que <a href="web+coffee:latte-macchiato">All about latte macchiato</a>.
Le navigateur accède alors à l'URL suivante : https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato. La chaîne de recherche décodée en URL lit ensuite ?type=web+coffee://latte-macchiato.

À quoi sert la gestion de protocoles ?

Le mécanisme actuel d'enregistrement du gestionnaire de protocoles d'URL pour les PWA consiste à proposer l'enregistrement du gestionnaire de protocoles dans le cadre d'une installation de PWA via son fichier manifeste. Après avoir enregistré une PWA en tant que gestionnaire de protocole, lorsqu'un utilisateur clique sur un lien hypertexte avec un schéma spécifique tel que mailto, bitcoin ou web+music à partir d'un navigateur ou d'une application spécifique à la plate-forme, la PWA enregistrée s'ouvre et reçoit l'URL. Il est important de noter que l'enregistrement basé sur le fichier manifeste proposé et le registerProtocolHandler() traditionnel jouent des rôles très similaires dans la pratique, tout en permettant des expériences utilisateur complémentaires:

Les similitudes incluent les exigences concernant la liste des schémas autorisés à être enregistrés, ainsi que le nom et le format des paramètres, etc.
Les différences entre l'enregistrement basé sur le fichier manifeste sont subtiles, mais peuvent être utiles pour améliorer l'expérience des utilisateurs de PWA. Par exemple, l'enregistrement d'une PWA basée sur un fichier manifeste peut ne pas nécessiter d'action supplémentaire de la part de l'utilisateur, en dehors de l'installation de la PWA déclenchée par l'utilisateur.

Cas d'utilisation

Dans une PWA de traitement de texte, l'utilisateur d'un document rencontre un lien vers une présentation comme web+presentations://deck2378465. Lorsque l'utilisateur clique sur le lien, la PWA de présentation s'ouvre automatiquement dans le bon champ d'application et affiche la présentation.
Dans une application de chat spécifique à une plate-forme, l'utilisateur reçoit un lien vers une URL magnet dans un message de chat. Lorsque vous cliquez sur le lien, une PWA torrent installée se lance et commence à télécharger.
L'utilisateur a installé une PWA de streaming musical. Lorsqu'un ami partage un lien vers un titre comme web+music://songid=1234&time=0:13 et que l'utilisateur clique dessus, la PWA de streaming musical se lance automatiquement dans une fenêtre autonome.

Utiliser l'enregistrement du gestionnaire de protocoles d'URL pour les PWA

L'API d'enregistrement du gestionnaire de protocoles d'URL est modélisée de manière proche sur navigator.registerProtocolHandler(). Cette fois, les informations sont transmises de manière déclarative via le fichier manifeste de l'application Web dans une nouvelle propriété appelée "protocol_handlers", qui accepte un tableau d'objets avec les deux clés requises "protocol" et "url". L'extrait de code ci-dessous montre comment enregistrer web+tea et web+coffee. Les valeurs sont des chaînes contenant l'URL du gestionnaire avec l'espace réservé %s requis pour l'URL échappée.

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

Plusieurs applications s'enregistrant pour le même protocole

Si plusieurs applications s'enregistrent en tant que gestionnaires pour le même schéma, par exemple le protocole mailto, le système d'exploitation affiche un sélecteur et permet à l'utilisateur de choisir le gestionnaire enregistré à utiliser.

La même application s'enregistre pour plusieurs protocoles

La même application peut s'enregistrer pour plusieurs protocoles, comme illustré dans l'exemple de code ci-dessus.

Mises à jour de l'application et enregistrement du gestionnaire

Les enregistrements de gestionnaires sont synchronisés avec la dernière version du fichier manifeste fournie par l'application. Il existe deux cas:

Une mise à jour qui ajoute de nouveaux gestionnaires déclenche l'enregistrement du gestionnaire (distinct de l'installation de l'application).
Une mise à jour qui supprime des gestionnaires déclenche la désinscription des gestionnaires (distincte de la désinstallation de l'application).

Débogage du gestionnaire de protocoles dans DevTools

Accédez à la section Protocol Handlers (Gestionnaires de protocole) via le volet Application > Manifest (Application > Fichier manifeste). Vous pouvez consulter et tester tous les protocoles disponibles ici.

Par exemple, installez cette PWA de démonstration. Dans la section Protocol Handlers (Gestionnaires de protocole), saisissez "americano", puis cliquez sur Test protocol (Tester le protocole) pour ouvrir la page sur le café dans la PWA.

Gestionnaires de protocoles dans le volet "Fichier manifeste"

Démo

Vous pouvez regarder une démonstration de l'enregistrement du gestionnaire de protocoles d'URL pour les PWA sur Glitch.

Accédez à https://protocol-handler.glitch.me/, installez la PWA, puis actualisez l'application après l'installation. Le navigateur a maintenant enregistré la PWA en tant que gestionnaire du protocole web+coffee auprès du système d'exploitation.
Dans la fenêtre de la PWA installée, cliquez sur le lien https://protocol-handler-link.glitch.me/. Un nouvel onglet du navigateur s'ouvre avec trois liens. Cliquez sur le premier ou le deuxième (latte macchiato ou americano). Le navigateur affiche désormais une invite et vous demande si vous acceptez que l'application soit un gestionnaire de protocole pour le protocole web+coffee. Si vous acceptez, la PWA s'ouvre et affiche le café sélectionné.
Pour comparer le flux traditionnel qui utilise navigator.registerProtocolHandler(), cliquez sur le bouton Register protocol handler (Enregistrer le gestionnaire de protocole) dans la PWA. Ensuite, dans l'onglet du navigateur, cliquez sur le troisième lien (chai). Une invite s'affichera également, mais la PWA s'ouvrira dans un onglet, et non dans une fenêtre de navigateur.
Envoyez-vous un message dans une application spécifique à la plate-forme, comme Skype sur Windows, avec un lien tel que <a href="web+coffee://americano">Americano</a>, puis cliquez dessus. Elle doit également ouvrir la PWA installée.

Démonstration du gestionnaire de protocoles d'URL avec un onglet de navigateur contenant des liens à gauche et une fenêtre PWA autonome à droite.

Considérations de sécurité

Étant donné que l'installation d'une PWA nécessite que le contexte soit sécurisé, la gestion du protocole hérite de cette contrainte. La liste des gestionnaires de protocoles enregistrés n'est en aucun cas exposée au Web. Elle ne peut donc pas être utilisée comme vecteur d'empreinte digitale.

Tentatives de navigation non déclenchées par l'utilisateur

Les tentatives de navigation qui ne sont pas lancées par l'utilisateur, mais qui sont programmatiques, peuvent ne pas ouvrir d'applications. L'URL du protocole personnalisé ne peut être utilisée que dans les contextes de navigation de premier niveau, mais pas, par exemple, en tant qu'URL d'un iframe.

Liste d'autorisation des protocoles

Tout comme avec registerProtocolHandler(), il existe une liste d'autorisation de protocoles que les applications peuvent enregistrer pour les gérer.

Requête de consentement

Lors du premier lancement de la PWA en raison d'un protocole appelé, une boîte de dialogue d'autorisation s'affiche. Cette boîte de dialogue affiche le nom et l'origine de l'application, et demande à l'utilisateur si l'application est autorisée à gérer les liens du protocole. Si un utilisateur refuse la boîte de dialogue d'autorisation, le gestionnaire de protocole enregistré sera ignoré par le système d'exploitation. Pour annuler l'enregistrement du gestionnaire de protocole, l'utilisateur doit désinstaller la PWA qui l'a enregistré. Le navigateur désenregistrera également le gestionnaire de protocole si l'utilisateur sélectionne "Se souvenir de mon choix" et "Refuser".

Commentaires

L'équipe Chromium souhaite connaître vos expériences avec l'enregistrement du gestionnaire de protocoles d'URL pour les PWA.

Parlez-nous de la conception de l'API

L'API ne fonctionne-t-elle pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ? Signalez un problème de spécification dans le dépôt GitHub correspondant ou ajoutez vos commentaires à un problème existant.

Signaler un problème d'implémentation

Avez-vous trouvé un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente de la spécification ? Signalez un bug sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et saisissez UI>Browser>WebAppInstalls dans le champ Composants. Glitch est idéal pour partager des reproductions rapidement et facilement.

Afficher la compatibilité avec l'API

Prévoyez-vous d'utiliser l'enregistrement du gestionnaire de protocoles d'URL pour les PWA ? Votre soutien public aide l'équipe Chromium à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Indiquez comment vous prévoyez de l'utiliser dans le fil de discussion Discourse de la WICM. Envoyez un tweet à @ChromiumDev avec le hashtag #ProtocolHandler et indiquez-nous où et comment vous l'utilisez.

Liens utiles

Remerciements

L'enregistrement du gestionnaire de protocoles d'URL pour les PWA a été implémenté et spécifié par Fabio Rocha, Diego González, Connor Moody et Samuel Tang de l'équipe Microsoft Edge. Cet article a été relu par Joe Medley et Fabio Rocha. Image principale par JJ Ying sur Unsplash.