Premières étapes
Les progressive web apps sont toujours des sites Web dotés de fonctionnalités avancées. Ils ne sont liés à aucune pile technologique spécifique, et vous pouvez partir de zéro avec un nouveau site ou le mettre à jour sans avoir à le remanier complètement. Dans ce guide, vous allez apprendre à créer une bonne implémentation du modèle de PWA. Voici quelques stratégies pour vous lancer:
Permettre l'installation
Commencez petit ! Cette approche implique de commencer par un fichier manifeste de base, une simple page hors connexion, puis un service worker pour diffuser la page hors connexion et mettre en cache certains éléments CSS et JavaScript essentiels. Grâce à la mise en cache essentielle des codes CSS et JavaScript, vous pourrez faire fonctionner votre application Web existante hors connexion tout en améliorant ses performances.
Se concentrer sur une fonctionnalité
Choisissez une nouvelle fonctionnalité, comme les notifications push ou la gestion des fichiers, qui aura un impact significatif sur vos utilisateurs ou votre entreprise. Cela vous permettra de plonger au cœur du pool de PWA sans avoir à effectuer trop de changements à la fois.
Créer une version simple
Prenez une section existante de votre application ou un parcours utilisateur spécifique, comme la lecture d'une vidéo ou l'accès à une carte d'embarquement, et configurez-la de façon verticale comme une PWA hors connexion, qu'elle soit autonome ou en contexte. Cela vous permet d'effectuer un test peu encombrant et de repenser l'expérience proposée à vos utilisateurs avec les PWA.
Partez de zéro
Si vous envisagez de remanier votre site Web ou si vous pouvez partir de zéro, cette stratégie est tout à fait logique. Elle vous permet d'intégrer plus facilement des modèles de conception de PWA que d'autres stratégies, en particulier pour tirer parti de toute la puissance des service workers dès le départ.
Mettre à niveau une application de la plate-forme de téléchargement d'applications
Si vous pouvez publier une PWA sur des plates-formes de téléchargement d'applications, vous pouvez l'encapsuler dans un lanceur de PWA et l'importer dans des plates-formes de téléchargement telles que le Play Store de Google ou le Windows Store. Si vous disposez déjà d'une application spécifique à une plate-forme, vous pouvez la remplacer par la PWA publiée sur la plate-forme de téléchargement d'applications.
Avec cette approche, vos utilisateurs existants peuvent passer à la PWA, et les nouveaux utilisateurs peuvent toujours utiliser ou installer votre PWA depuis leur navigateur ou les plates-formes de téléchargement d'applications. De plus, vous disposerez d'une application pour tous les utilisateurs, ce qui vous permettra de réduire vos coûts, de gagner du temps et d'améliorer l'expérience utilisateur.
Checklist des PWA
Une progressive web app est un site Web, ce qui mène à la question suivante: quand devient-elle une progressive web app ? La réponse n'est pas si simple, car le concept des PWA ne fait pas référence à une technologie ou à une pile spécifique. Il s'agit plutôt d'un modèle comprenant divers composants techniques.
Bien qu'il n'existe pas de règles uniques pour tous les navigateurs, il existe un ensemble de recommandations, appelées Checklist pour les progressive web apps, pour vous aider à créer une PWA que les utilisateurs apprécieront.
Principales exigences
Étant donné que les PWA couvrent tous les appareils, du mobile à l'ordinateur, la checklist principale des progressive web apps porte sur ce que vous devez faire pour rendre votre application installable et fiable pour tous les utilisateurs, quels que soient la taille de l'écran ou le type d'entrée.
Les principales exigences sont les suivantes:
Une vitesse constante dès le démarrage
Les performances jouent un rôle important dans la réussite de toute expérience en ligne, car les sites très performants attirent et retiennent mieux les internautes que les sites peu performants. L'objectif des sites est d'optimiser les métriques de performances axées sur l'utilisateur.
Compatible avec tous les navigateurs
Les progressive web apps sont des applications Web en premier, ce qui signifie qu'elles doivent fonctionner avec plusieurs navigateurs, et pas uniquement dans l'un d'entre eux. Toutefois, l'expérience n'a pas besoin d'être identique dans tous les navigateurs. Certaines fonctionnalités ne sont pas compatibles avec un seul navigateur. Une solution de remplacement est alors proposée pour garantir une bonne expérience.
Réactive à toutes les tailles d'écran
Les utilisateurs peuvent se servir de votre PWA sur n'importe quelle taille d'écran, et l'intégralité du contenu est disponible, quelle que soit la taille de la fenêtre d'affichage.
Fournit une page hors connexion personnalisée
Lorsque les utilisateurs sont hors connexion, les garder dans votre PWA offre une expérience plus fluide et native que de revenir à la page hors connexion du navigateur par défaut.
Installation possible
Les utilisateurs qui installent ou ajoutent des applications à leur écran d'accueil ont tendance à interagir davantage avec ces applications. Lorsque la PWA est installée, elle peut exploiter davantage de fonctionnalités pour améliorer l'expérience utilisateur.
Caractéristiques optimales des PWA
Pour créer une progressive web app vraiment efficace, qui ressemble à la meilleure application de sa catégorie, il ne suffit pas de suivre la checklist de base. La checklist optimale pour les progressive web apps a pour but de faire en sorte que votre PWA soit fiable et performante, tout en exploitant les atouts du Web.
Offre une expérience hors connexion
En permettant aux utilisateurs d'utiliser votre PWA en mode hors connexion, vous leur proposerez une expérience semblable à celle d'une application. Pour ce faire, identifiez les fonctionnalités qui ne nécessitent pas de connectivité, afin que les utilisateurs puissent accéder à au moins certaines d'entre elles.
Est entièrement accessible
Assurez-vous que les lecteurs d'écran peuvent comprendre l'ensemble du contenu et des interactions dans l'application, qu'ils peuvent être utilisés avec un simple clavier, que la mise au point est indiquée et que le contraste des couleurs est important. En rendant votre PWA accessible, vous vous assurez qu'elle peut être utilisée par tous.
Utilise des fonctionnalités puissantes lorsqu'elles sont disponibles
Messagerie push, WASM et WebGL, accès au système de fichiers, sélecteurs de contacts et intégration aux plates-formes de téléchargement d'applications. Les outils permettant de créer des PWA hautement performantes et profondément intégrées sont disponibles. Vous pouvez ainsi créer une expérience utilisateur complète, auparavant réservée aux applications de plate-forme, que vos utilisateurs peuvent emporter partout avec eux.
Est visible via la recherche
Plus de la moitié du trafic vers votre site Web provient de la recherche naturelle. Pour que les utilisateurs trouvent votre PWA, il est essentiel de vous assurer que les URL canoniques existent pour le contenu et que les moteurs de recherche peuvent indexer votre site.
Compatible avec tous les types d'entrées
Les utilisateurs doivent pouvoir passer d'un type d'entrée à un autre lorsqu'ils se servent de votre application de façon fluide. De plus, les modes de saisie ne doivent pas dépendre de la taille de l'écran.
Fournit le contexte des demandes d'autorisation
Ne déclenchez des invites pour les autorisations telles que les notifications, la géolocalisation et les identifiants, après avoir fourni une justification contextuelle pour augmenter les chances que l'utilisateur accepte les invites.
Suit les bonnes pratiques pour un code opérationnel
En maintenant votre application à jour et votre codebase opérationnel, vous pouvez proposer plus facilement de nouvelles fonctionnalités qui répondent aux autres objectifs définis dans cette checklist.