Les Progressive Web Apps

 

Les Progressive Web Apps

 

Tables des matières

Résumé 

Introduction 

Qu’est-ce qu’une Progressive WEB App ? 

Une solution pour une interface mobile claire, rapide et interactive 

Ecueils 

Analyse de Google sur les PWA 

Etude de cas : création d’une PWA 

Etape 1 : Service Workers 

Etape 2 : Manifest JSON 

Etape 3 : LightHouse 

Conclusion 

Références 

 

Résumé

 

A progressive web app (PWA) can be defined by simplification as a form of mobile application (or mobile website) that can be accessed directly from a mobile browser through HTML5 and that can, after authorization, use as an application the features of the smartphone (notification geolocation, etc.).

A progressive web app can be seen as a hybrid application lying between the mobile application and the mobile website.

A PWA will load new content and new application content as and connections to the use of the term "progressive". It can also offer to install a direct access icon like those of mobile applications and offer push notifications.

Moreover, it seems that after Google, all major players in IT as Mircosoft or Apple have decided to promote the growth of PWA.

Through this article, we will attempt to describe in general terms what a PWA is, develop its operating principle, highlight its strengths and limitations, and present a concrete case.

 

Introduction

La façon dont nous accédons à Internet a changé. Avec la croissance des smartphones et des appareils mobiles, des millions de personnes du monde entier utilisent Internet pour la première fois sur un appareil mobile.

Développer/maintenir un site internet et une application mobile prend du temps et coute cher.

Multiplier les supports pour un seul et même service apparait pour les entreprises comme étant un problème à résoudre.

Les PWA pourrait en être une réponse adéquate.

A travers cet article, nous allons tenter de décrire de manière générale ce qu'est une PWA, en livrer son principe de fonctionnement, en faire ressortir ses atouts et ses limites, puis en présenter un cas concret au travers de son processus de création.

 

Qu’est-ce qu’une Progressive WEB App 

Google est à l’origine de cette initiative, et les premières Progressive Web Apps n’étaient disponibles que sur Chrome, toutes plates-formes confondues.

 

Une Progressive Web App, appelée souvent PWA, est une méthode pour créer des applications web natives pour les périphériques mobiles.

L’objectif est de pouvoir fournir à l’utilisateur le même contenu et les mêmes fonctionnalités qu’une application mobile (que l’on téléchargerait sur l’App Store ou sur Google Play) et les mêmes contenus qu’un site, sans pour autant devoir les installer sur son appareil mobile et en ayant un temps de chargement le plus réduit possible.

Pour mieux comprendre ce dont il s’agit, il faut d’abord comprendre ce qui les oppose au marché traditionnel : les sites web d’une part, et les applications mobiles d’autre part.

Les sites web traditionnels

Les sites web sont la solution la plus utilisée pour présenter une entreprise, une marque ou encore une association sur le Web. Les sites font ainsi appel depuis des années à des technologies communes que sont l’HTML, le CSS et le JS.

La problématique des sites web est de les rendre compatibles sur tous les supports et navigateurs, et notamment en étant adaptés aux périphériques mobiles grâce au responsive design et à un temps de chargement que l’on essaie constamment d’optimiser.

Les applications mobiles

A l’inverse, les applications mobiles sont souvent plus réactives car développées sur mesure et stockées sur le téléphone de l’utilisateur. On peut même envoyer des notifications et accéder à des fonctionnalités plus poussées grâce aux capacités du téléphone (photo, vidéo, Etc.).
La problématique est différente avec cette solution, car la contrainte de l’installation freine énormément les utilisateurs (sans compter les mises à jour contraignantes). De plus, elles ont un coût de développement et de maintenance pour chaque plateforme, ce qui les rend onéreuses.

 

Les atouts des Progressive Web App

L’objectif d’une Progressive Web App est de trouver le juste milieu entre les deux, et de bénéficier des avantages de chacune de ces deux solutions : permettre d’avoir un contenu web qui charge rapidement, de manière fluide et qui s’adapte à tous les périphériques mobiles, tout en permettant une utilisation mobile hors connexion ou avec peu de débit, en accédant aux fonctions du téléphone et en permettant d’envoyer des notifications à l’utilisateur.

