Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 376

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 398

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 416

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 420

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 447

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 459

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/scienceline/public_html/wp-content/themes/the-rex-child/framework/ReduxFramework/ReduxCore/inc/extensions/customizer/extension_customizer.php on line 478
Les applications Web progressives - Science Line

Les applications Web progressives

41
Partager :

Les applications Web progressives (PWA) sont des sites Web qui possèdent les propriétés spécifiques des applications originelles et, qui sont destinées à améliorer l’expérience utilisateur sur les appareils mobiles. Une application web progressive peut être activée en entrant une URL dans la barre d’adresse du navigateur comme pour un site web. L’utilisation du protocole HTTPS et d’un prestataire de services permet d’optimiser la communication entre le client et le serveur (en particulier le câblage) de telle sorte que des fonctions hors ligne puissent être assurées.

Les utilisateurs peuvent utiliser les PWA comme des sites Web, mais ils peuvent aussi les ajouter à l’écran d’accueil de leur appareil mobile. Les applications web progressives sont donc souvent considérées comme une combinaison d’une application et d’un site web réactif. Les PWA combinent les avantages des 2 approches de développement en fournissant des fonctions d’application que les utilisateurs connaissent bien.

A lire en complément : Rédacteur SEO : faire des économies en travaillant chez soi !

Les applications web progressives sont basées sur l’approche de développement progressif recommandée par Google. L’idée est que les fonctions de base du site web peuvent être utilisées sur n’importe quel appareil et avec n’importe quel type de connexion Internet. Même si les appareils mobiles ne sont pas connectés à Internet et ne supportent pas JavaScript, CSS ou Flash, les sites Web qui s’appuient sur des améliorations progressives peuvent satisfaire les différents besoins d’information des utilisateurs.

Contrairement à la dégradation en douceur, qui optimise les différentes versions de sites Web pour certains appareils, l’amélioration progressive repose sur une version de site Web qui fonctionne parfaitement dans les fonctions rudimentaires sur n’importe quel appareil.

A voir aussi : La popularité des liens

Comment cela fonctionne ?

Les principales caractéristiques des applications Web progressives selon Google sont :

1. La fiabilité : Les PWA chargent le contenu demandé même si la connexion Internet est mauvaise ou inexistante.

2. La vitesse : Les PWA réagissent directement aux interactions des utilisateurs, intègrent parfois des animations et évitent un défilement lent.

3. L’expérience de l’utilisateur : L’utilisation des PWA ressemble à une application native conçue pour le périphérique utilisé.

L’élément le plus important pour implémenter des applications web progressives et en tirer profit étant le personnel de service. Il fonctionne en arrière-plan du site web et permet le chargement de certains contenus dans le cache sans qu’une nouvelle communication HTTP n’ait à avoir lieu. Ceci est réalisé par un script qui fonctionne du côté client comme serveur proxy.

Si un utilisateur demande un certain contenu, le préposé au service a déjà chargé ce contenu dans le cache parce que le développeur l’a défini au préalable. Lors du développement d’une application web progressive, les ressources clés sont identifiées, référencées et préchargées à l’aide du script. Selon l’interaction de l’utilisateur, l’application sait déjà quel contenu est demandé et n’a pas besoin de le recharger via la connexion Internet. Ainsi, la dépendance à l’Internet ou à l’Internet mobile est effectivement réduite grâce à l’amélioration de l’expérience utilisateur pour une utilisation régulière.

Le contrôle de la mise en cache comporte un autre aspect. Le chargement du contenu est beaucoup plus rapide et les utilisateurs n’ont pas à supporter des temps de chargement élevés. Le flux d’utilisation est ainsi maintenu à un haut niveau de qualité et avec une utilisation prudente des ressources réseau.

Les applications web progressives peuvent également être utilisées sans accès à un app store. Aucune installation n’est nécessaire. Grâce au Web App Manifest, ils offrent des fonctionnalités spéciales qui ne sont autrement disponibles que dans les applications natives. Les utilisateurs peuvent, par exemple, ajouter une PWA à leur écran d’accueil en un clic et utiliser le site comme une application sur leur appareil, même en mode plein écran.

Avec l’intégration des messages push, les applications web progressives peuvent également augmenter le taux d’engagement et proposer des offres personnalisées ou fournir des informations complémentaires, par exemple. Ceci est rendu possible par un fichier JSON (Web App Manifest), qui est connecté au site web par script. Dans ce script, l’apparence du site web peut être définie lorsque les utilisateurs accèdent au site web via leur écran d’accueil.

De nombreuses options de paramétrage sont disponibles pour personnaliser la PWA par le biais de la personnalisation des instructions de script.

La pertinence de la pratique

HTML5, CSS3, et JavaScript peuvent être utilisés pour développer des applications web progressives. Des frameworks angular ou polymer qui implémentent le manifeste de l’application web et donc l’apparence d’une application, peuvent être ajoutés. Une application architecture shell assure des ressources minimales en HTML5, CSS3 et JavaScript.

Seul l’essentiel se trouve dans le code source, de sorte que l’interface utilisateur peut être créée. Le contenu de l’application web est chargé dynamiquement via une API. Lighthouse permet de vérifier l’intégration correcte de l’API ou du framework pour détecter les erreurs, les bugs et les régressions.

Bien que la plupart des appareils mobiles supportent ces technologies, l’approche de développement progressif offre un certain degré de rétrocompatibilité. Après tout, les PWA sont des sites Web basés sur les fonctions d’un navigateur. Dans la pratique, cependant, tous les navigateurs ne prennent pas en charge les employés des services, ce qui est un inconvénient pour iOS, par exemple. Dans iOS, les applications ne fonctionnent pas dans la version hors ligne, seul Android offre une intégration complète des travailleurs de service.

La pertinence pour l’optimisation des moteurs de recherche

Les applications Web progressives se composent en grande partie de JavaScript. Au cours des dernières années, Google est devenu de plus en plus doué pour lire les langages de script, suivre et référencer leur contenu. Cependant, pour le développement des PWA, cela signifie quelques changements dans le code source du site web.

D’une part, il est recommandé d’utiliser une bibliothèque ou un framework comme Angular, Polymer ou React et de suivre les meilleures pratiques SEO respectives pour contrôler le crawling (par exemple, “les fragments échappés”) et le rendu des sites lourds en JavaScript. Si un framework n’est pas utilisé, certaines ressources doivent être pré-rendues.

D’autre part, il est recommandé de fournir au CSS et au JS le HTML en ligne de telle sorte que les fonctions de base et les éléments de conception soient utilisables et disponibles pour le client. Cela augmente l’utilisation du réseau, mais assure également que les éléments les plus importants d’un site Web sont chargés directement.

Dans tous les cas, l’implémentation d’applications web progressives vise à rendre disponibles les fonctionnalités de base du site (amélioration progressive). Ceci peut être pris en compte avant le développement en tant que “première expérience hors ligne”, en supposant que le design du site web, son contenu et ses éléments d’interaction soient déjà accessibles sur le dispositif utilisateur et doivent être chargés du côté client au moyen d’une API.

Partager :