Accomplissez des tâches rapidement grâce aux raccourcis d'application

Les raccourcis d'application permettent d'accéder rapidement à quelques actions courantes dont les utilisateurs ont souvent besoin.

François Beaufort

Jungkee Song

Pour améliorer l'expérience la productivité et faciliter le réengagement avec les tâches clés, la plate-forme Web prend désormais en charge les raccourcis d'application. Ils permettent aux développeurs Web de fournir un accès rapide à quelques actions courantes que les utilisateurs ont fréquemment besoin.

Cet article explique comment définir les raccourcis d'application. En outre, vous découvrirez quelques bonnes pratiques associées.

À propos des raccourcis d'application

Les raccourcis d'applications aident les utilisateurs à démarrer rapidement des tâches courantes ou recommandées dans votre de votre application Web. Un accès facile à ces tâches depuis n'importe où améliorer l'expérience des utilisateurs leur productivité tout en augmentant leur engagement sur le Web l'application.

Pour appeler le menu des raccourcis de l'application, effectuez un clic droit sur l'icône de l'application dans la barre des tâches. (Windows) ou sur la station d'accueil (macOS) sur le bureau de l'utilisateur, ou appuyez sur "&" qui maintient le l'icône de lanceur d'applications sur Android.

<ph type="x-smartling-placeholder">

</ph>

. <ph type="x-smartling-placeholder">

</ph>

.

Le menu des raccourcis de l'application ne s'affiche que pour les progressive web apps qui sont installé sur l'ordinateur ou l'appareil mobile de l'utilisateur. Consultez la section Installation. dans notre guide "Learn PWA", pour en savoir plus sur les exigences en matière d'installabilité.

Chaque raccourci d'application exprime une intention de l'utilisateur, chacune étant associée à un dans le champ d'application de votre application Web. L'URL s'ouvre lorsqu'un utilisateur active le raccourci de l'application. Voici quelques exemples de raccourcis d'application:

• Éléments de navigation de premier niveau (par exemple, 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 (par exemple, démarrer une discussion avec vos contacts les plus populaires)

Définir des raccourcis d'application dans le fichier manifeste d'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 installé sur l'ordinateur ou l'appareil mobile de l'utilisateur. Plus précisément, il s'agit déclaré dans le membre de tableau shortcuts. Vous trouverez ci-dessous 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 contenant au moins un name et url. Les autres membres sont facultatifs.

name

Libellé lisible du raccourci d'application lorsque visibles par l'utilisateur.

short_name (facultatif)

Libellé lisible lorsque l'espace est limité. Il est recommandé que vous lui fournissez, (facultatif).

description (facultatif)

Objectif lisible par l'humain du raccourci d'application. Il n'est pas utilisé au moment de la rédaction, mais peut être exposé à des technologies d'assistance à l'avenir.

url

URL ouverte lorsqu'un utilisateur active l'application raccourci. Cette URL doit être incluse dans le champ d'application du fichier manifeste de l'application Web. Si c'est le cas une URL relative, l'URL de base est l'URL du fichier manifeste de l'application Web.

icons (facultatif)

Tableau d'objets de ressources d'image. Chaque objet doit incluez src et une propriété sizes. Contrairement aux icônes de fichiers manifestes d'application Web, type de l'image est facultatif. Les fichiers SVG ne sont pas acceptés au moment de la rédaction. Utilisez le format PNG à la place.

Si vous souhaitez des icônes au pixel près, fournissez-les par incréments de 48 dp (par exemple, 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192 pixels). Sinon, il est recommandé une seule icône de 192 x 192 pixels.

Pour évaluer la qualité, les icônes doivent avoir au moins la moitié de la taille idéale de l'appareil Android, soit 48 dp. Par exemple, pour afficher sur un écran xxhdpi, l'icône doit mesurer au moins 72 x 72 pixels. (Cette valeur est tirée de la fonction formule permettant de convertir les unités de dp des unités de pixels.)

Tester vos raccourcis d'application

Pour vérifier que vos raccourcis d'application sont correctement configurés, utilisez le volet Manifest (Fichier manifeste) dans panneau Application des outils de développement.

</ph>

Ce volet fournit une version lisible d'un grand nombre de vos fichiers manifestes propriétés, y compris les raccourcis d'application. Cela vous permet de vérifier facilement les icônes de raccourci, le cas échéant, 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 d'applications Web sont limitées à une fois par jour. En savoir plus sur comment Chrome gère les mises à jour du fichier manifeste de l'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 encourageons à classer les raccourcis d'application par priorité, car la limite sur le nombre de raccourcis d'application affichés varie selon la plate-forme. Chrome et Edge activés Windows, par exemple, limitent le nombre de raccourcis d'application à 10 tandis que Chrome pour Android uniquement 3. Avant Chrome 92 pour Android 7, quatre étaient autorisés. Chrome 92 a ajouté un raccourci aux paramètres du site, prenant l'un des raccourcis disponibles emplacements pour l'application.

Utiliser des noms de raccourci d'application distincts

Vous ne devez pas vous appuyer sur les icônes pour différencier les raccourcis d'application, car il est possible toujours être visibles. Par exemple, macOS n'accepte pas les icônes du Dock. menu des raccourcis. Attribuez un nom différent à 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'application sont disponibles pour les plates-formes et versions listées ci-dessous.

</ph>

Assistance pour les activités Web fiables

Bubblewrap, l'outil recommandé pour créer des applications Android qui utilisent Trusted Web Activité, lit les raccourcis d'application à partir du fichier manifeste de l'application Web et automatiquement génère la configuration correspondante pour l'application Android. Notez que les icônes pour les raccourcis d'application sont obligatoires et doivent mesurer au moins 96 x 96 pixels Papier bulle.

PWABuilder : un outil formidable pour transformer facilement une progressive web app en un programme Le paramètre "Activité sur le Web" prend en charge les raccourcis d'application, avec quelques mises en garde.

Pour les développeurs qui intègrent manuellement l'activité Web fiable dans leur application Android les raccourcis vers l'application Android, qui permettent comportements.

Échantillon

Consultez l'exemple de raccourcis d'application et sa source.

Liens utiles

• MDN
• Spécification
• Exemple de raccourcis d'application | Exemple de source de raccourcis d'application
• Composant Blink: UI>Browser>WebAppInstalls