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’une PWA simple, consultez Prise en main des PWA.
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 Bien démarrer avec les PWA.
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énementbeforeinstallprompt
, case activée le code source de démonstration PWAmp. Pour tester l’installation personnalisée, ouvrez la démonstration PWAmp, puis cliquez sur Plus d’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 un PWA 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 (menus avec appui long ou clic droit).
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 status 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 une PWA.
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 une PWA et Gérer les protocoles dans une PWA.
Widgets
Créez vos propres widgets d’application à afficher dans le tableau de bord des widgets du système d’exploitation, comme le Windows 11 Widgets Board.
Consultez Afficher un widget PWA dans le tableau des widgets Windows.
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 :
- 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.
- Redirigez vers une page hors connexion personnalisée pour les pages qui ne peuvent pas être mises en cache.
- Gérez correctement les tâches de votre application qui ne peuvent pas être utilisées sans accès à Internet.
- Implémentez des scénarios avancés tels que permettre aux utilisateurs de télécharger des données pour les afficher hors connexion.
Voir aussi :
- Synchronisez et mettez à jour une PWA en arrière-plan.
- Utilisation des workers de service dans les guides > de l’API > De service Worker de références web MDN >>.
- API De travail de service sur MDN > référence > des API web.
- FetchEvent sur MDN > référence > l’API Service Worker des > API web.
- Cache at MDN > References > Web API > Service Worker.
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 l’API Web Bluetooth, USB (API WebUSB) 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 l’API Canvas, WebGL : graphiques 2D et 3D pour le web (API WebGL) ou API Audio web.
- Authentification et paiement sécurisés et approuvés avec l’API WebAuthn et l’API de demande de paiement.
- Tâches informatiques non triviales avec WebAssembly.
- Lecture et écriture de fichiers avec l’API 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
ettheme-color
dans le manifeste de votre application web pour personnaliser la fenêtre de l’application. Consultez Manifestes d’application web. - 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 disposition de grille CSS, de la disposition de boîte flexible CSS (flexbox), des requêtes de média CSS 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. Consultez Création d’écrans squelettes avec des propriétés personnalisées CSS.
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 :
- Test entre 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.
Voir aussi
Local : PWA :
- Définir des raccourcis d’application (appuyez longuement ou cliquez avec le bouton droit)
- Affichez un badge sur l’icône de l’application dans Réengager les utilisateurs avec des badges, des notifications et des messages Push.
- Afficher un widget PWA dans le tableau des widgets Windows
- Afficher le contenu dans la zone de la barre de titre à l’aide de la superposition des contrôles de fenêtre
- Bien démarrer avec les PWA
- Gérer des fichiers dans une PWA
- Gérer les liens vers une PWA
- Gérer les protocoles dans une PWA
- Tailles d’image d’icône dansDéfinir des icônes et une couleur de thème.
- Publier une PWA sur le Microsoft Store
- Partager du contenu avec d’autres applications
- Stocker des données sur l’appareil
- Synchroniser et mettre à jour une PWA en arrière-plan
- Test et automatisation dans Microsoft Edge
Local : DevTools :
MDN :
- beforeinstallprompt dans la fenêtre DES API > web références > MDN>.
- Cache at MDN > References > Web API > Service Worker.
- L’API Canvas sur MDN > référence > des API web.
- API du Presse-papiers sur MDN > référence > les API web.
- Contactez l’API sélecteur à l’adresse DES API web références > MDN>.
- Tests entre navigateurs sur MDN > Guides > Tools et test.
- afficher dans les membres manifestes de l’application web Références >> MDN>.
- FetchEvent sur MDN > référence > l’API Service Worker des > API web.
- API de système de fichiers sur LES API web de référence > MDN>.
- Disposition de boîte flexible CSS (flexbox) sur MDN > References > CSS.
- Disposition de grille CSS au niveau de RÉFÉRENCES CSS MDN >> .
- Requêtes de média CSS sur MDN > References > CSS.
- API de demande de paiement sur les API web MDN > REferences > .
- prefers-color-scheme sur MDN > References > CSS >@media.
- Images réactives dans MDN > Guides > HTML > Multimedia and embedding.
- API De travail de service sur MDN > référence > des API web.
- Utilisation des workers de service dans les guides > de l’API > De service Worker de références web MDN >>.
- Manifestes d’application web dans références MDN > .
- L’API Web Bluetooth sur MDN > référence > les API web.
- API NFC web sur MDN > référence > des API web.
- USB at MDN > Référence > API > Web API WebUSB.
- WebAssembly sur MDN.
- API d’audio web sur MDN > référence > des API web.
- WebGL : graphiques 2D et 3D pour le web (API WebGL) sur les API web références > MDN>.
Wikipédia:
GitHub :
Autre: