PWA en tant que gestionnaires d'URL

Laissez les PWA installées gérer les URL pour une expérience plus intégrée.

Thomas Steiner

En quoi consistent les PWA comme gestionnaires d'URL ?

Imaginez que vous discutez avec un ami à l'aide d'une application de messagerie instantanée comme Messages sur macOS et que vous parlez de musique. Imaginons maintenant que vous ayez tous les deux installé la PWA music.example.com sur vos appareils. Si vous souhaitez partager votre titre préféré pour le faire profiter à un ami, vous pouvez envoyer un lien profond comme https://music.example.com/rick-astley/never-gonna-give-you-up. Étant donné que le lien est assez long, les développeurs de music.example.com ont peut-être décidé d'ajouter un bouton un lien court vers chaque piste, par exemple https://🎵.example.com/r-a/n-g-g-y-u.

Les PWA en tant que gestionnaires d'URL permettent à des applications telles que music.example.com de s'enregistrer en tant que gestionnaires d'URL pour URL qui correspondent à des formats tels que https://music.example.com, https://*.music.example.com ou https://🎵.example.com, donc qui renvoie depuis l'extérieur de la PWA, par exemple une application de messagerie instantanée ou un e-mail , ouvrez-le dans la PWA installée plutôt que dans un onglet du navigateur.

En tant que gestionnaires d'URL, la PWA comporte deux ajouts:

  1. Membre du fichier manifeste d'application Web "url_handlers".
  2. Format de fichier web-app-origin-association permettant de valider les associations d'URL comprises dans le champ d'application et hors du champ d'application.

Cas d'utilisation suggérés pour les PWA en tant que gestionnaires d'URL

Voici quelques exemples de sites qui peuvent utiliser cette API:

  • Sites de streaming musical ou vidéo pour que les liens des titres ou des playlists s'ouvrent dans le lecteur de l'application.
  • Les sites d'actualités ou de flux RSS ainsi que les sites auxquels vous êtes abonné ou auxquels vous êtes abonné s'ouvrent en mode lecteur dans l'application.

Utiliser des PWA comme gestionnaires d'URL

Activer via about://flags

Pour tester localement les PWA en tant que gestionnaires d'URL, sans jeton d'évaluation de l'origine, activez L'indicateur #enable-desktop-pwas-url-handling dans about://flags.

Membre du fichier manifeste d'application Web "url_handlers"

Pour associer une PWA installée à des formats d'URL, vous devez spécifier ces formats dans l'application Web fichier manifeste. Cette opération s'effectue via le membre "url_handlers". Il accepte un tableau d'objets avec une Propriété origin, qui est une string obligatoire qui correspond à un format pour la mise en correspondance des origines. Ces les formats peuvent comporter un préfixe générique (*) afin d'inclure plusieurs sous-domaines (comme https://*.example.com). Les URL qui correspondent à ces origines peuvent être gérées par cette application Web. Le schéma est est toujours supposé être https://, mais il doit être explicitement mentionné.

L'extrait du fichier manifeste d'une application Web ci-dessous montre comment l'exemple de PWA musicale de l'introduction paragraphe pourrait configurer cela. La deuxième entrée avec le caractère générique ("https://*.music.example.com") garantit que que l'application est également activée pour https://www.music.example.com ou pour d'autres exemples potentiels, comme https://marketing-activity.music.example.com

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Le fichier web-app-origin-association

La PWA ayant une origine différente (music.example.com) de celle de certaines des URL dont elle a besoin identifiant (par exemple, https://🎵.example.com), l'application doit valider la propriété de ces autres origines. Ce se produit dans un fichier web-app-origin-association hébergé sur les autres origines.

Ce fichier doit contenir un fichier JSON valide. La structure de premier niveau est un objet, dont un membre est nommé "web_apps" Ce membre est un tableau d'objets, et chaque objet représente une entrée pour une valeur de votre application Web. Chaque objet contient:

Champ Description Type Par défaut
"manifest" (Obligatoire) Chaîne de l'URL du fichier manifeste de l'application Web de la PWA associée string N/A
"details" (Facultatif) Un objet contenant des tableaux de formats d'URL inclus et exclus object N/A

Chaque objet "details" contient:

Champ Description Type Par défaut
"paths" (Facultatif) Tableau de chaînes de chemin d'accès autorisées string[] []
"exclude_paths" (Facultatif) Tableau de chaînes de chemin d'accès non autorisées string[] []

Vous trouverez ci-dessous un exemple de fichier web-app-origin-association pour l'exemple de PWA musicale ci-dessus. Il est hébergé sur l'origine 🎵.example.com et établit l'association avec le PWA music.example.com, identifiée par l'URL du fichier manifeste de son application Web.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Quand une URL correspond-elle ?

Une PWA correspond à une URL à traiter si les deux conditions suivantes sont remplies:

  • L'URL correspond à l'une des chaînes d'origine dans "url_handlers".
  • Le navigateur peut valider chaque élément via le fichier web-app-origin-association correspondant. accepte de laisser cette application gérer une telle URL.

À propos de la découverte de fichiers web-app-origin-association

Pour que le navigateur puisse découvrir le fichier web-app-origin-association, les développeurs doivent : placez le fichier web-app-origin-association dans /.well-known/ à la racine de l'application. Pour que cela fonctionne, le nom du fichier doit être exactement web-app-origin-association.

Démo

Pour tester les PWA en tant que gestionnaires d'URL, veillez à définir l'indicateur du navigateur sur comme indiqué ci-dessus, puis installez la PWA https://mandymsft.github.io/pwa/. En consultant ses fichier manifeste d'application Web, vous pouvez voir qu'il gère les URL dont les formats sont les suivants: https://mandymsft.github.io et https://luhuangmsft.github.io Étant donné que ce dernier a une origine différente (luhuangmsft.github.io) que la PWA, la PWA sur mandymsft.github.io doit prouver qu'elle en est propriétaire. web-app-origin-association fichier hébergé sur https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Pour vérifier que tout fonctionne, envoyez-vous un message test à l'aide d'une application de messagerie instantanée de de votre choix ou un e-mail affiché dans un client de messagerie qui n'est pas basé sur le Web, comme Mail sur macOS. La l'e-mail ou le message doivent contenir l'un des liens https://mandymsft.github.io ou https://luhuangmsft.github.io Les deux doivent s'ouvrir dans la PWA installée.

Application de messagerie instantanée Windows Skype située à côté de la PWA de démonstration installée, qui s'ouvre en mode autonome après avoir cliqué sur un lien géré par celle-ci dans un message de chat Skype

Sécurité et autorisations

L'équipe Chromium a conçu et implémenté des PWA en tant que gestionnaires d'URL en s'appuyant sur les principes fondamentaux définies dans la section Contrôler l'accès à des fonctionnalités puissantes de plate-forme Web, y compris les règles le contrôle, la transparence et l'ergonomie.

Contrôle des utilisateurs

Si plusieurs PWA s'enregistrent en tant que gestionnaires d'URL pour un format d'URL donné, l'utilisateur est invité de choisir la PWA avec laquelle gérer le modèle, le cas échéant. Les navigations démarrant dans un les onglets de navigateur ne sont pas gérés par cette proposition. Elle est explicitement destinée aux navigations qui commencent en dehors du navigateur.

Transparence

Si la validation de l'association nécessaire ne s'effectue pas correctement lors de l'installation de la PWA pour quelle qu'en soit la raison, le navigateur n'enregistrera pas l'application en tant que gestionnaire d'URL actif pour les URL concernées. S'ils sont mal implémentés, les gestionnaires d'URL peuvent être utilisés pour pirater le trafic des sites Web. C'est pourquoi le le mécanisme d'association d'applications constitue une partie importante du schéma.

Les applications spécifiques à la plate-forme peuvent déjà utiliser les API du système d'exploitation pour énumérer les configurations des applications sur le système de l'utilisateur. Par exemple, les applications sous Windows peuvent utiliser le FindAppUriHandlersAsync API pour énumérer les gestionnaires d'URL. Si les PWA sont enregistrées en tant que gestionnaires d'URL au niveau du système d'exploitation sous Windows, leur présence serait visible pour d'autres applications.

Persistance des autorisations

Une origine peut modifier ses associations avec des PWA à tout moment. Les navigateurs essaient régulièrement de revalider les associations des applications Web installées. Si l'enregistrement d'un gestionnaire d'URL ne parvient pas à revalider si les données d'association ont été modifiées ou ne sont plus disponibles, le navigateur supprimera enregistrements.

Commentaires

L'équipe Chromium souhaite en savoir plus sur votre expérience avec les PWA en tant que gestionnaires d'URL.

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 des PWA comme gestionnaires d'URL ? Votre assistance publique aide l'équipe Chromium à prioriser et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #URLHandlers et laissez où et comment vous l'utilisez.

Liens utiles

Remerciements

Les PWA en tant que gestionnaires d'URL ont été spécifiées et implémentées par Lu Huang et Mandy Chen de l'équipe Microsoft Edge. Cet article a été examiné par Joe Medley Image héros de Bryson Hammer sur Unsplash.