(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 *

  • Magento Commerce, Le Guide complet de la solution
    Aujourd’hui, face à la pression croissante du marché des e-commerces, les entreprises cherchent des solutions leur permettant de générer plus de revenus et d’améliorer l’expérience client. le CMS Magento est une plateforme de commerce électronique extrêmement puissante qui offre un large catalogue de fonctionnalités avancées pour les commerçants souhaitant se démarquer. Dans cet article, nous […]
  • Les documents officiels d’une entreprise en France
    Lorsqu’on décide de créer une entreprise en France, il est important de savoir que cela nécessite certaines formalités administratives. En effet, il est obligatoire de fournir certains documents officiels pour pouvoir immatriculer sa société. Dans cet article, nous allons vous expliquer les différentes démarches à réaliser pour créer votre entreprise, ainsi que les documents officiels […]
  • C’est quoi le motion design ?
    Ont dit souvent qu’une image vaut mille mots. Mais alors que dire d’une animation ? Du mouvement, des graphiques et des images animées : la combinaison parfaite pour créer un projet unique et expliquer n’importe quel sujet. C’est ça le motion design. Pourquoi devriez vous introduire le Motion Design dans votre arsenal de techniques de […]
  • Comment créer une boutique en ligne avec succès ?
    Face à l’explosion des ventes en ligne et de la création de nouvelles boutiques chaque jour, la question qui se pose est : comment créer une boutique en ligne avec succès ? En effet créer sa propre entreprise sur internet ne nécessite pas forcément d’importants investissements mais demande par contre quelques bonnes connaissances. Il faut […]
  • Logistique : pourquoi et comment travailler dans ce secteur ?
    La logistique désigne l’ensemble des activités qui permettent de planifier, d’organiser, de contrôler et d’exécuter les opérations liées à la gestion des flux de biens et de services. Elle englobe plusieurs étapes dont les principales sont le transport, le stockage, la manutention, la distribution, le conditionnement et le traitement des retours. En raison de son […]
  • Semrush : la solution pour maitriser de A à Z son SEO
    Si vous faites du e-commerce, voir même si vous êtes « juste » éditeur de site web ou webmaster, vous avez certainement touché un peu au SEO, le référencement naturel. Que ce soit vous même ou avec l’aide d’une agence SEO , ce canal d’acquisition est devenu réellement indispensable au fur et à mesure des années. Indispensable […]
  • Big Commerce augmente (lui aussi) ses tarifs !
    C’est une réaction qui fait peu de surprises dans le monde de l’e-commerce mais qui ne va quand même pas plaire aux principaux intéressés. BigCommerce, une des solutions concurrente à Shopify, Prestashop, Wizishop et autre, annonce que ses prix vont se voire augmenter dès maintenant pour tous ses marchands. Pourquoi ce n’est une surprise pour […]
  • Play To Earn (P2E) : définition et fonctionnement
    L’univers du gaming connaît une grande révolution depuis quelque temps. On observe une montée en puissance des jeux qui donnent la possibilité de gagner de l’argent en s’amusant. Parmi les jeux qui ont le vent en poupe actuellement, on retrouve le Play to Earn. Plus connu sous l’abréviation P2E, le Play to Earn est ce […]
  • NFT : définition et objectif
    Pour ceux qui sont familiers à la cryptomonnaie, il est facile d’adopter le NFT et son mode de fonctionnement. Cette technologie est répandue depuis 2021. Elle est avantageuse aux artistes, aux joueurs de jeux vidéo et à divers investisseurs. Elle a plusieurs objectifs qui visent à améliorer l’environnement de la crypto technologie. Les amateurs de […]
  • NFT : Les Top 10 les plus chers
    L’année 2021 a connu une croissance massive de la technologie blockchain et des crypto-monnaies. Ce phénomène a été observé au niveau du capital du marché et du développement des différentes infrastructures en rapport avec ces deux domaines. La montée en flèche des Jetons Non Fongibles (NFT) a attiré l’attention suite aux ventes historiques enregistrées sur […]
  • Comment créer et vendre un NFT ?
    Le NFT signifie en anglais ‘’Non Fungible Token’’ et en français ‘’Jeton Non Fongible’’. Il s’agit d’un bien numérique non irremplaçable par un autre, ce qui n’est pas le cas avec les billets d’argent. Il se décline en plusieurs formes dont les tweets, œuvres d’art numériques et noms de domaines. Ces derniers sont achetés par […]
  • Quelles cryptomonnaies risquent d’exploser d’ici 2025 ?
    Alternatives aux monnaies émises par les banques pour certains, outils de spéculation pour d’autres, les cryptomonnaies sont devenues en peu de temps une technologie omniprésente dans notre quotidien. Entre 2020 et 2021, Bitcoin a atteint des chiffres record. Des personnes qui avaient fait l’acquisition de cette monnaie plus tôt se sont retrouvées du jour au […]
  • Akeneo : Le PIM qui est en train de conquérir le E-commerce
    Aujourd’hui, nous nous retrouvons face à un monde constamment connecté, qui exige une gestion optimale des informations et une expérience produit de qualité. Surtout dans un monde Omnicanal. Pour répondre à ces besoins en constante évolution, il est souvent nécessaire de centraliser les informations produits au sein d’une même interface afin de les diffuser de […]
  • NFT : Pourquoi les acheteurs dépensent-ils des millions ?
    Sur internet ou ailleurs, vous avez certainement entendu parler des NFT. Ce sont des images qui peuvent paraitres banales mais dont le prix de vente atteint facilement des sommes à 7 chiffres. Les frais des transactions concernant les NFT sont tout aussi impressionnants. Nombreux sont ceux qui ne comprennent pas comment ce système fonctionne. Pourtant, […]
  • Avis Wizishop : Que penser de Wizishop en 2023 ?
    Explorer Wizishop : Avis clients et engagements offerts pour la création de boutiques en ligne Face à l’explosion de l’activité et des besoins en matière de commerce en ligne, Wizishop s’est imposé ces dernières années comme une solution française complète pour la création de boutiques en ligne et la vente de produits. Mais avant de […]
  • Play To Earn (P2E) : Lesquels sont les meilleurs ?
    Les cryptos de la blockchain gaming ont révolutionné l’univers vidéoludique et sont désormais les options du moment. Ce qui a favorisé la mise en place des jeux Play To Earn (P2E). En fonction des performances affichées par chaque joueur, ceux-ci obtiennent des récompenses en crypto-monnaie et en NFT. Pour s’offrir des expériences de jeu Play […]
  • Quelles sont les meilleures plateformes d’échange de Cryptomonnaie ?
    La crypto-monnaie est un système de paiement numérique devenu populaire en 2022. Des plateformes ont été créées pour faciliter les échanges dans l’univers de la cryptomonnaie. Appelées plateformes de crypto monnaies ou échange crypto, les plateformes d’échanges ou exchanges sont des marchés centralisés. Elles permettent aux utilisateurs de faire du trading, d’acheter et de vendre […]
  • Shopify Winter édition propose plus de 100 nouveautés !
    C’est la deuxième fois déjà que Shopify nous propose un « pack » de nouvelles fonctionnalités pour optimiser et booster son site e-commerce. La première fois, c’était en été 2022 avec la Shopify summer Edition. Cet hiver, Shopify remet le couvert avec la winter édition et nous propose plus de 100 nouveautés à venir profiter directement, sans […]
  • Où trouver les meilleures informations sur les Cryptomonnaie ?
    Le secteur de la crypto-monnaie fait partie des plus évolutifs. Il souffre du manque de stabilité lié à cette devise elle-même. La diversité des crypto-monnaies n’est pas sans conséquence face à cette instabilité. Le cours du bitcoin peut atteindre des sommets aujourd’hui, le lendemain, c’est Ethereum qui chute. Il ne faut pas oublier que les […]
  • Monitoring site web, comment faire et pourquoi ?
    Vous avez un site internet ou un site e-commerce et vous cherchez à savoir si il est en ligne suffisamment longtemps, si il n’y a pas de coupure ou si l’hébergement tient la charge ? Alors il vous faut un outil de monitoring de site ! Que votre site soit un site e-commerce, un site […]
  • Headless, tout comprendre de ce nouveau phénomène
    Vous avez entendu parler de « Headless » mais le terme ne vous revient pas ? Vous ne savez pas comment définir le headless ni ses avantages et ses inconvénients ? Difficile donc de savoir si le headless e-commerce est fait pour vous ?Alors voici toutes les explications et détails pour comprendre de A à Z ce […]