Développer une  Progressive Web (PWA) avec Jamstack

Les applications Web progressives sont parfaites lorsque vous souhaitez faire passer une application web sur mobile. L’approche Jamstack des PWA (pour Progressive Web Applications) nous a clairement permis d’obtenir les meilleures performances avec en bonus de faibles coûts de développement et une grande évolutivité.

Depuis que l’usage d’internet sur mobile et tablette a dépassé celui sur les ordinateurs de bureau en novembre 2016, les utilisateurs mobiles ont été au centre de l’attention de nombreuses entreprises. Alors que les tendances Internet évoluent vers une utilisation accrue des applications, les entreprises ont ressenti la nécessité d’offrir cette expérience utilisateur de type application qui suscite également l’engagement sur leurs sites Web.

La solution à ce problème a clairement été apportée par l’application web progressive. L’approche PWA change la façon dont les utilisateurs interagissent avec une plateforme web, mais aussi avec la marque, sur leur appareil de prédilection : à savoir le mobile !

Dans cet article, on va donc voir comment développer son application web progressive grâce à Jamstack !

Qu’est-ce qu’une application web progressive (PWA) ?

En termes simples, une application web progressive se situe quelque part entre un site Web et une application. Au lieu de pousser les utilisateurs à télécharger votre application, les PWA vous permettent d’apporter cette expérience de type application sur votre site Web via le navigateur de l’utilisateur.

Pourquoi votre site Internet devrait-il utiliser une application web progressive ?

D’un point de vue technique, une application web progressive étant basé sur du HTML téléchargé à partir d’un serveur WWW typique, il n’y a aucune difficulté à l’adapter à une version différente en fonction de l’appareil (ici mobile) et/ou du système d’exploitation.

Avantages d'une application web progressive

De toute évidence, les PWA offrent une expérience d’application mobile. Ce qui signifie que vous pouvez jouer beaucoup plus avec l’engagement des utilisateurs en leur offrant plus de fonctionnalités. Votre page pourra se charger instantanément et répondre plus rapidement  aux interactions des visiteurs.

Mais c’est loin d’être le seul avantage d’une application web progressive ! Vous pouvez également parcourir son contenu même lorsque vous êtes hors ligne.

Avec les PWA, vous pouvez envoyer des notifications push, ce qui peut considérablement augmenter l’engagement de votre public.

Parce qu’elle place les données en cache, l’expérience de navigation est incroyablement rapide. Vous n’aurez donc plus à vous ronger les sangs à l’idée que vos utilisateurs quittent votre page en raison d’un temps de chargement trop long… Cela n’existe tout simplement plus lorsque vous utilisez une application web progressive !

Enfin, et grâce à tous les avantages mentionnés ci-dessus, les PWS améliorent vos taux de conversion et augmentent donc votre portée potentielle. Le tout en réduisant vos coûts d’acquisition.

Quels sont les défis posés par les applications web progressives ?

Jusqu’à récemment, la prise en charge de plusieurs navigateurs posait problème. Aujourd’hui, les applications Web progressives sont entièrement prises en charge par Chrome et Opera. Firefox prend en charge presque toutes les fonctionnalités PWA. Et Apple a enfin commencé à offrir un support limité depuis Safari 11.1 pour iOS. Bien que l’on aille dans la bonne direction, il reste encore beaucoup de travail à faire.

Y a-t-il d’autres défis auxquels vous devriez vous attendre en passant à une application web progressive ?

La prise en charge de la connexion inter-applications reste un problème dans certains cas. L’apparition d’un magasin de téléchargement central pour les PWA (comme iTunes Store ou Google Play) pourrait néanmoins résoudre ce problème de fiabilité.

L’approche Jamstack des applications web progressives 

Avant d’approfondir un peu plus le sujet, gardez à l’esprit que cet article n’est pas une étude de cas. Mais juste un bref aperçu de nos réflexions sur l’expérience de développement d’une PWA avec l’approche Jamstack.

En l’occurrence, l’application que nous développions devait avoir des fonctionnalités standard comme un blog ainsi que des listes de produits. L’objectif principal était de créer une communauté autour de son sujet spécifique. Nous voulions permettre aux utilisateurs d’interagir avec tous les aspects du site Web (et entre eux), via des commentaires d’articles, des critiques de produits et une section Q&A poussée (qui est plus proche d’un forum que d’une page FAQ standard).

Développer une application web progressive avec Jamstack ?

Ainsi, les principales fonctionnalités de l’application sont le blog, la liste des produits et le panneau communautaire. Le blog, qui contient énormément d’articles, avait toutes les caractéristiques et fonctionnalités standard combinées avec le système de commentaires. Pour les produits, hormis les aspects informatifs, nous avons souhaité donner aux utilisateurs la possibilité de laisser des avis. Le panneau communautaire est un endroit où l’utilisateur peut démarrer des discussions, poser des questions, obtenir des informations sur les sujets qui l’intéressent. 

Pourquoi opter pour Jamstack ?

Développer une application de manière « traditionnelle » signifiait que nous aurions besoin de développer une application distincte pour Android et iOS. Mais aussi de nous soucier des serveurs pour notre API, des bases de données, de l’hébergement, etc. Nous avons opté pour Jamstack pour ce projet tout simplement parce que cette approche nous permettait de :  

  • intégrer des services tiers et créer facilement les nôtres dans le cloud ; 
  • conserver le contenu autant que possible dans le headless CMS afin que nous puissions potentiellement l’utiliser à partir de plusieurs points de terminaison ; 
  • utiliser JavaScript sur le front-end et le back-end.

En plus de ces trois avantages, nous avons pu minimiser les coûts d’hébergement en utilisant Netlify. Nous avons hébergé notre application comme n’importe quel autre site statique, ce qui a permis d’économiser des coûts opérationnels pour notre client ! Une bonne nouvelle pour ceux qui souhaiteraient développer une application web progressive !

Quels frameworks et services avons-nous utilisés et pourquoi ?

Grâce aux outils modernes que nous avons utilisés, nous avons pu obtenir les meilleures performances, de faibles coûts de développement et une grande évolutivité. Pour les sites Web, les blogs et les listes de produits ultra-rapides, nous avons utilisé Next.js comme générateur de site statique et Contentful comme headless CMS

En ce qui concerne la gestion des utilisateurs et le reste ? Heureusement pour nous, il existe une excellente solution – sans serveur. 

Next.js 

Nous avons décidé d’utiliser Next.js pour créer notre application. Next.js est un framework pour les applications React de type “server-rendered” avec de nombreuses solutions prêtes à l’emploi. Vous n’avez pas à penser à la configuration, au webpack, au routage ni même au fractionnement de code. 

Next.js propose également une exportation vers des pages statiques afin que vous puissiez développer votre application web progressive de manière statique sur des services d’hébergement et de déploiement tels que Netlify.

Contentful 

Pour gérer le contenu statique, les articles et les produits, nous avons utilisé Contentful. Il s’agit d’un headless CMS hautement configurable et facile à utiliser par les développeurs et les éditeurs. 

Avec la combinaison Next.js + Contentful, nous avons pu créer une expérience de site Web statique incroyable. L’application Next.js est exportée vers des fichiers statiques et pendant la phase de développement, elle récupère toutes les entrées de Contentful et exporte nos pages remplies de contenu. Grâce à cela, nous avons réussi à réduire l’envoi de demandes au minimum et à augmenter les performances globales de l’application.

AWS

Comme je l’ai déjà mentionné, notre application devait être une application… pas seulement un blog. Nous devions lui donner vie, et nous l’avons fait sans serveur. Nous avons décidé pour cela d’utiliser AWS : une solution qui permettait de couvrir l’ensemble de nos besoins. 

  • Pour stocker les images des utilisateurs : utilisez Amazon Simple Storage Service, Amazon S3. 
  • Ajouter des utilisateurs à votre application : sélectionnez Cognito. 
  • Besoin d’une base de données : utilisez DynamoDB. 
  • Vous voulez utiliser GraphQL pour accéder à vos données : passez par AppSync. 
  • Enfin, nous devons effectuer des opérations avancées côté serveur : n’hésitez pas à utiliser Lambda. 

Avec AWS, vous pouvez utiliser ce dont vous avez besoin et payer uniquement pour ce dont vous vous servez. 

Netlify

Netlify propose des services d’hébergement et de backend sans serveur pour les sites Web statiques. Il supporte la plupart de nos projets et nous étions donc très heureux de pouvoir l’utiliser à nouveau pour notre application web progressive. 

Services d’intégration et de déploiement continus, SSL gratuit, déploiement automatique des sections – ces fonctionnalités et bien d’autres font de Netlify notre option d’hébergement et de déploiement n°1.

Algolia

Le dernier service tiers que nous avons ajouté à notre application web progressive était Algolia. L’ajout de la capacité de recherche à notre application était extrêmement important, car elle donne à nos utilisateurs la possibilité de trouver rapidement le contenu qui les intéresse. Nous avons réussi à connecter Contentful et DynamoDB à Algolia en utilisant une fonction sans serveur afin que chaque nouvelle entrée (comme un article, un produit, une question, etc.) soit indexée et immédiatement disponible pour les utilisateurs.