Ses principaux atouts sont :

  • Elles peuvent être installées comme une app (ou presque)
  • Elles peuvent fonctionner hors ligne en stockant des infos
  • Elles peuvent accéder (de manière plus ou moins étendue) aux capteurs et aux ressources des smartphones
  • Elles sont SEO friendly

Les applications natives et leurs contenus sont par nature hors de portée des bots de moteurs de recherche.

Il faut donc avoir recours à l’App Indexing pour donner accès aux bots à leurs contenus, et les référencer.

Avec les PWA, les contenus et les services sont générés via du code HTML/Javascript/CSS tournant sur un navigateur.

Les bots (qui aspirent les contenus via un navigateur intégré) ont donc nativement accès aux contenus d’une web app, pourvu qu’ils aient pu en découvrir l’url.

Bref, les contenus d’une PWA se référencent exactement comme les pages d’un site web.

Mais à condition que la PWA soit réellement conçue comme un site web, et c’est là souvent que le bât blesse…


Ecueils

Le principal écueil reste aujourd’hui le fonctionnement de la PWA sur un IPhone.

Malgré une structure mieux pensée qu’une web app, qui permet de meilleures performances, le navigateur de l’iPhone ne gère pas correctement les services workers et le manifest.

Par conséquent, le comportement ne sera pas identique sur un smartphone android  et un iPhone.

Apple est train de travaille sur les PWA est a enfin fini par en accompagner le développement.

Ce dernier frein, n’en est donc plus véritablement un.

 

Analyse de Google sur les PWA

Google a publié des études de cas de sociétés qui ont adopté les Progressives Web App et les résultats sont positifs :

L’Equipe a vu le taux de rebond divisé par 2 chez les 10 % d’utilisateurs qui se sont vus proposer de tester l’application.

United eXtra Electronics (site e-commerce) a constaté une augmentation de 400 % du réengagement et 100 % de vente en plus de la part de clients via les notifications Push.

5miles (application e-commerce B2C) a fait baisser son taux de rebond de 50 % et a augmenté ses conversions de 30 %.

Le réseau social Twitter, avec sa version Twitter Lite, qui pèse moins de 1 Mo, se charge 30 % plus rapidement que la version native et consomme 70 % de data en moins permettant aux pays en voie de développement et les connexions à bas débit d’utiliser pleinement ses services.

Lancôme a enregistré une augmentation globale de ses conversions de 17 %, une hausse de 53 % des sessions mobiles iOS et une baisse du taux de rebond sur iOS de 10 %.

 

Etude de cas : création d’une PWA

Etape 1 : Service Workers

Ce sont les composants qui distinguent les PWA des sites mobiles classiques.  Un service worker est un script, qui exécute différentes fonctionnalités comme la gestion de notifications push et la gestion du cache.

Il s'exécute en tâche de fond et il est séparé de la page Web. Mais il n’est pas capable d’accéder au dom. En revanche, il a qualité d’être autonome (ex avec notification push).

Il est un intermédiaire (autrement dit un proxy) entre le navigateur et le server. Les service workers fournissent un proxy interne au navigateur Web pour gérer les requêtes Web/HTTP.

Les Service workers se situent entre le réseau et la partie visible du navigateur pour fournir le contenu.

Ils sont capables d'utiliser les mécanismes de cache efficacement et permettent un comportement sans erreur pendant les périodes hors connexion.

Le schéma ci-contre illustre ce que fait un Service Worker  :

 

Création du service Worker

Le cycle de vie d’un sercice worker est le suivant :

Tous les service workers passent par ces 3 étapes dans leur cycle de vie : Enregistrement, Installation et Activation.

 

En ce qui concerne la création du service worker, la première étape est de créer un fichier vide sw.js.

