Meilleures pratiques pour les PWA

Cet article répertorie les meilleures pratiques pour faire de votre PWA une application idéale pour vos utilisateurs. Lorsque les utilisateurs installent des applications, ils ont certaines attentes quant à ce que ces applications peuvent faire, comme travailler hors connexion, s’intégrer profondément au système d’exploitation ou effectuer des tâches informatiques non triviales.

Lisez les bonnes pratiques sur cette page pour apprendre à donner à votre PWA un aspect semblable à ce que les utilisateurs attendent.

Cette page suppose que vous disposez déjà d’une PWA. Pour en savoir plus sur la création d’un PWA simple, consultez Prise en main de Progressive Web Apps.

Fournir une installation personnalisée

Votre application peut déjà être installée à l’aide du bouton Application disponible dans la barre d’adresse du navigateur si vous suivez les étapes décrites dans Prise en main de Progressive Web Apps.

Une expérience d’installation personnalisée, dans l’interface utilisateur de l’application, peut être plus évidente pour vos utilisateurs et entraîner davantage d’installations.

Pour créer une expérience d’installation personnalisée, utilisez l’événement beforeinstallprompt et fournissez votre propre bouton d’installation dans votre application.

Pour voir un exemple de code de l’événement beforeinstallprompt , vérifiez le code source de l’application de démonstration PWAmp. Pour tester l’installation personnalisée, ouvrez PWAmp, puis cliquez sur Autres outils (...) >À propos de>l’application Installer dans l’application.

Envoyer aux magasins d’applications

De nombreux utilisateurs recherchent votre application dans l’App Store de leur appareil. Le téléchargement à partir d’un App Store officiel offre une expérience digne de confiance et familière à vos utilisateurs.

Vous pouvez publier votre PWA sur le Microsoft Store pour Windows, l’App Store pour iOS ou le Play Store pour Android à l’aide de PWA Builder.

Pour savoir comment utiliser PWA Builder et publier sur le Microsoft Store, consultez Publier une application web progressive sur le Microsoft Store.

Icône Créer une application géniale

De nombreux utilisateurs trouvent des applications sur leurs appareils par leurs icônes. Pour aider les utilisateurs à trouver votre application plus facilement, choisissez une icône reconnaissable, assurez-vous qu’elle se démarque et assurez-vous qu’elle s’adapte aux appareils sur lesquels votre application est installée.

Sur Windows, l’icône de votre application apparaît à de nombreux endroits, tels que la barre des tâches, le menu Démarrer ou le sélecteur de tâches Alt+Tab . Fournissez plusieurs tailles d’image pour vous assurer que l’icône de votre application est facilement reconnaissable à ces endroits.

Pour savoir quelle taille d’image est nécessaire sur Windows, consultez Tailles d’image d’icône dansDéfinir des icônes et une couleur de thème.

Utiliser une fenêtre d’application autonome

Les applications natives ont leurs propres fenêtres dédiées. Les PWA peuvent définir leur mode d’affichage dans le système d’exploitation hôte.

Pour afficher votre PWA dans une fenêtre autonome sans interface utilisateur de navigation dans le navigateur, utilisez le membre d’affichage dans le fichier manifeste de votre application web et définissez-le sur standalone.

Si votre application comporte plusieurs pages HTML, assurez-vous que les utilisateurs peuvent parcourir les pages à l’aide de boutons ou de liens au sein de votre application. Utilisez la minimal-ui valeur du membre manifeste display pour permettre aux utilisateurs d’aller entre les pages à l’aide des boutons précédent et suivant affichés par le navigateur dans la barre de titre de votre application.

Pour créer une expérience plus immersive et native, les PWA de bureau peuvent également choisir de masquer la barre de titre du système d’exploitation par défaut et d’afficher leur propre contenu à la place. L’affichage du contenu où se trouve normalement la barre de titre peut aider les PWA à se sentir plus comme des applications natives. De nombreuses applications de bureau, telles que Visual Studio Code, Microsoft Teams et Microsoft Edge, le font déjà.