Les défis

Bien sûr, et même si l’approche Jamstack du développement d’une application web progressive offre de nombreux avantages, elle vient aussi avec ses défis. Voici ceux que nous avons dû surmonter pour notre projet.

Pourquoi développer une application web progressive (PWA)

Les commentaires 

Comme pour tout projet ambitieux, le nôtre comportait des obstacles nécessitant un codage un peu plus complexe. 

Tout d’abord, notre application n’était pas prévue pour être un simple blog dans lequel nous nous appuierions sur le contenu de notre headless CMS, transmis en phase de développement via l’API. Nous voulions également inclure du contenu généré par les utilisateurs dans nos pages statiques. 

Pourquoi ? En leur donnant la possibilité de participer, nous influençons l’engagement des utilisateurs. Ce qui, à son tour, contribue aux performances globales de l’application et améliore le référencement, car le contenu des utilisateurs uniques est indexé par les moteurs de recherche.

Du côté des utilisateurs, nous voulions leur livrer le contenu en un instant en l’incluant automatiquement sur leur page de navigation. Cela signifiait qu’il n’y aurait aucun indicateur de chargement pour les commentaires, les avis ou d’autres données stockées dans la base de données. Le chargement de page devait être 100 % transparent.

Alors comment avons-nous réussi à créer une application statique avec un contenu dynamique ? Tout d’abord, notre application ne se modifie pas après chaque nouveau commentaire ou avis. Ce n’était pas acceptable car de cette façon, les nouveaux commentaires n’apparaîtraient pas instantanément mais seulement après que la page ait été rafraîchie. Pour éviter cela, nous avons rendu notre application à la fois statique et dynamique.

Au moment de son développement, tout le contenu généré par l’utilisateur disponible est inclus dans une page statique. Mais lorsque l’utilisateur ouvre une page, l’application vérifie si elle contient tous les commentaires disponibles pour cette page. Dans le cas contraire, elle met à jour les commentaires et ajoute les nouveaux. C’est une approche simple mais puissante. Les commentaires ajoutés avant la construction de la page sont ajoutés statiquement, mais ceux ajoutés après la construction sont récupérés lors du rendu de la page côté client.

Configuration Next.js d’une application web progressive

Nous voulions avoir tout le contenu Contentful au moment de la construction, pour ne pas avoir besoin de récupérer les données du CMS côté client. Cela permettait en effet que le passage d’une page à l’autre soit « très rapide ». 

Par défaut, la récupération des données du CMS getInitialProps dans les pages suivantes entraîne la récupération du contenu du CMS lorsqu’un utilisateur ouvre une page. Nous avons réussi à afficher le contenu sans atteindre Contentful en téléchargeant toutes les données CF au moment de la construction, en les stockant dans des fichiers JSON. Puis en remplissant la page avec des données provenant de fichiers locaux. Une approche qui a permis de rendre notre application web progressive plus rapide.

Grâce au fractionnement de code Next.js et à l’écriture de code réfléchie, les fichiers .js générés ne contiennent que le contenu que l’utilisateur voit sur la page actuelle. Une autre amélioration des performances consiste à charger une partie nécessaire de l’application.

Le mot de la fin : les avantages qu’offre Jamstack pour développer une application web progressive 

Compte tenu de tous les avantages dont nous avons bénéficié, le battage autour des PWA semble être bien mérité. L’utilisation de l’approche Jamstack dans ce projet nous a également offert  tous les avantages que cette approche a à offrir : 

  • Excellentes performances – puisque la plupart du contenu est statique, l’exploration/la navigation dans l’application est incroyablement rapide.
  • Faibles coûts – l’hébergement de l’application sur Netlify réduit considérablement les coûts. En utilisant l’option « as-a-services », le client ne paie que pour ce qu’il utilise ;
  • Évolutivité – un autre avantage considérable de cette approche. En fonction de l’engagement et de la portée (trafic), nous pouvons évoluer rapidement.

Les applications Web progressives ne sont peut-être pas encore très courantes, mais elles devraient rapidement le devenir. Elles visent en effet à amplifier l’expérience et l’engagement des utilisateurs sur le Web. Et avec tous les bénéfices que nous venons de citer, elle a forcément un énorme potentiel pour votre entreprise. 

Besoin d’aide pour développer votre application web progressive ? Parlez-nous de votre projet, nous serions ravis de vous aider à le concrétiser !

Vous avez un projet en tête ?

Discutons-en ! 

Découvrez nos autres articles de blog

Loading...