Ensuite, pour enregistrer le service worker, vous devez l'enregistrer dans votre code JavaScript principal. L'enregistrement indique au navigateur où se trouve le service worker et il commence à l'installer en arrière-plan.

Par exemple, vous pouvez inclure une balise <script> dans le fichier index.html de votre site (ou le fichier que vous utilisez comme point d’entrée de votre application) avec un code similaire à celui présenté ici.

 

Ce code commence par vérifier la prise en charge du navigateur en essayant de trouver le serviceWorker en tant que propriété dans l'objet navigateur. Le service worker est ensuite enregistré auprès de navigator.serviceWorker.register, qui renvoie une promesse résolue lorsque l'enregistrement du service worker a réussi. Le scope du service worker est ensuite enregistrée avec registration.scope.

Il suffit alors de relancer le serveur.

En allant sur http://localhost:8080 et en ouvrant l’outil de développement, vous trouverez l’onglet application qui vous permet de gérer l’état de votre PWA. Cliquez sur “Service Workers” pour vérifier que vous avez bien un service enregistré pour votre site.

 

Le scope du service worker détermine à partir de quel chemin il interceptera les demandes. Le scope par défaut est le chemin d'accès au fichier Service worker et s'étend à tous les répertoires inférieurs. Ainsi, si le script du service worker(par exemple, service-worker.js) se trouve dans le répertoire racine, le scope contrôlera les demandes de tous les fichiers de ce domaine.

 

 

Une fois que le navigateur a enregistré un service worker, l'événement d'installation peut se produire.

Cet événement se déclenchera si le navigateur considère que le service worker est nouveau.

Nous pouvons ajouter un gestionnaire d'événements d'installation pour effectuer des actions pendant l'événement d'installation.

S'il s'agit de la première rencontre d'un service worker pour cette page, il s'installera et, en cas de succès, passera à l'étape d'activation en cas de succès.

Une fois activé, le service worker contrôlera toutes les pages qui se chargent dans son étendue et interceptera les requêtes réseau correspondantes.

------------------------------

Parlons maintenant de 3 « Functional Events » : fetch, sync et push.

 

Un Fetch est déclenché chaque fois qu'une ressource est demandée. Dans l’exemple ci-dessous, nous écoutons l'événement fetch et au lieu d'aller sur le réseau, nous renvoyons la ressource demandée à partir du cache (en supposant qu'elle se trouve là).

Les services workers peuvent utiliser la synchronisation en arrière-plan. Ci-dessous, nous commençons par enregistrer le service. Puis, nous enregistrons un événement de synchronisation avec la balise 'foo'

Le service worker peut écouter les événements de synchronisation. Cet exemple ci-dessous écoute l'événement de synchronisation étiqueté 'foo'. doSomething () devrait renvoyer une promesse indiquant le succès ou l’échec de ce qu’il essaie de faire. Si cela réussi, la synchronisation est terminée. Si cela échoue, une autre synchronisation sera programmée pour réessayer.

 

Enfin, le service worker peut écouter les événements push. Les événements Push sont initiés par le serveur, via le service Push d'un navigateur. L’exemple ci-dessous montre une notification lorsque l'événement push est reçu. L'objet options est utilisé pour personnaliser la notification. La notification peut contenir les données envoyées par les serveurs.

 

 

 

 

 

 

 

Etape 2 : Manifest JSON

Après la première étape « création du service worker », une PWA doit posséder un « Manifest JSON ». C’est un fichier descriptif qui permet de donner un rendu plus « natif » à l’application (affichage plein écran, icônes identifiables, orientation de l’écran,) et apporte surtout la possibilité d’installer l’application sur le « homescreen ».

Sur mobile ou tablette, l’utilisateur est en effet invité, s’il le souhaite, à installer l’application sur son écran d’accueil. Cette "installation" est rendue possible grâce à l’app manifest, qui envoie aux navigateurs des informations comme l’icône (pour chaque taille de device), le splash screen (ou la couleur à afficher pour l’écran de lancement), le display en portrait / paysage ou les deux et enfin, l’option que l’app tourne en toute autonomie, indépendamment du navigateur.

