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 «...
Une fonctionnalité permettant de créer des sous-groupes de discussion dans une conversation de groupe serait en cours de développement sur WhatsApp....
Le « no-code » est une méthode de programmation qui n’implique pas nécessairement l’écriture de code mais qui fonctionne plutôt avec des outils GUI (Graphic...
Il est parfois compliqué d’envoyer directement des photos sur le web, que ce soit parce que le fichier est trop lourd ou parce que la plateforme que vous...
La nouvelle gamme de smartphones de Google est dotée d’un design qui place l’appareil photo au centre de l’expérience, d’un processeur plus puissant et du...
Considérée par beaucoup comme l’une des innovations les plus prometteuses de la technologie numérique, la réalité augmentée (ou RA) est une application qui...
Il nous est tous déjà arrivé de télécharger une vidéo sur Internet et de se rendre compte, seulement après, que son format n’est pas pris en charge. Parfois,...
Il existe plusieurs manières de présenter votre site sur un mobile. Les connaissez-vous ? Dans cet article, nous allons vous décrire les différences entre...
Après une mise à jour importante en mai 2021, Discord, logiciel de messagerie instantanée particulièrement bien connue des gamers, offre de...
Lorsque l’on fait ses premiers pas dans le développement et que l’on cherche à apprendre la programmation, il est assez difficile de savoir par quoi commencer....
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...
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…
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 :
L’utilisation d’une Progressive Web App (PWA) présente plusieurs avantages :
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.
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.
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.
Une PWA peut être ajoutée (comme une icône d’application) sur l’écran du téléphone de l’utilisateur.
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.
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.
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.
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.
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.
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.
Il y a bien sûr des inconvénients :
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.
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.
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.
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.
Pour profiter de tous les avantages de la PWA (notifications push, mise en cache, invites d’installation), vous aurez besoin d’un « service worker ».
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.
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.
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é.
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 :
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 :
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.
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.
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 (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.
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.
Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.
Nous ne partagerons pas votre adresse e-mail.