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

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

Un URI (Uniform Resource Identifier) 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 au sein de ce schéma. Ainsi, la syntaxe de l'URI est un système de dénomination fédéré et extensible dans lequel la spécification de chaque schéma peut restreindre davantage la syntaxe et la sémantique des identifiants utilisant ce schéma. Les schémas sont également appelés protocoles. Vous trouverez quelques exemples de schémas ci-dessous.

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

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

Contexte de la méthode `registerProtocolHandler()`

La méthode Navigator registerProtocolHandler() avec contenu sécurisé uniquement permet aux sites d'enregistrer leur capacité à ouvrir ou à gérer des schémas d'URL spécifiques. 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 d'autorisation (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 clarifier cela, voici un exemple concret du flux:

L'utilisateur consulte un site à l'adresse https://coffeeshop.example.com/ qui effectue l'appel suivant : navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s').
Par la suite, lorsqu'il accède à 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 via l'URL lit ensuite ?type=web+coffee://latte-macchiato.

En quoi consiste la gestion des protocoles ?

Le mécanisme actuel d'enregistrement du gestionnaire de protocoles d'URL pour les PWA consiste à proposer l'enregistrement du gestionnaire de protocole 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 à une plate-forme, la PWA enregistrée s'ouvre et reçoit l'URL. Il est important de noter que l'enregistrement proposé basé sur un fichier manifeste et le registerProtocolHandler() traditionnel jouent un rôle très similaire dans la pratique, tout en permettant la création d'expériences utilisateur complémentaires:

Les similarités incluent des exigences concernant la liste des schémas autorisés à être enregistrés, le nom et le format des paramètres, etc.
Les différences au niveau de 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 utilisateur supplémentaire en dehors de l'installation déclenchée par l'utilisateur de la PWA.

Cas d'utilisation

Dans une PWA de traitement de texte, l'utilisateur d'un document rencontre un lien vers une présentation telle que web+presentations://deck2378465. Lorsque l'utilisateur clique sur le lien, la PWA de présentation s'ouvre automatiquement dans le champ d'application approprié et affiche la présentation.
Dans une application de chat spécifique à une plate-forme, l'utilisateur reçoit dans un message de chat un lien vers une URL magnet. Lorsque vous cliquez sur le lien, une PWA torrent installée se lance et commence à être téléchargée.
Une PWA de streaming musical est installée sur l'appareil de l'utilisateur. 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 pour l'enregistrement du gestionnaire de protocoles d'URL est étroitement modélisée sur navigator.registerProtocolHandler(). Cette fois-ci, 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 avec échappement.

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

Plusieurs applications s'enregistrent 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 pour l'utilisateur et lui permet de choisir le gestionnaire à utiliser.

La même application est enregistrée pour plusieurs protocoles.

La même application peut s'enregistrer pour plusieurs protocoles, comme vous pouvez le voir dans l'exemple de code ci-dessus.

Mises à jour d'applications et enregistrement des gestionnaires

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

Une mise à jour qui ajoute de nouveaux gestionnaires déclenche leur enregistrement (séparément de l'installation de l'application).
Une mise à jour qui supprime les gestionnaires déclenche la désinscription des gestionnaires (ce qui n'est pas le cas de la désinstallation de l'application).

Débogage du gestionnaire de protocole dans les outils de développement

Accédez à la section Protocol Handlers (Gestionnaires de protocoles) via le volet Application > Manifest (Application > 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 protocoles), saisissez "americano", puis cliquez sur Test Protocol (Protocole de test) pour ouvrir la page "Café" dans la PWA.

Gestionnaires de protocoles dans le volet "Manifeste"

Démonstration

Vous pouvez regarder une démonstration sur 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 avec le système d'exploitation.
Dans la fenêtre de la PWA installée, cliquez sur le lien https://protocol-handler-link.glitch.me/. Cela ouvrira un nouvel onglet du navigateur avec trois liens. Cliquez sur la première ou la deuxième option (latte macchiato ou americano). Le navigateur affiche maintenant 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 effectuer une comparaison avec le flux traditionnel qui utilise navigator.registerProtocolHandler(), cliquez sur le bouton Enregistrer le gestionnaire de protocoles dans la PWA. Ensuite, dans l'onglet du navigateur, cliquez sur le troisième lien (chai). De même, une invite s'affiche, mais la PWA s'ouvre dans un onglet, et non dans une fenêtre de navigateur.
Envoyez-vous un message sur une application spécifique à une plate-forme, telle que Skype sous Windows, avec un lien tel que <a href="web+coffee://americano">Americano</a>, puis cliquez dessus. Il doit également ouvrir la PWA installée.

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

Points à noter concernant la sécurité

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

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

Les tentatives de navigation qui ne sont pas initiées par l'utilisateur, mais qui sont programmatiques, ne peuvent 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, comme URL d'un iFrame.

Liste d'autorisation des protocoles

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

Invite 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 à partir du protocole. Si un utilisateur refuse la boîte de dialogue d'autorisation, le gestionnaire de protocoles enregistré est ignoré par le système d'exploitation. Pour annuler l'enregistrement du gestionnaire de protocoles, l'utilisateur doit désinstaller la PWA qui l'a enregistré. Le navigateur annule également l'enregistrement du gestionnaire de protocoles si l'utilisateur sélectionne "Mémoriser mon choix" et sélectionne "Interdire".

Commentaires

L'équipe Chromium souhaite connaître votre avis sur l'enregistrement des gestionnaires de protocoles d'URL pour les PWA.

Décrivez-nous la conception de l'API.

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre 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 détecté un bug dans l'implémentation de Chromium ? Ou l'implémentation est-elle différente des spécifications ? Signalez un bug à l'adresse new.crbug.com. Veillez à inclure autant de détails que possible, ainsi que des instructions simples pour reproduire le bug, puis saisissez UI>Browser>WebAppInstalls dans la zone Composants. Glitch est idéal pour partager des reproductions simples et rapides.

Afficher la compatibilité avec l'API

Prévoyez-vous d'utiliser l'enregistrement de gestionnaire de protocoles d'URL pour les PWA ? Votre soutien au 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 sur le WICG Discourse. 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é lu par Joe Medley et Fabio Rocha. Image principale de JJ Ying sur Unsplash.