L’installation du Manifest JSON est relativement aisée.

Après avoir déposé le fichier Manifest à la racine du dépôt ou dans un dossier (au même titre qu’un fichier lambda faisant partie de la solution de votre site), il sera nécessaire de renseigner une balise link manifest dans votre page web (index.html par exemple) juste avant la fermeture du </head> afin de référencer le fichier Manifest au sein du document. Cela dans le but de prévenir le navigateur qu’il est en présence d’une PWA et qu’il va devoir traiter ce fichier Manifest.

Ensuite des sites comme https://app-manifest.firebaseapp.com/ permettent en quelques rapides instants de créer vos différentes icones et d’en connaitre les paramètres à inclure dans le fichier manifest.json

 

Etape 3 : LightHouse

Afin de vérifier que votre PWA en est bien une, un outil Google existe.

En effet, Lighthouse est une extension de Chrome qui permet aux développeurs d’effectuer des audits de performance, d’accessibilité, de compatibilité avec les progressive web apps… dans le but d’améliorer la qualité des pages web.

 

Cette extension génère une note sur 100 pour votre application. Plus la note est proche de 100, plus votre application est une progressive web app.

Deux choses principales permettent de gagner des points :

  • la mise en œuvre d’un service worker qui permet d’avoir une application offline
  • et la mise en place d’un manifest notifiant le navigateur que “vous êtes une progressive web app” et donc installable sur votre téléphone.

 

 

 

Conclusion

 

De nombreuses grandes marques passent des applications natives aux PWA et il est facile de comprendre pourquoi.

Les sites mobiles et les applications natives offrent des avantages et des inconvénients et les PWA se révèlent être une très bonne alternative entre ces deux mondes pour les entreprises.

Avec l'avènement des PWA, les applications Web sont devenues ultra puissantes.

Par ailleurs, il semble qu’après Google, l’ensemble des grands acteurs d’internet se soient décidés à favoriser l’essor des PWA.

Certaines fonctions nécessaires à leur fonctionnement comme la gestion des notifications ou les service worker n’étaient pas initialement supportées par Safari chez Apple et Edge chez Microsoft.

Il y a quelques mois, en août 2017, Apple a communiqué sur le lancement d’un projet de mise en œuvre des service workers dans la version Open Source de son Webkit, socle de Safari.

Du coté de Microsoft, sa nouvelle version de Windows 10 accueille les PWA dans son store afin de mettre en avant les applications développées sous cette technologie. En parallèle, Microsoft continue d’améliorer son navigateur maison (Edge) pour qu’il soit le plus possible compatible avec celles-ci.

On le voit donc clairement, Microsoft investit du temps et de l’argent dans les PWA pour ne pas rater le virage technologique important qu’elles représentent. Encore un signe, qui nous prouve que les Progressive Web Apps sont sans doute l’avenir du web.

 

Références

 

https://fr.wikipedia.org/wiki/Progressive_web_app

https://fr.goodbarber.com/blog/pwas-les-progressive-web-apps-expliquees-a797/

https://progressive-web-apps.fr/

https://developers.google.com/web/progressive-web-apps/

https://www.codeur.com/blog/progressive-web-apps/

https://www.search-foresight.com/pwa-plus-seo-friendly-apps/

https://scotch.io/tutorials/the-ultimate-guide-to-progressive-web-applications

https://fr.blog.businessdecision.com/digital/2018/01/progressive-web-apps-usage-mobile/

https://www.abondance.com/20180406-19129-infographie-savoir-plus-pwa-progressive-web-app.html

http://bemobee.com/progessive-web-app-pwa-lavenir-des-app/

https://www.reacteur.com/2017/02/pwa-progressive-web-app-et-seo.html

https://www.search-foresight.com/pwa-le-meilleur-du-mobile/

https://blog.clever-age.com/fr/2017/08/01/introduction-aux-progressive-web-apps/

 

 

 

 

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *