Décryptage

Progressive Web App : la révolution mobile

Le 22 novembre 2017

Par Gaëlle Fontaine, co-fondatrice agence Aix Marseille

Partager cet article

La technologie Progressive Web App apporte une véritable révolution dans le milieu du développement mobile. Qui n’a jamais rêvé de créer une application avec tous les avantages du web et des applications natives sans leurs inconvénients ? Avec la Progressive Web App (ou PWA pour les intimes), c’est possible…

Quelques chiffres pour commencer

En 2016 le constat est tombé : l’audience mobile a officiellement dépassé l’audience desktop. Et si le téléchargement des applications mobiles augmente (+16% en 2016 au niveau mondial selon App Annie), Google a identifié qu’en 2016 en moyenne 25 applications étaient utilisées par un mobinaute par mois, quand il va visiter plus d’une centaines de sites web différents.

Les applications mobiles “grand public” sont en réalité très peu utilisées

Le constat est donc simple, les utilisateurs se connectent à leurs devices mobiles, mais les applications ont leurs limites. Et hormis les applications de fond utilisées quotidiennement (emails, réseaux sociaux, musique, photographie, quelques jeux), les applications développées par les marques à destination d’utilisateurs “clients” sont très peu utilisées, ou en tout cas pas de manière régulière. En cause, le manque de place, (les apps sont de plus en plus gourmandes en espace de stockage), mais également les fastidieuses mises à jours et autres problèmes de fonctionnement liés à la version de l’OS.

Par ailleurs, le taux de transformation lié à l’incitation au téléchargement des apps reste très peu élevé. Le parcours utilisateur est trop long : accès au store, autorisation de téléchargement, validation des permissions, téléchargement de l’application (nécessitant une attente), lancement de l’application sur la page d’accueil, accès aux fonctionnalités.

 

Oui mais alors, quel est l’intérêt pour les marques de créer des applications mobiles ?

L’intérêt reste important. Outre l’aspect fonctionnel et les business models associés, les applications mobiles permettent une proximité avec l’utilisateur, de la récolte de données et, bien sûr, des notifications push, média ultra-efficace avec un taux moyen de réaction de 10% en France (source accengage 2017).

Allier les avantages d’une app avec ceux d’un site web et sans ses inconvénients. C’est maintenant possible avec la Progressive Web App.

PWA quésaco ?

Plutôt que d’aller chercher l’application sur le store et de l’installer, l’utilisateur va directement pouvoir atteindre le contenu de l’application via son navigateur et ce, sur n’importe quel appareil (mobile, tablette, ordinateur). Il suffit qu’il clique sur un lien pour y accéder. Idéal pour les campagnes de communication !

“Cela existe depuis longtemps !” nous direz-vous. Oui mais non, car les anciennes versions des web app, n’étaient que des sites mobiles avec un accès rapide via une icône, et éventuellement un léger stockage local. Désormais il est possible d’accéder à – presque – toutes les fonctionnalités natives des devices depuis les PWA.

Les avantages de cette solution sont nombreux

  1. L’accessibilité : aucune installation n’est requise, le taux de conversion est nettement augmenté, l’utilisateur accède directement à l’application en cliquant sur le lien.
  2. Un chargement instantané : l’accès réseau est optionnel, la mise en cache permet  un accès offline et ultra rapide.
  3. Des notification Push : contrairement à une page web classique, les PWA permettent de forger l’engagement de l’utilisateur en leur proposant des notifications contextuelles et adéquates (l’utilisateur reçoit une notification pour l’informer qu’un nouveau message est disponible, et ce, même si le navigateur est fermé).
  4. Elles sont responsives ! Contrairement à la seule application mobile, avec la PWA, l’utilisateur accède à son application par différents périphériques, son téléphone, sa tablette ou même son ordinateur (voire sa montre). Plus besoin d’adapter les développements. De belles économies en perspective.
  5. Sécurisée : toutes les données transitent en https.
  6. Disponible sur l’écran d’accueil : tout comme une app mobile native, l’utilisateur peut accéder à la PWA depuis l’écran d’accueil de son téléphone.
  7. Les fonctionnalités d’une app native : l’ensemble des fonctionnalités du téléphone sont accessibles (appareil photo, géolocalisation, notifications etc.)
  8. Une maintenabilité importante : contrairement à une application mobile qui devrait être mise à jour en fonction des nouveaux OS et cela sur chaque plateforme (Android, iOS, mobile, tablette, etc.), la PWA est une web app responsive qui ne dépend que des contraintes du navigateur, comme un site internet, ce qui est nettement moins coûteux.

