Enregistrement du gestionnaire de protocoles d'URL pour les PWA

Laissez 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 des schémas (également appelés protocoles)

Un URI (Uniform Resource Identifier) est une séquence compacte de caractères qui identifie un ressource abstraite ou physique. Chaque URI commence par un scheme, qui fait référence à une spécification pour en attribuant des identifiants au sein de ce schéma. Ainsi, la syntaxe de l'URI est une syntaxe fédérée et extensible système de dénomination dans lequel la spécification de chaque schéma peut restreindre davantage la syntaxe et la sémantique en utilisant ce schéma. Les schémas sont également appelés protocoles. Vous pouvez voir quelques exemples systèmes 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) désigne le sous-ensemble d'URI qui, en plus de qui identifient une ressource, fournissent un moyen de localiser la ressource en décrivant son accès principal (son emplacement réseau, par exemple).

Contexte de la méthode registerProtocolHandler()

La méthode Navigator sécurisée uniquement pour le contenu registerProtocolHandler() permet aux sites d'enregistrer leur capacité à ouvrir ou gérer des schémas d'URL spécifiques. Par conséquent, les sites doivent appelez la méthode comme suit: navigator.registerProtocolHandler(scheme, url). Ces 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ée par l'URL avec échappement à gérer.

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

Pour clarifier cela, voici un exemple concret du flux:

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

En quoi consiste la gestion du protocole ?

Le mécanisme actuel d'enregistrement du gestionnaire de protocoles d'URL pour les PWA consiste à proposer un gestionnaire de protocoles. l'enregistrement dans le cadre d'une installation PWA via son fichier manifeste. Après l'enregistrement d'une PWA en tant que gestionnaire de protocoles, 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'ouvrira et recevez l'URL. Il est important de noter que l'enregistrement proposé en fonction du fichier manifeste et dans la pratique, les registerProtocolHandler() traditionnels jouent des rôles très similaires, ce qui permet d'offrir des expériences utilisateur complémentaires:

  • Les similitudes incluent des exigences concernant la liste des schémas autorisés à être enregistrés et 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 elles peuvent être utiles pour améliorer pour les utilisateurs de PWA. Par exemple, l'enregistrement d'une PWA basée sur un fichier manifeste ne nécessite pas une action supplémentaire 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 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 un lien vers une URL magnet dans un message de chat. Lorsque l'utilisateur clique sur le lien, une PWA torrent installée se lance et lance son téléchargement.
  • L'utilisateur dispose d'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 lancer automatiquement dans une fenêtre autonome.

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

L'API pour l'enregistrement de gestionnaires de protocoles d'URL est modélisée avec précision 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 de 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 du même schéma, par exemple, mailto, le système d'exploitation affiche un sélecteur qui permet à l'utilisateur de choisir et les gestionnaires enregistrés à utiliser.

La même application enregistrant plusieurs protocoles

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

Mises à jour d'applications et enregistrement de gestionnaires

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

  • Une mise à jour qui ajoute de nouveaux gestionnaires déclenche l'enregistrement de gestionnaires (distinct de l'installation de l'application).
  • Une mise à jour qui supprime les gestionnaires déclenche l'annulation de l'inscription des gestionnaires (distinct de l'application) désinstallation).

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

Accédez à la section Gestionnaires de protocoles via Application > Volet Manifest (Manifeste). Vous pouvez voir et tester tous les protocoles disponibles ici.

Par exemple, installez cette PWA de démonstration. Dans Section Gestionnaires de protocoles, saisissez "americano". et cliquez sur Tester le protocole pour ouvrir la page dédiée au café. dans la PWA.

Gestionnaires de protocoles dans le volet du fichier manifeste

Démo

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

  1. Accédez à https://protocol-handler.glitch.me/, puis installez PWA, puis actualisez l'application après l'installation. Le navigateur a enregistré la PWA en tant que pour le protocole web+coffee avec le système d'exploitation.
  2. Dans la fenêtre de la PWA installée, cliquez sur le lien https://protocol-handler-link.glitch.me/. Cela permettra ouvrir un nouvel onglet de navigateur avec trois liens. Cliquez sur le premier ou le deuxième (latte macchiato ou americano). Le navigateur affiche alors une invite et vous demande si l'application est d'accord pour le protocole web+coffee. Si vous acceptez, la PWA s'ouvre et affiche café sélectionné.
  3. Pour le comparer au flux traditionnel qui utilise navigator.registerProtocolHandler(), cliquez sur cliquez sur le bouton Enregistrer le gestionnaire de protocoles dans la PWA. Dans l'onglet du navigateur, cliquez sur le troisième lien (Tchai). De même, une invite s'affiche, mais la PWA s'ouvre dans un onglet, et non dans une fenêtre de navigateur.
  4. Envoyez-vous un message sur une application spécifique à une plate-forme, comme Skype sous Windows, contenant un lien du type <a href="web+coffee://americano">Americano</a>, puis cliquez dessus. De même, il devrait ouvrir installé la PWA.

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

Considérations de sécurité

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

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

Les tentatives de navigation programmatiques qui ne sont pas lancées par l'utilisateur, mais qui sont programmatiques, peuvent ne pas s'ouvrir applications. L'URL de protocole personnalisé ne peut être utilisée que dans les contextes de navigation de premier niveau. Elle ne peut pas être utilisée, 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 enregistrer à gérer.

Lors du premier lancement de la PWA en raison d'un protocole appelé, l'utilisateur se voit présenter un d'autorisation. 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 sont ignorés par le système d'exploitation. Pour annuler l'enregistrement du protocole l'utilisateur doit désinstaller la PWA qui l'a enregistrée. Le navigateur annulera également l'enregistrement le 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 du gestionnaire de protocoles d'URL pour PWA :

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou les propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur la 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 sur new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème, puis saisissez UI>Browser>WebAppInstalls dans le champ Composants. . Glitch est idéal pour partager des répétitions rapidement et facilement.

Apportez votre soutien à l'API

Prévoyez-vous d'utiliser l'enregistrement du gestionnaire de protocoles d'URL pour les PWA ? Votre soutien public aide le L'équipe Chromium hiérarchise les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de fournir une assistance de l'IA générative.

Expliquez comment vous prévoyez de l'utiliser dans le fil de discussion du discours de WiCG. Envoyer un tweet à @ChromiumDev en utilisant le hashtag #ProtocolHandler et n'hésitez pas à nous dire où et comment vous l'utilisez.

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é rédigée par Joe Medley et Fabio Rocha. Image héros de JJ Ying parle de Unsplash.