Pourquoi les applications Web progressives sont l'avenir du développement Web

«La clé est d'accepter les perturbations et le changement tôt. Ne réagissez pas des décennies plus tard. Vous ne pouvez pas lutter contre l'innovation. » - Ryan Kavanaugh

Dernièrement, il y a eu beaucoup de buzz autour des PWA, beaucoup prétendant qu'il s'agissait de l'avenir du développement Web, en particulier en termes d'appareils mobiles. À la base, une application Web progressive (PWA) est simplement une application Web qui utilise des techniques Web modernes pour offrir aux utilisateurs une expérience de type application native. Ce sont des applications Web avec une amélioration progressive pour implémenter des fonctionnalités telles que la mise en cache, la synchronisation en arrière-plan et les notifications push.

Même si les PWA existent depuis plus de deux ans maintenant, la réponse est assez décevante. Peu de grands joueurs ont adopté cette philosophie, mais la plupart ne l'ont pas vraiment adopté. Chrome et Mozilla sont peut-être les meilleurs navigateurs pour tester vos PWA, car Apple n'est pas encore entré dans ce domaine.

PWA - Est-ce vraiment bien?

D'une part, nous avons des applications natives qui sont sans aucun doute rapides et efficaces dans la plupart des cas. D'un autre côté, il y a des sites Web qui sont un peu lents et avec les problèmes de connectivité, cela ne fait qu'empirer.

Le projet AMP (Accelerated Mobile Pages Project) dirigé par Twitter et Google a été lancé en 2016 pour résoudre ces problèmes de connexion lente uniquement. Les PWA fonctionnent parfaitement dans tous les scénarios possibles. Avec une bonne connexion, il n'y a jamais de problème. Le problème est que nous n'avons pas de connexion et que nous sommes accueillis par la page d'erreur.

Mais cela peut devenir très ennuyeux si nous avons une connexion lente. La page semble se charger et tout ce que nous voyons est un écran vide. Nous attendons, attendons et attendons mais la page ne semble jamais se charger. C'est là que PWA vient à notre secours. La meilleure partie des PWA - vous obtenez la meilleure expérience utilisateur possible en connectivité lente ainsi qu'en absence de connectivité (oui, vous avez bien lu ..).

Pourquoi il est logique d'utiliser PWA

Selon une étude, un utilisateur moyen passe 80% de son temps total sur des applications sur seulement trois de ses applications (pour moi, c'est Chrome, Quora et Medium).

Les autres applications restent inactives pendant la majeure partie de ce temps, consommant une partie précieuse de la mémoire. De plus, il en coûte environ dix fois le développement d'une application plutôt que la création d'un site Web pour la même chose. Le coût peut devenir beaucoup plus élevé si vous prévoyez de développer et de maintenir des bases de code distinctes pour différentes plates-formes telles qu'Android, iOS et le Web.

Fonctionnalités de l'application native que les PWA peuvent utiliser

  • Notifications push
  • Plein écran
  • Travail hors ligne
  • L'écran de démarrage est pris en charge, ce qui lui donne une sensation plus d'application

Les PWA peuvent utiliser de nombreuses autres fonctionnalités de ce type. Les points ci-dessus ne sont que pour vous donner un aperçu de ce dont les PWA sont capables. Cependant, il existe certaines fonctionnalités traditionnelles dont seules les applications natives bénéficient pour le moment.

Fonctionnalités de l'application native que les PWA ne peuvent pas utiliser pour le moment

  • Accès inexistant ou très restrictif à différents capteurs matériels
  • Alarmes
  • Accès au répertoire
  • Modification des paramètres système

Les PWA évoluent assez rapidement et nous pouvons espérer voir ces fonctionnalités entrer en action très bientôt.

Deux composants majeurs d'une PWA

Manifeste d'application

C'est un fichier JSON qui définit une icône d'application, comment lancer l'application (autonome, plein écran, dans le navigateur, etc.) et toutes les informations connexes. Il est situé à la racine de votre application. Un lien vers ce fichier est requis sur chaque page qui doit être rendue.

Il est ajouté dans la section head de la page HTML:

Service Worker

Service worker is where most of the magic of happens. Its nothing but JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure.

Its worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

How do I get started?

The best thing about getting started is that it’s quite easier than it seems. In fact, it’s very much possible to take an existing site and convert into a PWA. I highly suggest you watch this if you intend to develop a PWA.

Thanks for reading! If you liked it, please support by clapping and sharing the post.

Original text