PWA : comment créer une progressive web app ?

Les PWA sont des applications web développées à l’aide de technologies spécifiques leur permettant de tirer le meilleur parti des fonctionnalités du web « classique » et de celles des applications natives.

Par exemple, les sites web sont plus faciles à trouver : c’est beaucoup plus facile et rapide de consulter un site web que d’installer une application, et ces sites web peuvent être partagées grâce à un hyperlien.

D’une autre côté, les applications natives s’intègrent mieux avec le système d’exploitation, et offrent souvent une expérience utilisateur plus fluide. Vous pouvez installer une application native afin qu’elle fonctionne hors-ligne, et vous préférez sans doute ouvrir vos applications favorites via les icônes présentes sur votre écran d’accueil de téléphone, plutôt que d’y accéder via le navigateur.

Les PWA nous offrent la possibilité de créer des applications web qui bénéficient des mêmes avantages.

Ce n’est pas nouveau comme concept : par le passé, ce type d’idées ont été vues de nombreuses fois sur le web, avec des approches différentes. L’amélioration progressive (progressive enhancement) et le responsive design nous permettent déjà de créer des sites web plus accessibles sur téléphone. Travailler hors-ligne et installer des applications était même déjà possible au sein de l’environnement Firefox OS il y a quelques années.

Les PWA, cependant, vont encore plus loin, sans pour autant se débarrasser des fonctionnalités qui font la force du web…

Qu’est-ce qu’une Progressive Web Application (PWA) ?

Les sites Web progressifs gagnent rapidement en popularité, car c’est le moyen de créer des applications avec JavaScript, CSS et HTML qui ont un niveau de performance et de convivialité presque identique aux applications natives.

Bien qu’il existe de nombreux tutoriels « Introduction aux applications Web progressives » sur le Web, mais nous allons creuser un peu plus loin et proposer des outils et des bibliothèques JavaScript que vous pouvez utiliser pour commencer à développer des PWA à un rythme plus rapide et avec un minimum de complexité.

Il existe des points « critiques » qui séparent un site Web progressif d’un site plus traditionnel. Les applications Web progressives doivent être capables de faire ce qui suit :

Les avantages d’une PWA

L’utilisation d’une Progressive Web App (PWA) présente plusieurs avantages :

1. Caractéristiques du web et de l’application

Une PWA peut être utilisée comme une application et un site web : cela signifie que les fonctionnalités du navigateur et de l’appareil sur lequel la PWA est visitée peuvent être utilisées.

Par exemple, l’appareil photo, les notifications push (uniquement sur Android) ou le GPS.

2. Aucune installation requise

Les PWA sont disponibles via le navigateur et n’ont donc pas besoin d’être installées via un app store. Cela signifie également que vous ne dépendez pas des règles d’acceptation de ces magasins d’applications…

Les utilisateurs peuvent ouvrir la PWA directement par son URL, par exemple via un SMS, un e-mail ou un message WhatsApp. Cela a un effet positif sur le taux de conversion des nouveaux utilisateurs.

3. Un éventail plus large

La portée d’une PWA est plus grande que celle d’une application native, car elle est accessible via le navigateur sur les ordinateurs, les smartphones et les tablettes.

4. La PWA visible en tant qu’icône d’application

Une PWA peut être ajoutée (comme une icône d’application) sur l’écran du téléphone de l’utilisateur.

5. Pas de mise à jour de l’application

Comme la PWA est connectée au web, aucune mise à jour de l’application n’est nécessaire. Cela garantit que l’utilisateur (s’il est connecté à Internet) utilise toujours la version la plus récente de l’application.

6. Des performances élevées

Une PWA ne nécessite pratiquement aucun espace de stockage, et utilise moins de ressources qu’une application native, tandis que ses performances sont comparables.

7. Utilisation hors ligne

Les PWA peuvent (en partie) être utilisées hors ligne. Cela a un effet positif sur l’expérience utilisateur, car les utilisateurs n’ont pas à charger l’application entière à chaque fois.

8. Les PWA supportent le SEO

Contrairement aux applications natives, les Progressive Web Apps supportent le SEO (Search Engine Optimization).

Par exemple, les sites Web peuvent être lus par les « crawlers » de Google, de sorte que le contenu de la PWA peut être trouvé dans les résultats du moteur de recherche.

