(Progressive) Web Apps – Le futur des Web/eCommerce/Applications est arrivé !

Il est temps qu’on reparle sérieusement des (Progressive) Web Apps (PWA) car les dernières innovations dans ce milieu créent une rupture technologique importante dans le milieu du Web, et vous ne pouvez pas ne pas être au courant à partir de maintenant.

Vous aurez dans cet article :

  • le détail des fonctionnalités disponibles
  • quelques stats (impressionnantes) de marchands ayant mis en place les Progressive Web Apps
  • les raisons pour lesquelles vous devez sérieusement considérer dès maintenant cette technologie

TL;DR (Too Long; Don’t Read)

Pour ceux qui manquent de temps pour lire l’ensemble de l’article, en quelques mots : les Progressive Web Apps (PWA) complètent la liste des fonctionnalités déjà disponibles via le Web (pour les Web Apps) et permettent vraiment désormais de concurrencer réellement les Applications Natives (iOS, Android,…).

Notifications « Push », Géolocalisation, Accès à l’appareil photo, les fonctionnalités dont on pensait qu’elles étaient réservées aux applications natives ne le sont plus. Il est donc temps de se poser les bonnes questions.

Les Web Apps offrent une vraie possibilité de s’éviter des développements d’applications longs et coûteux ainsi que la problématique des applications natives parfois trop éloignées du Web et avec un manque d’interactions possibles de ce côté-là.

Certaines sociétés comme Flipkart (leader de l’eCommerce en Inde) se sont déjà lancées avec un succès impressionnant, nous verrons leurs résultats plus bas ensemble.

Que sont les Progressive Web Apps et qu’apporte cette technologie aux Web Apps habituelles ?

Commençons par une petite information qui a son importance : il est important de ne pas confondre PWA et AMP (Accelerated Mobile Pages), qui sont un cache côté Google pour accélérer l’accès à la page depuis le moteur de recherche, et qui permet également d’avoir quelques extraits enrichis dans les résultats de Google. C’est intéressant également mais c’est autre chose, je vous en reparlerai bientôt ici avec un cas pratique.

Les progressive web apps sont une nouvelle façon de concevoir les flux d’information entre vos serveurs et le Web, de façon à améliorer performances et capacités offertes, notamment au niveau du mobile.

C’est donc principalement une question technique.

Mais ce que vous devez retenir est que l’application que vous envisagez peut probablement être disponible depuis le Web, à moindre coût, avec une très grande partie des fonctionnalités dont vous auriez besoin pour votre application.

Différences Web Apps / Progressive Web Apps : les fonctionnalités apportées par l’aspect Progressive (Web Apps)

Ce que vous devez savoir si vous n’êtes pas technicien à propos des PWA :

  1. les PWA permettent d’exploiter un cache au niveau du navigateur, ce qui permet
    1. d’améliorer les performances au niveau des chargements
    2. notamment un mode déconnecté
  2. les PWA nécessitent à 100% du HTTPS

Ce que vous devez savoir à propos des capacités de vos navigateurs aujourd’hui :

  1. La définition d’un manifeste sur votre site peut permettre aux utilisateurs d’enregistrer l’icône du site (haute résolution possible) sur le dispositif utilisé (surtout intéressant pour le mobile)
  2. Toutes les fonctionnalités inscrites ici avec une coche sont possibles (à regarder avec un smartphone de préférence car les coches dépendent de votre navigateur) : https://whatwebcando.today/

Comparatif Web Apps versus Applications natives

Sachant tout cela, faisons un petit récapitulatif/comparatif entre les Applications natives et les (Progressive) Web  Apps pour comparer une bonne fois pour toutes les fonctionnalités possibles entre applications natives et web apps. Tout en sachant que les fonctionnalités des navigateurs vont progressivement évoluer et le gap de fonctionnalités va tendre à se réduire.