Les PWA permettent donc des économies de coût de développement et de maintenance tout en optimisant l’expérience utilisateur grâce à la simplification du parcours client.

Schéma PWA - Progressive Web App

Comment ça marche ?

La PWA est en fait un site internet développé uniquement pour les mobiles. Elle utilise :

  1. la technologie Application Shell qui est une architecture qui permet un codage HTML/CSS/JavaScript minimal. Les bénéfices ? Une interface utilisateur qui se charge instantanément, une mise en cache (et donc un accès en mode hors ligne) et un affichage de contenu de manière dynamique.
  2. les scripts Service Workers qui fonctionnent sur les navigateurs et qui permettent la gestion des notifications push et les fonctionnements en arrière plan.
  3. Le fichier Manifeste d’Applications Web qui permet un rendu immersif (pour que l’utilisateur ne se rende pas compte qu’il est dans son navigateur) et permet de générer une icône sur les écrans d’accueil.

Quels sont les inconvénients ?

Aujourd’hui le développement de PWA ne présente majoritairement que des avantages tant au niveau des coûts de réalisation, que des délais ou encore de l’expérience utilisateur. L’unique inconvénient se situe au niveau de la roadmap d’Apple qui, ayant vu les PWA comme une menace de prime abord, tarde à implémenter les Services Workers dans Safari. Mais cela ne devrait être que provisoire puisque le géant à la pomme, sous la pression générale a lancé les premiers développements en Août dernier.

Intégrez la Progressive Web App dans votre planning digital et contactez-nous !

Illustration

Démarrons ensemble

Adeliom et les Progressive Web App

Notre équipe est prête et formée pour le développement des PWA. Nous le proposons déjà pour des projets où les utilisateurs ont un besoin fort d’accès direct au contenu (notamment via des notifications) et pour optimiser leur taux de conversion. Nous pouvons donc étudier pour vous le réel intérêt (ou non) de cette technologie par rapport à vos objectifs. Intégrez la Progressive Web App dans votre planning digital.

Nous confier un projet

Projets

Nos réalisations

Majeur•e•s

Majeur•e•s - Culture

Majeur•e•s - Culture

Concevoir le 1er annuaire inclusif des professionnel·les de la musique et lutter contre les inégalités de genre

Ateliers co-conceptionWordPressReact JSUX WritingBenchmark UXUI / UX DesignTests utilisateurs

Culligan

Culligan - Traitement de l'eau

Culligan - Traitement de l'eau

Augmenter le taux de conversion du nouveau site en optimisant l'UX en continu

Audit des datasRédaction UXÉtude utilisateursSEO SEAUI / UX DesignStratégie digitaleSymfonyMaintenance (TMA)Ateliers co-conceptionAudit ergonomique/UXReact JSTracking KPIsTests utilisateursPrototypage et tests

ÉS Mobilité électrique

ÉS Mobilité électrique - Energie

ÉS Mobilité électrique - Energie

Engager une communauté de prospects autour de la mobilité électrique

Prototypage et testsReact JSBenchmark UXMotion designSymfonyTracking KPIsUI / UX DesignÉtude utilisateursMaintenance (TMA)Ateliers co-conceptionProgressive web app

Soprema – Calculateur isolant

Soprema – Calculateur isolant - Industrie et BTP

Soprema – Calculateur isolant - Industrie et BTP

Augmenter les ventes de produits en magasin en créant une expérience sur-mesure

Étude utilisateursSymfonyMaintenance (TMA)Rédaction UXTracking KPIsBenchmark UXIllustrationsProgressive web appUI / UX DesignReact JSAteliers co-conceptionTests utilisateurs

Nos compétences techniques

Pour vous accompagner

developpement-web

Développement web

Sites internet, plateformes sur-mesure, éco-systèmes digitaux, CMS.
En savoir plus
developement-mobile

Développement
applications mobiles

Développement mobile et tablette sur iOS et Android native et hybride.
En savoir plus
progressive-web-app

Progressive web apps

Développement d'applications web utilisant les fonctionnalités des "devices".

En savoir plus
application-interactive

Applications interactives

Applications en VR, applications en AR, installations immersives et multimédia, applications pour bornes tactiles.
En savoir plus
analyse-technique

Analyse technique

Études de faisabilité, études techniques, création de cahiers des charges techniques, création de diagrammes UML.
En savoir plus
maintenance-applicative

Tierce maintenance applicative

Maintenance préventive, corrective et évolutive de votre support digital.
En savoir plus

L'agence

Découvrir
adeliom-agence

Nos réalisations

Découvrir
adeliom-realisations