Les raccourcis d'applications permettent d'accéder rapidement à quelques actions courantes dont les utilisateurs ont souvent besoin.
Pour améliorer la productivité des utilisateurs et faciliter le réengagement avec des tâches clés, la plate-forme Web prend désormais en charge les raccourcis d'application. Elles permettent aux développeurs Web d'accéder rapidement à un certain nombre d'actions courantes dont les utilisateurs ont souvent besoin.
Cet article vous explique comment définir les raccourcis d'application. En outre, vous découvrirez certaines des bonnes pratiques associées.
À propos des raccourcis d'application
Les raccourcis d'application aident les utilisateurs à démarrer rapidement des tâches courantes ou recommandées dans votre application Web. Un accès facile à ces tâches depuis n'importe où l'icône de l'application améliore la productivité des utilisateurs et augmente leur engagement avec l'application Web.
Pour accéder au menu des raccourcis d'application, effectuez un clic droit sur l'icône d'application dans la barre des tâches (Windows) ou le dock (macOS) du bureau de l'utilisateur, ou appuyez de manière prolongée sur l'icône de lanceur de l'application sur Android.
Le menu des raccourcis d'application ne s'affiche que pour les progressive web apps (applications Web progressives) installées sur l'ordinateur ou l'appareil mobile de l'utilisateur. Consultez la section Installation de notre module "Apprendre à utiliser les PWA" pour en savoir plus sur les exigences d'installation.
Chaque raccourci d'application exprime un intent utilisateur, chacun étant associé à une URL dans le champ d'application de votre application Web. L'URL est ouverte lorsqu'un utilisateur active le raccourci d'application. Voici quelques exemples de raccourcis d'application:
- Éléments de navigation de premier niveau (par exemple, page d'accueil, chronologie, commandes récentes)
- Rechercher
- Tâches de saisie de données (par exemple, rédiger un e-mail ou un tweet, ajouter un reçu)
- Activités (démarrer une discussion avec les contacts les plus populaires, par exemple)
Définir des raccourcis d'application dans le fichier manifeste de l'application Web
Les raccourcis d'application sont éventuellement définis dans le fichier manifeste d'application Web, un fichier JSON qui indique au navigateur votre application Web et son comportement lorsqu'elle est installée sur l'ordinateur ou l'appareil mobile de l'utilisateur. Plus précisément, ils sont déclarés dans le membre de tableau shortcuts. Vous trouverez ci-dessous un exemple de fichier manifeste d'application Web potentiel.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
…
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
Chaque membre du tableau shortcuts est un dictionnaire qui contient au moins une name et une url. Les autres membres sont facultatifs.
name- Libellé lisible du raccourci d'application lorsqu'il est présenté à l'utilisateur.
short_name(facultatif)- Libellé lisible utilisé lorsque l'espace est limité. Nous vous recommandons de le fournir, même s'il est facultatif.
description(facultatif)- Objectif lisible du raccourci d'application. Il n'est pas utilisé au moment de la rédaction de ce document, mais il pourrait être exposé à des technologies d'assistance à l'avenir.
url- URL s'ouvre lorsqu'un utilisateur active le raccourci d'application. Cette URL doit figurer dans le champ d'application du fichier manifeste de l'application Web. S'il s'agit d'une URL relative, l'URL de base est celle du fichier manifeste de l'application Web.
icons(facultatif)Tableau d'objets de ressources d'image. Chaque objet doit inclure les propriétés
srcetsizes. Contrairement aux icônes du fichier manifeste d'application Web, l'élémenttypede l'image est facultatif. Les fichiers SVG ne sont pas acceptés au moment de la rédaction de ce document. Utilisez plutôt le format PNG.Si vous souhaitez obtenir des icônes au pixel près, fournissez-les par incréments de 48 dp (ex. : icônes de 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144 ou 192 x 192 pixels). Sinon, nous vous recommandons d'utiliser une seule icône de 192 x 192 pixels.
À des fins de mesure de la qualité, les icônes doivent avoir au moins la moitié de la taille idéale de l'appareil sur Android, soit 48 dp. Par exemple, pour un affichage sur un écran xxhdpi, l'icône doit faire au moins 72 x 72 pixels. (Cette valeur est dérivée de la formule de conversion d'unités dp en pixels.)
Tester les raccourcis de votre application
Pour vérifier que les raccourcis de votre application sont correctement configurés, utilisez le volet Manifest (Fichier manifeste) du panneau Application des outils de développement.
Ce volet fournit une version lisible de la plupart des propriétés de votre fichier manifeste, y compris les raccourcis d'application. Cela permet de vérifier facilement que toutes les icônes de raccourci, lorsqu'elles sont fournies, se chargent correctement.
Il est possible que les raccourcis d'application ne soient pas disponibles immédiatement pour tous les utilisateurs, car les mises à jour des progressive web apps sont limitées à une fois par jour. Découvrez comment Chrome gère les mises à jour du fichier manifeste d'application Web.
Bonnes pratiques
Classer les raccourcis d'application par priorité
Les raccourcis sont affichés dans l'ordre dans lequel vous les avez définis dans le fichier manifeste. Nous vous recommandons de classer les raccourcis d'application par priorité, car le nombre maximal de raccourcis affichés varie selon la plate-forme. Par exemple, Chrome et Edge sous Windows limitent le nombre de raccourcis d'application à 10, tandis que Chrome pour Android n'en affiche que 3. Avant Chrome 92 pour Android 7, la version 4 était autorisée. Chrome 92 a ajouté un raccourci vers les paramètres du site, en utilisant l'un des emplacements de raccourci disponibles pour l'application.
Utiliser des noms de raccourcis d'application distincts
Ne vous fiez pas aux icônes pour différencier les raccourcis d'application, car ils peuvent ne pas toujours être visibles. Par exemple, macOS n'accepte pas les icônes dans le menu des raccourcis de la station d'accueil. Utilisez des noms distincts pour chaque raccourci d'application.
Mesurer l'utilisation des raccourcis d'application
Vous devez annoter les entrées url des raccourcis d'application comme vous le feriez avec start_url à des fins d'analyse (par exemple, url:
"/my-shortcut?utm_source=homescreen").
Prise en charge des navigateurs
Les raccourcis d'applications sont disponibles sur les plates-formes et versions listées ci-dessous.
Prise en charge de l'activité Web fiable
Bubblewrap, l'outil recommandé pour compiler des applications Android qui utilisent l'activité Web sécurisée, lit les raccourcis d'application à partir du fichier manifeste de l'application Web et génère automatiquement la configuration correspondante pour l'application Android. Notez que les icônes des raccourcis d'application sont obligatoires et doivent être d'au moins 96 x 96 pixels avec du papier bulle.
PWABuilder, un excellent outil pour transformer facilement une progressive web app en une activité Web fiable, accepte les raccourcis d'application avec quelques mises en garde.
Les développeurs peuvent intégrer manuellement l'activité Web sécurisée à leur application Android à l'aide de raccourcis d'application Android afin d'implémenter les mêmes comportements.
Échantillon
Consultez l'exemple de raccourcis d'application et sa source.