Fonctionnalité App native Web App
Sécurité / HTTPS uniquement obligatoire sur iOS uniquement Oui
Besoin de télécharger/installer Oui Non
Compatibilité tous OS NON Oui
Connexion Internet nécessaire Non Non (grâce aux PWA)
Accès direct Non Oui
Possibilité d’ajout au favoris/navigateur Non Oui
1 seule App pour tous les dispositifs Non Oui
Capacités Push Notifications Oui Oui
Capacités Notifications Géolocalisées Oui Oui
Géolocalisation Oui Oui
Installation sur l’appareil = possibilité d’icône sur l’écran d’accueil Oui Oui (PWA)
Capacités touch Oui Oui
Accéléromètre / Compas / Gyroscope Oui Oui
Reconnaissance vocale Oui Oui
Accès appareil photo et micro Oui Oui
Vibration Oui Oui
Accès au niveau de batterie Oui Oui
Orientation portrait/paysage de l’écran Oui Oui
Capacité « plein écran » Oui Oui
Capacité de sortir du verrouillage Oui Non
Accès à l’alarme Oui (Android) Non
Interception des appels/sms Oui (Android) Non
Accès aux fichiers de l’appareil Oui Oui
Accès aux contacts de l’appareil Oui Non
Capture des URLs Oui Oui (PWA)
Fluidité de l’image Oui Oui (60 images par seconde)

Comme on peut le voir ici, la grande majorité des fonctionnalités (et la plus importante) est déjà déverrouillé, et la volonté est de faire suivre le reste.

A venir notamment : Bluetooth, NFC, Ambient Light Sensor (la petite led de notif qui clignote en couleur sur votre tel), le Proximity sensor qui dit la distance entre 1 objet et le dispositif utilisé, le détecteur de forme

Sources | Lecture plus avancée intéressante sur les possibilités du web mobile 

Vos intérêts à mettre en place les (P)WA

En gros, je vous la fais courte, quel que soit votre domaine d’activité, vous allez trouver un intérêt à avoir une Web App, et tant qu’à faire PWA.

  • Si vous avez des intérêts géolocalisés : géolocalisation et pushs géolocalisés (pas besoin d’avoir utilisé la PWA depuis le démarrage de l’appareil)
  • Si vous avez des intérêts marketing : les pushs marketing classiques sont d’un grand intérêt pour garder le contact (à utiliser avec parcimonie)
  • Dans tous les cas, les bonnes pratiques de cache vous permettront de meilleures performances (attention, le cache côté appareil peut réserver des surprises et est impossible à mettre à jour en cas d’erreur)
  • Si vous avez une app, vous savez qu’il est délicat de convaincre un utilisateur à l’utiliser ; l‘instantanéité d’accès permise par les PWA est un argument de poids
  • Ne serait-ce que pour les statistiques, les PWA vous permettent d’avoir accès à tous les services classiques du Web. et si vous avez un mode déconnecté, rien ne vous empêche de faire un mode asynchrone pour vos stats
  • Nul besoin de développer une application pour chaque OS (Android, iOS, Microsoft, Blackberry,…), votre site est directement compatible avec tous (ou presque). Pour ceux qui connaissent les coûts de telles application, il s’agit là d’une rupture importante qui s’annonce

Pour conclure, il y a bien peu de raisons aujourd’hui de ne pas partir sur cette technologie qui

Exemples / Etudes de cas

Quelques exemples / démos d’applications PWA pour vous convaincre ? ICI

pour les eCommerçants que vous êtes, FlipKart (même niveau de ventes qu’Amazon en Inde) a depuis l’utilisation des PWA (source) :

  • triplé le temps passé sur le site
  • augmenté de 40% le taux de ré-engagement
  • 70% de + de conversion pour ceux qui passent par le bouton d’ajout du raccourci sur l’accueil de l’appareil
  • 60% des utilisateurs des PWA Flipkart viennent de ce bouton d’accueil
  • 3x moins d’utilisation de la bande passante