9. Souvent plus abordable

Le développement d’une application Web progressive est souvent plus abordable que le développement d’applications natives, car cela prend moins de temps à développer.

10. Une base solide pour un développement ultérieur

Une PWA peut servir de base pour un développement ultérieur. Avec la PWA, il est possible d’intégrer des « jeux web » rentables dans une application mobile, qui sont ensuite disponibles dans les différents magasins d’applications.

Un autre avantage est que vous pouvez également intégrer des fonctionnalités natives via un « wrapper » natif, par exemple les notifications push sur iOS.

Les inconvénients d’une PWA

Il y a bien sûr des inconvénients :

1. Pas d’accès aux magasins d’applications

L’inconvénient est que les utilisateurs doivent visiter eux-mêmes le site web avant de pouvoir ajouter l’application sur l’écran de leur téléphone.

2. Moins de fonctionnalités

Toutes les fonctionnalités des appareils mobiles ne peuvent pas être exploitées (par exemple, vous ne pouvez pas accéder aux contacts, au calendrier, au Bluetooth ou au NFC).

Lorsque votre application doit faire un usage poussé du matériel de l’appareil, il est souvent plus raisonnable de construire une application native plutôt qu’une PWA. Par exemple, les solutions qui utilisent Bluetooth sont dans la plupart des cas développées en mode natif.

3. Encore en phase de développement

La PWA et sa compatibilité avec les navigateurs (mobiles) et les systèmes d’exploitation sont encore en cours de développement.

Par exemple, Apple ne prend pas en charge toutes les fonctionnalités d’une PWA, de sorte que l’expérience utilisateur sera dans certains cas plus limitée. À l’heure actuelle, il n’est pas possible d’utiliser Siri, d’envoyer des notifications push et d’utiliser Face ID ou Touch ID.

4. Performances

Oui, c’est dans les 2 listes… Avec une PWA, vous pouvez obtenir de bons résultats en matière de performances par rapport à un site classique, mais les performances des applications natives sont toujours supérieures à celles d’une PWA.

Lorsque vous entrez sur un marché concurrentiel, où vous devez séduire l’utilisateur final, il peut être plus sage de choisir une application native plutôt qu’une PWA.

Comment construire une PWA ?

Enregistrer un « service worker »

Pour profiter de tous les avantages de la PWA (notifications push, mise en cache, invites d’installation), vous aurez besoin d’un « service worker ».

Ajouter les notifications push

Les « service workers » permettent à vos utilisateurs de recevoir des notifications push via l’API Push Web. L’envoi de notifications push dépendant fortement de la configuration de votre backend, nous ne nous y attarderons pas ici.

Si vous démarrez une application à partir de zéro, le service Firebase de Google est fourni avec Firebase Cloud Messaging, pour des notifications push relativement simples.

Ajouter un manifeste d’application web

Afin de rendre votre application installable, vous devez inclure un fichier « manifest.json » dans le répertoire racine de l’application.

Il s’agit d’une description de votre application, semblable à celle que vous pourriez soumettre à l’App Store. Il comprend des icônes, un écran d’accueil, un nom et une description.

Vous pouvez également configurer l’apparence de votre application lorsqu’elle est lancée depuis l’écran d’accueil de l’utilisateur :

Notez qu’un manifest.json devrait inclure un éventail complet de tailles d’icônes pour différents appareils.

Configurer l’invite d’installation

Lorsqu’un utilisateur visite une PWA dotée d’un service worker et d’un manifeste, Chrome l’invite automatiquement à l’installer sur son écran d’accueil, à condition que l’utilisateur visite le site deux fois et qu’il y ait cinq minutes entre chaque visite.

L’idée ici est d’attendre que l’utilisateur montre de l’intérêt pour votre application, puis de lui demander de l’installer sur son appareil (ce qui contraste fortement avec l’approche des applications natives, qui demande cet investissement dès le départ).

Mais il peut arriver que vous souhaitiez afficher l’invite d’installation dans des situations différentes, par exemple après que l’utilisateur ait effectué une action particulière. C’est possible, en interceptant l’événement « beforeinstallprompt » et en l’enregistrant pour plus tard, puis en déployant l’invite au moment souhaité.

Les outils pour créer une PWA

React

La première étape de la construction d’une application web progressive consiste à choisir un framework de base. Il existe de nombreux frameworks, et je vous encourage à examiner les choix possibles, mais je vous conseille React, pour deux raisons :

1. Il est géré et soutenu par Facebook, qui utilise le framework sur ses sites et démontre ainsi que le framework est rigoureusement testé auprès de 1,18 milliard d’utilisateurs quotidiens.
2. React est la base de React Native, qui vous permet de porter facilement des applications construites avec React vers des applications natives.

L’attrait de ReactJS réside dans son approche du développement centrée sur les composants. Chaque composant est construit en utilisant JavaScript, et vous pouvez facilement le réutiliser. L’utilisation de JavaScript a également ses avantages :

1. De nombreux développeurs connaissent déjà JS et n’ont donc pas besoin d’apprendre un nouveau langage.
2. Des données riches peuvent être rapidement transmises à travers la couche DOM.
3. ReactJS prend en charge le JavaScript brut et JSX. JSX est une syntaxe de type XML pour écrire du JavaScript.

L’interface utilisateur est constituée de composants. Ces composants peuvent être rendus dans le navigateur, sur le serveur, en utilisant Node.js, et dans les applications, en utilisant React Native. De cette façon, les problèmes de gestion des applications qui doivent être livrées à de nombreux systèmes d’exploitation, navigateurs et appareils différents sont résolus.

Polymer

Vous pouvez réduire considérablement le temps nécessaire à la mise en place d’une application Web progressive en utilisant Polymer comme template.

Ce projet open source de Google est fréquemment mis à jour pour rester en phase avec les projets que le modèle exploite.

Les modèles Polymer utilisent le modèle « PRPL » pour optimiser la livraison de l’application sur le périphérique. Utilisez-le pour :

Vous devez utiliser un serveur HTTP2 pour fournir des ressources à la demande. En outre, le serveur mettra en cache les ressources fournies par les services workers.

Webpack

Si Polymer est idéal pour démarrer, il arrive que l’on doive développer des applications un peu plus personnalisées. À cette fin, vous pouvez regarder du côté de Webpack, un module de regroupement pour les applications JavaScript.

Webpack facilite la création de graphes de dépendances. Un graphe de dépendances supprime la nécessité de gérer les dépendances, ce qui signifie que vous n’avez plus besoin de créer des liens vers tous ces fichiers JS au bas d’une page Web HTML. Le passage à des modules CommonJS ou ES6 réduit considérablement le nombre d’appels vers et depuis un serveur, ce qui se traduit par une application plus rapide.

Avec Webpack, toutes les ressources non codées (images, CSS, polices, etc.) peuvent être appelées via JavaScript en tant qu’objets, ce qui présente là aussi des avantages considérables en termes de vitesse.

Malheureusement, Webpack n’est pas parfait : sa courbe d’apprentissage est un peu dure (mais gérable), et la documentation n’est pas très fournie.

AMP

AMP (Accelerated Mobile Pages) est une suite d’outils permettant de guider la compression des images/JS pour accélérer votre site Web.

Google soutient fortement AMP (allant même jusqu’à mettre en avant les sites Web mobiles alimentés par AMP dans ses résultats de recherche). Google prend en charge AMP Cache, que les développeurs peuvent donc exploiter sans frais.

Lighthouse

Google est le plus grand défenseur des Progressive Web Apps, qu’il considère comme l’avenir du Web. À ce titre, il fournit un outil pratique pour surveiller le développement de votre PWA.

Lighthouse était jadis fourni sous forme d’extension Chrome mais il fait partie, depuis Chrome 60, des « Chrome DevTools », sous l’onglet « Audits ». Lighthouse exécute votre application dans différentes conditions et mesure sa réaction et sa réussite quant aux directives relatives aux PWA. Il attribue ensuite une note sur 100 et peut également évaluer votre application en fonction des meilleures pratiques du Web.

Lighthouse vérifie que votre PWA :

Avec cet outil, vous pouvez vous assurer que votre PWA est parfaitement fonctionnelle.

Trouvez un développeur freelance gratuitement sur Codeur.com pour réaliser votre PWA.