Introduction aux Progressive Web Apps

Développer un site web ? Développer des applications mobiles natives ? Développer des applications mobiles hybrides et web ? Difficile de choisir tant il existe de possibilités pour répondre à un besoin client. C’est pourquoi une solution que l’on peut qualifier d’hybride peut vous aider à trouver une réponse adaptée. Accrochez vos ceintures, c’est parti pour une introduction aux Progressive Web Apps et restez avec moi tout au long de la route !

Un peu d’histoire

En 2007, le fameux “one more thing…” de Steve Jobs annonçait l’iPhone et avec lui de nouvelles possibilités pour l’internet mobile. L’année suivante, l’App Store était lancé et, avec lu, plusieurs millions de téléchargements d’applications mobiles. L’intérêt suscité par ces applications mobiles a depuis explosé. Résultat, tous les acteurs du marché se sont mis à développer leurs applications au détriment des sites web « classiques ».

Aujourd’hui, plus de la moitié du trafic mondial sur internet s’effectue depuis un appareil mobile (smartphone ou tablette) avec une forte domination des applications mobiles.

En revanche, deux constats se dégagent :

Premier constat :

Les utilisateurs d’applications mobiles passent la plus grande partie de leur temps sur les « apps » dédiées aux réseaux sociaux et aux médias.

Temps passé aux États-Unis selon les catégories d’application

Second constat:

Les utilisateurs téléchargent peu voire plus du tout d’applications : après plusieurs mois, plus de 65 % des Américains disposant d’un appareil mobile ne téléchargent plus d’applications. (source : L’OBS avec Rue89)

Le téléchargement des applications aux États-Unis a chuté de plus de 20 % par an alors que les plateformes sont plus matures

Progressive Web App, quésaco ?

Présentée par Google en 2015, une Progressive Web App (PWA) allie le meilleur des deux mondes : web et application mobile. Elle répond immédiatement à un besoin utilisateur, et ce sans nécessiter d’installation. Parmi ses principaux avantages : son chargement rapide même avec une mauvaise couverture réseau, l’envoi de notifications pertinentes, la mise en place d’une icône sur l’écran principal et la diffusion d’une expérience en plein écran.

Une PWA repose sur dix principes clés :

Progressive

  • Fonctionne pour tous les utilisateurs sans se soucier du navigateur internet qu’ils utilisent.

Responsive

  • Convient à toutes les tailles d’écrans : téléphone mobile, tablette, ordinateur..

Connectivity independent

  • Est propulsée par les services workers pour fonctionner en mode déconnecté et sur les réseaux de mauvaise qualité.

App-like

  • Ressemble à une application mobile.

Fresh

  • Est toujours à jour grâce au processus de mise à jour des service workers.

Safe

  • Utilise le HTTPS pour sécuriser le flux d’échange et pour s’assurer que le contenu n’a pas été altéré.

Discoverable

  • Est identifiée comme une “application” grâce au Web App Manifest et au service worker registration, permettant aux moteurs de recherche de la trouver facilement.

Re-engageable

  • Interpelle l’utilisateur avec des fonctionnalités telles que les notifications push.

Installable

  • Permet aux utilisateurs d’ajouter les applications qu’ils trouvent pertinentes à leur page d’accueil sans avoir à passer par une boutique d’applications.

Linkable

  • Se partage facilement via une URL et ne requiert pas une installation complexe

Qu’est-ce que les service workers ? Il s’agit de workers JavaScript situés entre l’application et le réseau, et agissant comme un proxy. Exécutes dans un thread séparé, ils peuvent effectuer des actions alors même que la Progressive Web App n’est pas utilisée. De ce fait, ils peuvent gérer la mise en cache et intercepter les requêtes réseaux afin de proposer une expérience utilisateur rapide et fiable, sans se soucier de la qualité du réseau. En ce sens, ils permettent de donner vie à une Progressive Web App.

Quels avantages et inconvénients d’une PWA ?

Une Progressive Web App présente 4 avantages et 4 désavantages principaux :

La PWA pour quels usages ?

Prenons l’exemple de https://flipboard.com. Cette Progressive Web App propose des articles sur différents sujets.

La PWA vue depuis un navigateur sur ordinateur
Le raccourci ajouté à l’écran d’accueil et la vue depuis un appareil mobile

À noter : il y a toujours la possibilité de passer par les boutiques « classiques » afin de télécharger l’application Android ou iOS.

De nombreux exemples sont également disponibles sur le site https://pwa.rocks :

Les outils pour créer une PWA

Vous pouvez créer des PWA à partir du HTML, du CSS et du JavaScript. Si vous souhaitez avoir une première expérience avec les PWA sans aucun framework, je vous invite à suivre ce tutoriel ici.

Voici quelques outils vous permettant de créer une Progressive Web App :

  • Vous pouvez utiliser Angular, framework populaire pour le front-end, pour créer une PWA, notamment depuis la version 5 avec ses nouveaux service workers.
  • Polymer, proposé par Google, met à disposition une collection de composants web, d’outils et des modèles pour construire des PWA.
  • Ionic est un framework open-source qui vous permet de concevoir des applications mobiles hybrides et web. Plus de détails dans mon article ici.

En complément de ces frameworks, Lighthouse, outil open source mis à disposition par Google, permet de savoir si votre application répond aux critères d’une PWA. Lighthouse va alors auditer l’application ciblée et fournir aux développeurs un rapport d’analyse indiquant les éléments présents et manquants nécessaires à la réalisation d’une PWA.

Plus de détails sur Lighthouse ici.

Conclusion

Les PWA présentent donc l’avantage d’atteindre les appareils mobiles sans développements trop complexes et tout en conservant une version desktop en phase avec les normes actuelles. Cette solution peut également être rapidement mise en œuvre si le besoin est bien identifié. De plus, le projet est porté par Google et les frameworks front-end populaires intègrent les concepts liés aux PWA.

En revanche, mon conseil est de limiter les PWA à des besoins simples qui ne requièrent pas l’accès à des fonctionnalités matérielles de l’appareil car, dans la plupart des cas, il sera impossible d’y accéder.

Pour aller plus loin, n’hésitez pas à consulter cet article : https://www.pwastats.com/ qui proposent quelques “success stories” autour des PWA dont notamment celles de Uber, Pinterest et Tinder.

Plus d’infos

* Web App Manifest : le WAM est un fichier JSON qui identifie l’application et définit des propriétés clefs comme les couleurs, les icônes à utiliser… Le but du manifeste est d’installer des applications sur l’écran d’accueil d’un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche. Plus de détails sur le Web App Manifest ici.

** Service worker registration : plus de détails disponibles ici.

Laisser un commentaire

MERITIS ICI. ET LÀ.

Carte Meritis

Meritis Finance

5 – 7, rue d’Athènes
75009 Paris

+33 (0) 1 86 95 55 00

contact@meritis.fr

Meritis PACA

Les Algorithmes – Aristote B
2000 Route des Lucioles
06901  Sophia Antipolis Cedex

+33 (0) 4 22 46 31 00

contact@meritis-paca.fr

Europarc de Pichaury – Bâtiment B5
13290 Aix-en-Provence

+33 (0) 4 22 46 31 00

contact@meritis-paca.fr

Meritis Technologies

5 – 7, rue d’Athènes
75009 Paris

contact@meritis-technologies.fr

+33 (0) 1 86 95 55 00


Contactez-nous

Pour connaître et exercer vos droits, concernant l'utilisation des données collectées par ce formulaire, veuillez consulter la page sur notre politique de confidentialité.