Certains se sont risqués à faire un arbre de décision là-dessus, je vous laisse juger (RESS = framework pour faciliter certaines interactions ; exemples)

Comment vont s’opérer les migrations ?

Reste que les PWA sont une nouvelle façon de concevoir les sites Internet (la partie front surtout). Pour ceux qui ont déjà des systèmes d’information orientés vers les services (API), le changement sera plus facile mais pour d’autres, la migration sera certainement plus compliquée et coûteuse.

Il est possible que cela prenne plusieurs années ; il y a fort à parier que les plus gros sites Internet auront migré d’ici 5 ans. Twitter a d’ores et déjà opéré ce changement. Vu les gains possibles, les eCommerçants ont intérêt à passer aux PWA, mais le coût/temps nécessaire à cette adaptation est forcément un frein au changement.

L’évolution du mobile sur le marché et l’importance des performances pour ce type de supports devrait être la clé pour ce type de décisions. Et la possibilité des notifications pushs (géolocalisées ou non) la cerise sur le gâteau pour les marketeux.

 


Publié

dans

par

Commentaires

9 réponses à “(Progressive) Web Apps – Le futur des Web/eCommerce/Applications est arrivé !”

  1. Avatar de Prestarocket

    Hello,
    Je te rejoins complètement sur l’intérêt des PWA.
    Chez Prestarocket, on utilise les services workers avec du Prestashop, côté back, pour une « app » de saisie des réceptions de commande qui fonctionne en offline.
    Un de nos prochains side project, est la création d’un site ecommerce semi-statique (statique pour la partie catalogue) sous Prestashop avec du offline et Algolia pour la recherche

  2. Avatar de Benoit Gaillat
    Benoit Gaillat

    Super intéressant en tout cas et merci pour le détail des infos car je n’avais pas du tout suivi pour ma part. A part Flipkart, tu sais qui utilise ça aujourd’hui, en France notamment ?

  3. Avatar de Romain BOYER
    Romain BOYER

    Nope, pas connaissance, justement, c’est le virage à ne pas manquer !

    On en aurait entendu parler, je crois :-p

  4. Avatar de François Huet

    Merci beaucoup Romain, ça ouvre de belles perspectives… C’est fou comme finalement on en revient toujours aux fondamentaux, donc au web 🙂

    @Benoit : on s’y colle si tu veux 😉

  5. Avatar de Benoit Gaillat
    Benoit Gaillat

    @François : je suis sous l’eau ^^ . Faut que je retrouve du temps pour des sides projects comme ça 😉

  6. Avatar de gotcha5832
    gotcha5832

    bonjour,
    Je suis un peu border sur le sujet mais avez vous de exemples d’ecommerce passé en amp (hors ebay)?

  7. Avatar de Romain BOYER
    Romain BOYER

    Bonjour,

    Web Apps et AMP, cela n’a pas grand chose à voir. Le format AMP appartient à Google et sert à créer une page qui sera stockée dans le cache de Google spécifiquement.

  8. Avatar de Benoit Gaillat
    Benoit Gaillat

    Yo Romain, sauf erreur de ma part le micro est pas accessible depuis le browser sur IOS. Je n’ai trouvé aucun navigateur (Safari, Chrome, Firefox) qui peut le faire. Tu as un avis sur le sujet ?

  9. Avatar de Romain BOYER
    Romain BOYER

    @Benoît, sorry pour le délai de réponse, dans l’article, j’avais mis un title sur le micro pour dire que ça allait arriver via la méthode GetUserMedia/Stream mais ce n’était pas encore d’actu, l’article le plus à la source serait : https://w3c.github.io/mediacapture-main/getusermedia.html#local-content

    J’en profite pour rajouter un chouette article, comme souvent, de ThinkWithGoogle sur les PWA orienté eCommerce : https://www.thinkwithgoogle.com/intl/fr-145/industry-perspectives/articles-internationaux/pourquoi-les-progressive-web-apps-sont-faites-pour-vous/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *