Entrez dans le monde des PWA avec React

Dans un monde de plus en plus connecté et de plus en plus mobile, vous vous demandez comment rester compétitif ? Vous souhaitez une application mobile mais vous n’avez pas le budget pour des développements complexes ? Vous vous demandez quelle technologie utiliser pour réaliser vos projets mobiles ?

Comment la PWA (Progressive Web App) peut répondre à ces questions ? Dans cet article, nous vous présentons cette alternative au développement natif traditionnel. Nous allons aborder les bases du développement d’une PWA à l’aide de React. À la fin de cet article vous aurez donc la base d’une PWA prête à l’emploi et vous pourrez vous lancer dans les développements de votre projet.

La PWA, la réponse à beaucoup de problématiques

Pour faire simple, une PWA est une version ultra optimisée pour mobile d’un site web, qui est capable d’utiliser certaines fonctionnalités de l’appareil. Le terme progressif vient du fait que l’application est chargée au fur et à mesure de la navigation et non tout d’un coup.

Mais vous vous demandez sûrement quelles sont les différences entre une PWA, un site web et une application native. Ce tableau compare les caractéristiques de ces trois solutions techniques :

Pour bien comprendre la différence entre PWA et application mobile, vous pouvez consulter l’article dédié : Etude comparative : PWA vs application native. La PWA est une excellente alternative aux applications natives qui sont généralement très coûteuses, car elles doivent être faites et maintenues à la fois pour iOS et pour Android. Deux systèmes d’exploitations différents, deux langages de programmation différents, et parfois deux fournisseurs différents… Il pourrait aussi être envisagé de réaliser votre application avec des technologies hybrides comme Cordova pour éviter ce problème. Cordova permet d’encapsuler une application web pour la transformer en application native. Les développements avec Cordova se font avec du HTML, CSS et JS. Mais la PWA permet une fluidité et une adaptabilité qui sont intéressantes, en particulier pour un lancement de version mobile.

De plus, une PWA peut utiliser les options de l’appareil, comme la caméra. Cela ouvre de nouvelles possibilités à votre application. Pour rester sur l’exemple de l’appareil photo, il est maintenant possible d’ajouter de la recherche visuelle à votre application. L’accès au micro permet d’ajouter de la recherche vocale ou encore de la prise de notes vocales. Toutes ces possibilités précédemment réservées aux applications mobiles sont maintenant disponibles pour le web.

React, un choix d’avenir pour vos projets

Après avoir vu ce qu’est une PWA et quels sont ses avantages, il est maintenant temps d’aborder la technologie avec laquelle rendre tout cela possible. Avant d’aller plus loin, sachez qu’il est possible de réaliser une PWA avec n’importe quelle technologie web. Chez Kaliop, nous travaillons souvent avec React. Mais qu’est-ce que React ? Et en quoi est-ce un bon choix pour une PWA ?

React est une librairie JavaScript développée par Facebook qui permet de réaliser des interfaces utilisateur.

De grands groupes, comme Facebook pour leur site ou pour Messenger, ou encore Airbnb, utilisent React pour leur plateforme.

La vision de React est le développement par composant. Votre application est composée d’une multitude d’éléments, comme des boutons, des tableaux, un header… Dans React, tous ces éléments sont séparés en composants pour être traités individuellement puis rassemblés tous ensemble afin de former votre application. C’est cette approche qui rend les applications développées avec React plus maintenables et évolutives.

Prenons l’exemple suivant : votre application a une charte graphique pour ses boutons, mais vous souhaitez la faire évoluer. Alors que dans une application classique il faudrait modifier le code à chaque emplacement d’un bouton, dans une application React il vous suffira de modifier votre composant Bouton. En le modifiant, vous modifiez d’un seul coup l’ensemble des boutons de votre site.

De plus, il est facile de réutiliser des composants d’une de vos applications pour une autre. Il vous suffit d’importer le code du composant dans l’application voulue. Vous pouvez donc créer toute une librairie de composants propre à vos applications qui pourront être utilisés dans l’ensemble de celles-ci. Par la suite, il vous suffira de mettre à jour le composant dans la librairie pour qu’il soit à jour dans l’ensemble de vos applications.

Enfin, il est important de savoir que React est une technologie frontend, ce qui signifie que le code de l’application est exécuté côté utilisateur, et qui permet de rendre l’application plus fluide car il n’y a pas, ou peu, de rechargement de page, ou d’appel au serveur. Cela permet aux applications React d’avoir un comportement proche de celui des applications natives et permet de conserver une bonne expérience utilisateur.

Toutes ces caractéristiques en font une technologie de plus en plus utilisée. Des CMS, comme Ibexa (ex eZ Platform), l’ont intégré pour le développement de leur interface administrateur.

Vous vous dites que tout cela ne nous aide pas à créer une PWA. Détrompez-vous, React a été développé de façon à faciliter le développement de celle-ci. Nous allons voir dans la prochaine section comment créer une PWA avec React.

Tout est prêt pour vous

Dans cette partie, nous allons aborder la partie technique du développement d’une PWA à l’aide de React. Nous verrons quels sont les éléments indispensables à votre application pour en faire une PWA et comment les paramétrer.

Il faut savoir qu’il est très simple de démarrer les développements d’une application React. Les développeurs chez Facebook ont créé une commande yarn (ou npm) permettant de générer l’architecture de votre application. Elle s’appelle tout simplement “create-react-app”.  Il y a deux prérequis pour l’utiliser, il faut avoir une version de Node supérieur à 8.10 et avoir installé yarn (ou npm).