Pour remplacer la barre de titre, consultez Afficher le contenu dans la zone de barre de titre à l’aide de la superposition des contrôles de fenêtre.

Intégrer dans le système d’exploitation

Les utilisateurs s’attendent à ce que les applications installées s’intègrent au système d’exploitation hôte d’une certaine manière.

Votre application peut fournir une expérience plus familière, attrayante et transparente en utilisant des fonctionnalités d’intégration de système d’exploitation telles que les raccourcis, le partage entre les applications, les badging, la gestion de fichiers ou la gestion des liens.

Raccourcis

Les raccourcis permettent de définir des liens directs vers les fonctionnalités de votre application en cliquant avec le bouton droit sur l’icône de l’application.

Consultez Définir des raccourcis d’application.

Partage d’application

Les PWA peuvent partager du contenu avec d’autres applications et recevoir du contenu d’autres applications via la boîte de dialogue de partage du système d’exploitation.

Consultez Partager du contenu avec d’autres applications.

Badges d’icône

Les PWA peuvent afficher des badges d’état sur leurs icônes d’application pour alerter les utilisateurs de la présence d’un nouveau contenu dans l’application.

Consultez Afficher un badge sur l’icône de l’application dans Réengager les utilisateurs avec des badges, des notifications et des messages Push.

Gestion des fichiers

Vous pouvez inscrire votre PWA en tant que gestionnaire de fichiers pour certains types de fichiers.

Utilisez la fonctionnalité de gestionnaire de fichiers PWA pour lancer automatiquement votre application lorsque certains fichiers sont ouverts par l’utilisateur dans le système d’exploitation.

Consultez Gérer des fichiers dans Progressive Web Apps.

Gestion des liaisons et des protocoles

L’inscription de votre application est un gestionnaire de liens ou de protocoles permettant de lancer automatiquement votre application lorsque certains liens sont utilisés dans d’autres applications.

Consultez Gérer les liens vers votre application web progressive et Gérer les protocoles dans les applications web progressives.

Widgets

Créez vos propres widgets d’application à afficher dans le tableau de bord des widgets du système d’exploitation, comme le tableau de bord des widgets Windows 11.

Consultez Générer des widgets pilotés par PWA.

Prendre en charge les scénarios hors connexion

Lorsqu’elles sont connectées à un réseau lent ou non fiable, ou même sans accès à Internet, les applications installées peuvent généralement toujours être ouvertes et utilisées. Les utilisateurs des applications installées s’attendent à ce qu’ils continuent à travailler dans ces conditions. Ils s’attendent également à ce que les parties dépendantes du réseau d’une application gèrent correctement l’absence de connexion avec un message personnalisé et des fonctionnalités de mise en cache locale.

Pour améliorer la rétention, ajoutez un worker de service à votre PWA. Vous pouvez utiliser les API et Cache les API du worker de Fetch service, ainsi que l’accès au stockage de données local, pour fournir une bonne expérience hors connexion à vos utilisateurs.

Vous pouvez fournir une bonne expérience hors connexion en plusieurs étapes :

1. Mettez en cache toutes les ressources statiques dont votre application a besoin pour démarrer, afficher du contenu et permettre aux utilisateurs d’effectuer les tâches les plus courantes.
2. Redirigez vers une page hors connexion personnalisée pour les pages qui ne peuvent pas être mises en cache.
3. Gérez correctement les tâches de votre application qui ne peuvent pas être utilisées sans accès à Internet.
4. Implémentez des scénarios avancés tels que permettre aux utilisateurs de télécharger des données pour les afficher hors connexion.

Pour plus d’informations, consultez Utiliser un worker de service pour gérer les demandes réseau.

Stocker les données localement

Pour offrir une expérience riche et rapide à vos utilisateurs, utilisez les différentes options de stockage de données persistantes disponibles pour les PWA, telles que :

