Progressive Web Apps


Les Progressive Web Apps (PWA) sont des sites web qui possèdent les caractéristiques spécifiques des applications natives et censés améliorer l’expérience utilisateur sur les appareils mobiles. Une Progressive Web App peut, tout comme un site web, être consultée en entrant une URL dans la barre d’adresse du navigateur. À l’aide du protocole HTTPS et des "service workers", la communication entre le client et le serveur, et en particulier la mémoire cache est optimisée de manière à ce que des fonctionnalités hors ligne puissent également être mises à disposition. Les utilisateurs peuvent utiliser les PWA comme des sites web et peuvent également les ajouter à l’écran d’accueil de leur appareil mobile. Les Progressive Web Apps sont par conséquent souvent considérées comme l’association entre une application et un site web responsive : les PWA combinent les avantages de ces deux approches de développement en mettant à disposition les fonctionnalités d’une application et en enregistrant l’utilisation qui en est faite par les utilisateurs.

Informations générales

Les Progressive Web Apps, ou applications web progressives, se fondent sur l’approche de développement de l’amélioration progressive conseillée par Google. Cette idée se base sur le fait que les fonctionnalités fondamentales d’un site Internet doivent être utilisables sur tous types d’appareils et ce, quelle que soit la connexion Internet disponible. Même lorsque les appareils mobiles ne sont pas connectés à Internet et, le cas échéant, ne supportent pas JavaScript, CSS ou Flash, les sites Internet conçus selon le principe de l’amélioration progressive doivent pouvoir satisfaire les besoins en informations des utilisateurs. Contrairement à la dégradation progressive, qui optimise les différentes versions des sites Internet pour des appareils définis, l’amélioration progressive mise sur une version du site web dont les fonctionnalités rudimentaires fonctionnent sans problème sur tous les appareils.

Mode de fonctionnement

Selon Google, les propriétés centrales des Progressive Web Apps sont les suivantes :

  • Fiabilité : les PWA chargent également les contenus demandés lorsque la connexion Internet est mauvaise ou indisponible.
  • Rapidité : les PWA réagissent immédiatement aux interactions utilisateurs, intègrent parfois des animations et évitent un défilement laborieux.
  • Expérience utilisateur : l’utilisation des PWA se présente comme une application native qui aurait été conçue spécialement pour l’appareil en question.

L’élément le plus important pour la mise en place de Progressive Web Apps et pour profiter de leurs avantages sont les "service workers" : ils travaillent en arrière-plan du site web et permettent le chargement de contenus définis dans la mémoire cache sans qu’une nouvelle communication http n’ait lieu. On y parvient à travers un script qui fonctionne comme un serveur proxy sur le site client. Si un utilisateur demande certains contenus, le service worker a d’ores et déjà chargé ces contenus dans la mémoire cache puisque le développeur les a préalablement définis. Des méthodes telles que le pré-rendu, le pré-chargement et la pré-lecture sont alors utilisées.

Lors du développement d’une Progressive Web App, ces ressources-clés sont identifiées puis référencées et pré chargées à l’aide du script. Par conséquent, en fonction des interactions de l’utilisateur, l’application sait déjà quels contenus seront demandés et ne doit donc pas les charger à nouveau à l’aide de la connexion Internet. Ainsi, la dépendance à Internet ou au réseau Internet mobile est réduite efficacement – tout en assurant une expérience utilisateur améliorée et une utilisation habituelle. Le contrôle de la mémoire cache présente également un aspect supplémentaire : le chargement des contenus est effectué beaucoup plus rapidement et les utilisateurs n’ont pas besoin de supporter des temps de chargement élevés. Le flux d’utilisation est ainsi conservé à un niveau élevé – tout en utilisant les ressources réseau de manière économe.

Les Progressive Web Apps peuvent également être utilisées sans recourir à un App Store. Aucune installation n’est nécessaire. Grâce à la référence au Manifeste des applications Web, elles mettent à disposition des fonctionnalités particulières normalement uniquement disponibles sur les applications natives. Les utilisateurs peuvent par exemple ajouter une PWA à leur écran d’accueil d’un simple clic et utiliser le site web comme une application sur leur appareil – y compris en mode plein écran. Avec l’intégration des notifications Push, les Progressive Web Apps peuvent également augmenter les taux d’engagement et par exemple proposer des offres personnalisées ou des informations supplémentaires. Cela est permis par l’utilisation d’un fichier JSON (Manifeste des applications Web), relié au site web au moyen du script. Dans ce script, il est possible de définir l’apparence du site Internet lorsque les utilisateurs consultent celui-ci à partir de leur écran d’accueil. À travers les commandes de script, de nombreuses possibilités de configuration sont disponibles afin de personnaliser les PWA.

Dans la pratique

Pour développer des Progressive Web Apps, il est possible d’utiliser les langages HTML5, CSS3 et JavaScript. À cela s’ajoutent les frameworks comme Angular ou Polymer, grâce auxquels le Manifeste des applications Web, et donc l’apparence peut être transposés en une application. Une « architecture du shell d’application » prend en charge les ressources minimales en HTML5, CSS3 et JavaScript : seuls les éléments indispensables sont inclus dans le code source, de manière à ce que l’interface utilisateur puisse être constituée. Les contenus de l’application Web sont chargés de manière dynamique sur une API. L’intégration adéquate de l’API ou du framework peut être vérifiée à l’aide de Lighthouse afin de détecter les erreurs, les bugs et les recours.

Certes, la plupart des appareils mobiles supportent ces technologies, mais lorsque JavaScript ou Flash est désactivé dans le navigateur, l’approche de développement progressif offre une certaine compatibilité descendante. En effet, les PWA sont en définitive des sites Internet qui s’appuient sur les fonctionnalités d’un navigateur. Dans la pratique cependant, tous les navigateurs ne disposent pas de l’assistance du service worker, ce qui constitue par exemple un inconvénient dans le cas d’iOS : sur iOS, les applications ne fonctionnent pas en version hors ligne, seul Android propose une intégration complète des service workers.

Importance pour l’optimisation du référencement

Les Progressive Web Apps consistent dans une large mesure en JavaScript. Au cours des dernières années, Google n’a cessé de s’améliorer dans le déchiffrage des langues de script et dans le suivi et le référencement de leurs contenus. En ce qui concerne le développement des PWA, cela implique cependant quelques modifications dans le code source du site web. D’une part, il est conseillé de recourir à une bibliothèque ou à un framework tel qu’Angular, Polymer ou React et de respecter les meilleures pratiques en matière de SEO, afin par exemple de contrôler l’exploration (par exemple les "escaped fragments") et le rendu des sites web fondés sur le JavaScript. Si aucun framework n’est utilisé, des ressources particulières doivent être créées le cas échéant.

D’autre part, il est recommandé de livrer les contenus CSS et JS avec l’inline HTML et ce, de manière à ce que les fonctionnalités et les éléments de design de base soient utilisables et disponibles pour le client. Cela augmente non seulement l’utilisation du réseau mais garantit également que les éléments fondamentaux du site soient chargés immédiatement. De toute façon, la mise en place de Progressive Web Apps a pour objectif que les fonctionnalités de base d’un site Internet puissent être utilisées (amélioration progressive). Cela peut faire l’objet d’une attention particulière avant le développement comme "expérience offline first" en supposant que le design du site Internet, son contenu et ses éléments interactifs sont déjà chez l’utilisateur et doivent déjà pouvoir être chargés à l’aide d’API du côté du client.

Liens web

Récupérée de « https://fr.ryte.com/wiki/index.php?title=Progressive_Web_Apps&oldid=3701 »

Category