Pour créer votre application vous devez lancer la commande suivante :

L’outil va créer un dossier “my-app” contenant l’ensemble des fichiers nécessaires pour commencer le développement de votre application.

Jetons un rapide coup d’oeil à l’architecture du projet.

• package.json : le fichier où sont déclarées toutes vos dépendances.
• node_modules/ : le dossier où sont installées toutes les dépendances. Vous ne devez pas modifier les éléments de ce dossier.
• public/ : le dossier où seront stockés vos assets.
• src/ : contient l’ensemble de vos composants. C’est ici que vous allez développer votre application.

Nous reviendrons plus tard sur les fichiers manifest.json et serviceWorker.js car il est important de bien les détailler pour comprendre comment React crée une PWA.

En lançant la commande suivante, votre application va se lancer en mode développement : 

C’est bon, vous êtes maintenant prêt à vous lancer dans toutes les fonctionnalités que vous avez imaginé pour votre application.

Il est maintenant temps de se pencher sur ce qui fait de cette application une PWA. Comme vous l’avez vu précédemment, il y a deux fichiers que nous avons énoncé sans les approfondir.

Tout d’abord, regardons le fichier manifest.json.

Celui-ci est la déclaration de votre PWA, où plus couramment appelé le “web app manifest”. Il sert à notifier votre navigateur que le site est une PWA et permet de définir son comportement une fois installé (logo, nom de l’application…). Vous pouvez voir qu’il est possible de configurer, par exemple, un logo pour l’affichage sur l’écran d’accueil, ainsi qu’un nom pour votre application. Ce fichier est nécessaire pour que votre application soit considérée comme une PWA.

Service Workers, élément clé de la PWA

Enfin, il y a le fichier serviceWorker.js. Comme son nom le laisse entendre, il permet de définir les services workers de votre application. Les services workers sont des scripts JavaScript qui tournent simultanément et de façon entièrement asynchrone. Ils vont par exemple intercepter les requêtes, gérer le cache et délivrer les notifications. Certains éléments sont important à connaître au sujet des services workers. Vu que ceux-ci peuvent intercepter des requêtes, ils ne sont disponibles uniquement via HTTPS. Ceci sert à prévenir les attaques “man-in-the-middle”. De plus, les services workers sont entièrement asynchrones, ce qui les empêche d’accéder au localStorage.

Les services workers permettent d’améliorer la performance de votre application. En effet, ils vont mettre en cache certains fichiers afin de les restituer plus rapidement et sans passer par le serveur. Le fait qu’ils fassent cela leur permet également de gérer le mode “hors ligne” de l’application. Vu qu’il n’y a plus besoin d’envoyer une requête au serveur, l’application peut alors fonctionner sans réseau. Cela permet de garantir une grande fluidité et rapidité à votre application.

Les services workers servent également de base à l’intégration de fonctionnalités équivalentes à celles des applications natives comme les notifications push, et la manière dont l’application va les interpréter par exemple. Ils sont également utiles pour le développement des tâches en arrière plan, ce qui permet de maintenir l’application à jour sans action de l’utilisateur ou encore de conserver les actions nécessitant internet jusqu’à ce que l’appareil retrouve une connectivité stable. Pour aller plus loin, vous pouvez consulter l’article : Les Service Workers : première étape vers la PWA.

Vous voilà fin prêt à entamer les démarches pour créer votre première PWA. Mais avant ça, il nous reste un point à aborder. Dans la prochaine partie nous allons rapidement voir quels types d’applications il est possible de réaliser avec React.   

Que faire avec React ?

React permet de créer toutes sortes d’applications. Certains projets ne requièrent pas d’éléments extérieurs, ni API, ni base de données. Par exemple une simple calculatrice ou une To-Do List peuvent être créées uniquement à l’aide de React. Mais ces projets ne sont sûrement pas ceux que vous avez en tête.

Il est relativement facile de brancher une API à un projet React, afin de créer des applications plus riches, intelligentes et dynamiques. Ceci vous ouvre une infinité de possibilités pour vos applications. Vous pouvez par exemple récupérer des résultats sportifs ou des cours boursier. De plus, dans les exemples cités, il peut être important de penser au “real time” pour votre application. Ceci est évidemment possible et déjà bien en place à l’aide d’outils comme Kuzzle.

Mais si votre projet est simplement de faire évoluer votre CMS actuel, quel qu’il soit, en une PWA, ou de créer une nouvelle application avec vos contenus existants pour améliorer l’expérience mobile, cela est également envisageable. Des frameworks, comme GatsbyJs, ont vu le jour dans ce but là. Ils permettent de créer facilement des applications qui se connectent à votre CMS afin d’en récupérer les contenus et les afficher dans une PWA. Vous pourrez donc conserver votre CMS ainsi que tous les contenus que vous avez créé au fil des ans, tout en créant une application plus performante, plus robuste et plus dans l’air du temps.

Conclusion

Vous connaissez maintenant mieux les PWA ainsi que leurs avantages. Vous pouvez donc lancer le projet que vous aviez en tête sans savoir comment le réaliser. Vous possédez également les bases du développement nécessaire à la création d’une PWA à l’aide de React. N’ayez plus peur et lancez vous !