Les applications natives offrent souvent une expérience utilisateur plus fluide. Elles peuvent par exemple fonctionner hors-ligne et vous permettent d’ouvrir vos applications favorites via les icônes présentes sur votre écran d’accueil de téléphone, sans avoir à passer par le navigateur.
Les PWA nous offrent la possibilité de créer des applications web qui bénéficient des mêmes avantages. Ces applications web développées à l’aide de technologies spécifiques permettent de tirer le meilleur parti des fonctionnalités du web « classique » et de celles des applications natives.
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, et qui facilitent la navigation sur le web. Cependant, les PWA vont encore plus loin, sans pour autant se débarrasser des fonctionnalités qui font la force du web…
Voici tout ce que vous devez savoir sur les PWA en quelques étapes :
- Qu’est-ce qu’une progressive web application (PWA) ?
- Les avantages d’une PWA
- Les inconvénients d’une PWA
- Comment construire une PWA ?
- Les outils pour créer une PWA
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 internet, 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 :
- Fonctionner avec la plupart des navigateurs et des appareils (mobiles et de bureau) avec une base de code progressive ;
- S’adapter à tous les écrans et à toutes les résolutions grâce à une conception réactive ;
- Fonctionner hors-ligne, ou avec une mauvaise connexion internet ;
- Fournir une expérience semblable à celle d’une application, en exploitant notamment les outils de réengagement, tels que les notifications push ;
- Exploiter un manifeste d’application web pour décrire les ressources utilisées ;
- Être accessible via un lien (https obligatoirement), et donc être visible sur les moteurs de recherche ;
- Être installable sur l’écran d’accueil de tout appareil mobile.
Les avantages d’une PWA
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.
Il s’agit par exemple de l’appareil photo, des notifications push (uniquement sur Android) ou du GPS.
2. Aucune installation requise
Les PWA sont disponibles via le navigateur et n’ont donc pas besoin d’être installées via une 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 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 : il prend bien moins de temps à être développé.
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. C’est notamment le cas de notifications push sur iOS.
Les inconvénients d’une PWA
1. Pas d’accès aux magasins d’applications
L’inconvénient majeur de la PWA, c’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, cette étape figure dans les deux 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 » pour commencer. Les « services workers » permettent à vos utilisateurs de recevoir des notifications push via l’API Push Web.
Ajouter les notifications push
L’envoi de notifications push dépend fortement de la configuration de votre backend. Si vous démarrez une application à partir de zéro, sachez que 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 :
- Voulez-vous afficher la barre d’adresse dans le navigateur ou non ?
- Quelle couleur voulez-vous donner à la barre d’état ?
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 : vous devez intercepter l’événement « beforeinstallprompt » et l’enregistrer pour plus tard avant de déployer l’invite au moment souhaité.
Les outils pour créer une PWA
Les outils pour créer une PWAReact
La première étape de la construction d’une application web progressive consiste à choisir un framework de base. Il existe de nombreux frameworks tel que React, que nous vous conseillons de choisir pour deux raisons :
- Il est géré et soutenu par Facebook, qui utilise le framework sur ses sites. Cela démontre ainsi que le framework est rigoureusement testé auprès de 1,18 milliard d’utilisateurs quotidiens.
- 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. En effet, chaque composant est construit en utilisant JavaScript et vous pouvez facilement le réutiliser.
L’utilisation de JavaScript a également ses avantages :
- De nombreux développeurs connaissent déjà JS et n’ont donc pas besoin d’apprendre un nouveau langage.
- Des données riches peuvent être rapidement transmises à travers la couche DOM.
- 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, qui 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 :
- Pousser les ressources critiques pour la route initiale ;
- Rendre la route initiale ;
- Pré-cacher les routes restantes ;
- Lazy-loader et créer les autres routes à la demande.
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, 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 », que l’on retrouve 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 :
- Possède un Service Worker ;
- Répond avec un code 200 lorsqu’elle est hors ligne ;
- Contient du contenu même lorsque JavaScript n’est pas disponible ;
- Utilise HTTPS et redirige le trafic HTTP vers HTTPS ;
- Charge ses pages de manière suffisamment rapide en 3G ;
- Invite bien l’utilisateur à installer l’application ;
- Peut être configuré sur un écran d’accueil ;
- Possède une barre d’adresse aux couleurs de la marque ;
- Contient une balise <meta name=”viewport”> avec une largeur ou une échelle initiale ;
- Affiche le contenu correctement dimensionné en fonction de la fenêtre d’affichage.
Avec cet outil, vous pouvez vous assurer que votre PWA est parfaitement fonctionnelle.
Notre conseil
Les PWA disposent de nombreux avantages, mais encore faut-il savoir les développer pour en profiter durablement !
Trouvez un développeur freelance gratuitement sur Codeur.com pour réaliser votre PWA.