• Stockage de cache pour stocker les ressources statiques de votre application.
• Stockage local et de session, pour stocker de petites quantités de données utilisateur.
• IndexedDB, pour stocker des données utilisateur plus volumineuses et structurées.
• API d’accès au système de fichiers pour stocker des fichiers sur disque.

Pour plus d’informations, consultez Stocker des données sur l’appareil.

Utiliser des fonctionnalités avancées

Les applications installées effectuent généralement des scénarios informatiques avancés que les sites web ne prennent généralement pas en charge.

Pour fournir une expérience semblable à une application, utilisez des fonctionnalités web avancées telles que :

• Accès matériel avec les API Web Bluetooth, Web USB ou Web NFC .
• Accès au Presse-papiers avec l’API Presse-papiers.
• Intégration des contacts de l’appareil à l’API du sélecteur de contacts.
• Interactions multimédias enrichies avec les API Canvas, WebGL ou WebAudio .
• Authentification et paiement sécurisés et approuvés avec WebAuthn et les API de demande de paiement .
• Tâches informatiques non triviales avec WebAssembly.
• Lecture et écriture de fichiers avec l’API d’accès au système de fichiers.

Vérifiez que les tâches les plus importantes de votre application peuvent être effectuées sur tous les navigateurs et tous les appareils. Consultez Tester sur plusieurs navigateurs et appareils.

Faites en sorte que votre application ressemble à une application réelle

Les utilisateurs installent des applications sur leurs appareils pour accomplir des tâches spécifiques, et ils ont certaines attentes quant à la façon dont ces tâches sont présentées dans l’interface utilisateur et à leur intégration dans le système d’exploitation hôte.

Pour permettre à vos utilisateurs d’accomplir les tâches les plus importantes de votre application facilement et de manière familière, faites des choix de conception tels que :

• N’utilisez pas de zone d’en-tête volumineuse comme le font les sites web pour la navigation vers d’autres pages. Utilisez plutôt une métaphore de menu.
• N’utilisez pas un grand pied de page comme le font les sites web pour plus de liens et d’informations.
• Utilisez la system-ui police pour que votre contenu soit plus natif et qu’il se charge plus rapidement.
• Utilisez moins de liens et préférez des cibles plus grandes.
• Prenez en charge les thèmes clairs et sombres du système d’exploitation à l’aide de la fonctionnalité de média CSS prefers-color-scheme .
• Fournissez un background-color et theme-color dans le manifeste de votre application web pour personnaliser la fenêtre de l’application.
• Concentrez-vous sur les tâches les plus importantes, désencombrez le contenu et rationalisez l’interface utilisateur.
• Ré organisez l’interface utilisateur en fonction du facteur de forme de l’appareil, à l’aide de la grille CSS, de Flexbox, des requêtes multimédias et des images réactives.
• Améliorez les performances perçues en inscrivant immédiatement les interactions utilisateur.
• Envisagez d’utiliser des écrans squelettes si le rendu de l’écran suivant prend du temps.

Tester sur plusieurs navigateurs et appareils

Avec Progressive Web Apps, vous fournissez une application pour tous les appareils, à partir d’un code base. Pour vous assurer que votre application fonctionne partout, testez-la sur plusieurs navigateurs, systèmes d’exploitation et appareils.

Assurez-vous que les scénarios les plus importants de votre application fonctionnent partout et améliorez progressivement l’expérience sur les appareils pris en charge.

Pour tester votre application dans plusieurs environnements, envisagez les techniques suivantes :

• Tests inter-navigateurs.
• Émulez et testez d’autres navigateurs à partir de Microsoft Edge à l’aide de DevTools.
• Créez une session de débogage à distance sur Windows ou Android.
• Test et automatisation dans Microsoft Edge pour automatiser vos tests.
• Test sur des machines virtuelles.

Prise en charge de la liaison approfondie

Pour améliorer la découverte et le partage de votre application via le web et les réseaux sociaux, acheminez chaque page de votre application vers une URL unique et prenez en charge la liaison approfondie.