PWA en tant que gestionnaires d'URL

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

Thomas Steiner

Qu'est-ce que les PWA en tant que gestionnaires d'URL ?

Imaginez que vous discutez avec un ami à l'aide d'une application de messagerie instantanée telle que Messages sur macOS et que vous parlez de musique. Imaginons en outre que la PWA music.example.com est installée sur vos appareils. Si vous souhaitez partager votre titre préféré avec un ami, vous pouvez lui envoyer un lien profond tel que https://music.example.com/rick-astley/never-gonna-give-you-up. Comme ce lien est assez long, les développeurs de music.example.com ont peut-être décidé d'ajouter un lien court supplémentaire à chaque titre, comme https://🎵.example.com/r-a/n-g-g-y-u.

Les PWA en tant que gestionnaires d'URL permettent aux applications telles que music.example.com de s'enregistrer en tant que gestionnaires d'URL pour les URL correspondant à des formats tels que https://music.example.com, https://*.music.example.com ou https://🎵.example.com. Ainsi, les liens externes à la PWA (par exemple, d'une application de messagerie instantanée ou d'un client de messagerie) s'ouvrent dans la PWA installée plutôt que dans un onglet de navigateur.

Les PWA en tant que gestionnaires d'URL comportent deux ajouts:

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

Suggestions de cas d'utilisation de PWA en tant que gestionnaires d'URL

Voici quelques exemples de sites susceptibles d'utiliser cette API:

• les sites de streaming vidéo ou de musique afin que les liens de suivi ou de playlist s'ouvrent dans le lecteur de l'application ;
• Les lecteurs 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 de l'appli.

Utiliser des PWA en tant que gestionnaires d'URL

Activer via about://flags

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

Membre du fichier manifeste de l'application Web "url_handlers"

Pour associer une PWA installée à des formats d'URL, ces formats doivent être spécifiés dans le fichier manifeste de l'application Web. Cela se produit via le membre "url_handlers". Il accepte un tableau d'objets avec une propriété origin, qui est un string obligatoire qui est un modèle pour la mise en correspondance des origines. Ces formats sont autorisés à avoir 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 toujours considéré comme https://, mais il doit être explicitement mentionné.

L'extrait d'un fichier manifeste d'application Web ci-dessous montre comment l'exemple de PWA musical du paragraphe d'introduction pourrait configurer cela. La deuxième entrée avec le caractère générique ("https://*.music.example.com") garantit que l'application est également activée pour https://www.music.example.com ou d'autres exemples potentiels tels que 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

Étant donné que la PWA se trouve sur une origine différente (music.example.com) de certaines des URL qu'elle doit gérer (par exemple, https://🎵.example.com), l'application doit valider la propriété de ces autres origines. Cela 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, avec un membre nommé "web_apps". Ce membre est un tableau d'objets, et chaque objet représente une entrée pour une application Web unique. Chaque objet contient:

Chaque objet "details" contient les éléments suivants:

Vous trouverez ci-dessous un exemple de fichier web-app-origin-association correspondant à l'exemple de PWA musical ci-dessus. Elle serait hébergée sur l'origine 🎵.example.com et établit l'association avec la 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 vérifier, via le fichier web-app-origin-association correspondant, que chaque origine autorise cette application à gérer une telle URL.

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

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

Démonstration

Pour tester les PWA en tant que gestionnaires d'URL, veillez à définir l'indicateur du navigateur comme décrit ci-dessus, puis installez la PWA à l'adresse https://mandymsft.github.io/pwa/. En consultant le fichier manifeste de l'application Web, vous pouvez voir qu'il gère les URL avec les formats d'URL suivants: https://mandymsft.github.io et https://luhuangmsft.github.io. Étant donné que cette dernière a une origine différente (luhuangmsft.github.io) de la PWA, la PWA de mandymsft.github.io doit prouver sa propriété, ce qui se fait via le fichier web-app-origin-association hébergé à l'adresse https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Pour vérifier qu'il fonctionne bien, envoyez-vous un message de test à l'aide de l'application de messagerie instantanée de votre choix ou à l'aide d'un e-mail consulté dans un client de messagerie qui n'est pas basé sur le Web, comme Mail sur macOS. L'e-mail ou le message doit contenir les liens https://mandymsft.github.io ou https://luhuangmsft.github.io. Les deux devraient s'ouvrir dans la PWA installée.

Sécurité et autorisations

L'équipe Chromium a conçu et implémenté les PWA en tant que gestionnaires d'URL en suivant les principes fondamentaux définis dans Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, dont le contrôle utilisateur, 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é à choisir la PWA avec laquelle il souhaite gérer le format, le cas échéant. Les navigations qui commencent dans un onglet du navigateur ne sont pas gérées par cette proposition. Elle s'applique explicitement aux navigations qui commencent en dehors du navigateur.

Transparence

Si, pour une raison quelconque, la validation de l'association nécessaire ne peut pas être effectuée lors de l'installation de la PWA, 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 mécanisme d'association d'applications est un élément important 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 applications installées sur le système de l'utilisateur. Par exemple, les applications sous Windows peuvent utiliser l'API FindAppUriHandlersAsync pour énumérer les gestionnaires d'URL. Si les PWA s'enregistrent en tant que gestionnaires d'URL au niveau du système d'exploitation dans Windows, leur présence sera visible par d'autres applications.

Persistance des autorisations

Une origine peut modifier ses associations avec les PWA à tout moment. Les navigateurs tentent régulièrement de revalider les associations des applications Web installées. Si l'enregistrement d'un gestionnaire d'URL ne parvient pas à être revalidé parce que les données d'association ont changé ou ne sont plus disponibles, le navigateur supprime les enregistrements.

Commentaires

L'équipe Chromium souhaite connaître votre avis sur les PWA en tant que gestionnaires d'URL.

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 des PWA en tant que gestionnaires d'URL ? Votre assistance publique 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.

Envoyez un tweet à @ChromiumDev avec le hashtag #URLHandlers, et indiquez-nous où et comment vous l'utilisez.

Liens utiles

• Explication publique
• Démonstration | Source de démonstration
• Bug de suivi Chromium
• Entrée ChromeStatus.com
• Composant Blink: UI>Browser>WebAppInstalls
• Examen de la balise
• Documentation Microsoft

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é lu par Joe Medley. Image principale de Bryson Hammer sur Unsplash.