Qu'est-ce que la PWA ? Une explication facile pour les non-techniciens

Vous devez savoir dès le départ que cet article est rédigé du point de vue d'un spécialiste du marketing. (Eh bien, je peux lire et écrire du HTML et du CSS, je peux comprendre Javascript dans une certaine mesure, mais cela ne fait pas de moi un technicien).

Qu'est-ce que la PWA ?

PWA ( Progressive W eb Apps ) permet à un navigateur Web d'avoir l'apparence d'une application mobile native (c'est-à-dire des applications téléchargées depuis les magasins iOS et Android). Ces applications natives sont optimisées pour une expérience mobile fluide tout en disposant de fonctionnalités uniques telles que les notifications push Web. La technologie PWA tire parti de l'expérience de navigation Web sur des navigateurs tels que Chrome et Safari, de sorte qu'elle se rapproche de celle d'une application native. Ceci, par conséquent, améliore le trafic et l'engagement sur le Web.

Le terme a été introduit pour la première fois par Google en 2015. La partie "progressive", selon Pete LePage - Google Developer Advocate, peut être expliquée comme suit : " à mesure que l'utilisateur construit progressivement une relation avec l'application au fil du temps, elle devient de plus en plus puissante. ”.

La PWA est-elle la même chose qu'un site Web ?

Oui, les applications Web progressives sont des sites Web.

Cependant, grâce à la technologie Web moderne, ils ressemblent à une application. Cela signifie que les utilisateurs parcourront les applications Web progressives sur leur navigateur avec une URL comme ils le font sur n'importe quel site Web, mais juste après avoir atterri sur la PWA, ils obtiennent l'expérience d'utiliser une "application", directement sur leur navigateur, sans avoir besoin de Télécharger et installer.

Être une "application" ne signifie pas que PWA est limité au mobile. Ils peuvent également être implémentés sur le bureau. En fait, il y a de fortes chances que vous ayez déjà fréquemment visité PWA sans même vous en rendre compte. Si vous avez déjà navigué sur Instagram, Pinterest ou Tinder sur votre ordinateur portable, alors félicitations ! Vous avez rencontré certains des utilisateurs les plus performants de PWA sur le Web.

Jetons un coup d'œil à un exemple de site Web PWA, car il peut vous aider à comprendre PWA beaucoup plus facilement.

Un exemple de PWA

Le site Web de commerce électronique G-SP est un PWA. Lorsque vous visitez le site Web sur mobile, vous pouvez en fait ajouter l'URL du site Web à l'écran d'accueil de votre téléphone.

Ensuite, chaque fois que vous souhaitez revisiter le site Web, il est là avec une icône sur votre écran d'accueil, comme n'importe quelle autre application comme Facebook ou Linkedin.

En ouvrant l'application Web G-SP à partir de votre écran d'accueil, vous pouvez voir que le site Web est maintenant en plein écran sans barre de recherche de navigateur. En outre, il y a un menu de navigation semblable à une application en bas de celui-ci. De plus, lorsque vous faites défiler et appuyez sur, il se sent aussi lisse que du beurre, ce qui est différent de certaines expériences de navigation Web que vous avez pu avoir auparavant.

 Lecture recommandée:
- Étude de cas G-SP PWA : une transformation pour une expérience mobile de premier ordre
- Top 3 des cas d'utilisation de PWA

Conseils pour savoir si un site Web est un PWA

À moins que vous ne soyez développeur et que vous creusiez dans le code source du site, il n'existe aucun moyen certain pour vous de savoir exactement si un site Web est construit sur la technologie PWA.

Cela étant dit, il existe quelques astuces qui, bien qu'elles ne garantissent pas un résultat exact, peuvent vous donner des signes qu'un site Web donné est un PWA.

Site Web monopage

C'est le moyen le plus simple de savoir si un site Web peut être un PWA. Il est basé sur la nature des PWA : les applications Web progressives sont techniquement un site Web d'une seule page. Cela ne signifie pas qu'un site Web construit sur PWA n'a qu'une seule page. Cela signifie que l' événement de consultation de page ne se produit qu'une seule fois, lorsqu'un utilisateur charge initialement le site Web. Ensuite, tous les chargements de page sont gérés par Javascript. Ceci est différent des sites Web normaux, où chaque changement de page entraîne un rechargement de la page avec toute sa source HTML.

Donc comment ça fonctionne? Eh bien, très simple : jetez un œil à l'onglet actif de votre navigateur. Si le site est un PWA, lorsque vous changez de page, le site ne se recharge pas, ce qui signifie qu'il n'y a pas d'animation de "chargement" sur l'onglet du navigateur.

Nous pouvons dire que le site Web du New York Times n'est pas une PWA :

Prenons l'exemple de notre site Web, SimiCart :

Tu vois ce que je veux dire? Le site ne se recharge pas lorsque vous changez de page ! Techniquement, vous restez sur une seule "page" tout le temps. C'est pourquoi les pages PWA se chargent si rapidement et facilement. Toutes les pages sont préchargées la première fois que vous visitez le site et vous sont livrées par la suite. Ils ne dépendent pas de la vitesse de votre réseau et peuvent même fonctionner hors ligne !

Travailleurs des services

Non, ce ne sont pas des travailleurs humains. Service Workers est le nom de la technologie derrière une application Web progressive, qui alimente sa capacité hors ligne, les notifications push et la mise en cache des ressources. Selon Google, les Service Workers sont au cœur des techniques PWA. Donc, si nous pouvons déterminer si un site Web utilise la technologie Service Workers, nous pouvons dire si le site peut être un PWA.

Si vous utilisez des navigateurs basés sur Chrome, vous pouvez le vérifier facilement à l'aide de l'outil Inspector. Faites un clic droit sur le site Web que vous souhaitez vérifier, cliquez sur Inspecter l'élément. Ensuite, allez dans l'onglet Application > Service Workers. Vous pouvez facilement voir s'il y a des Service Workers sur ce site.

Encore une fois, cette astuce ne vous donne qu'un indice de la possibilité qu'un certain site Web soit un PWA. Bien qu'étant une partie essentielle de PWA, Service Workers n'est pas exclusif à PWA. Les sites Web non-PWA peuvent également tirer parti des Service Workers pour améliorer leurs fonctionnalités.

Si vous souhaitez en savoir plus sur PWA Service Worker, nous vous proposons un article exclusif pour tout savoir sur cette technologie étonnante.

Origine sécurisée HTTPS

Vous pouvez cependant savoir exactement si un site Web n'est pas un PWA en regardant son URL. Si l'URL d'un site Web commence par http:// au lieu de https:// , ce n'est pas une PWA. En effet, PWA ne peut fonctionner que sur des sites Web exécutés sur un domaine sécurisé, qui est HTTPS .

Quelle est la popularité de PWA ?

Comme le suggère Google, PWA est "l'avenir de l'application mobile", PWA gagne en popularité, d'abord parmi les grands acteurs, puis les petites entreprises et organisations.

Il suscite des compétitions presque partout, de la plate-forme Windows aux principaux marchés d'applications tels que Google Play Store

Vous pouvez constater que de nombreux sites Web de grands noms sont des PWA comme Telegram, AliExpress, FlipBoard et même les versions PWA de jeux PWA familiers comme 2048 ou Web Flap.

Avantages PWA : que peuvent faire les applications Web progressives ?

Au moment où cet article a été écrit, PWA peut déjà faire la plupart des choses auparavant exclusives aux applications natives. Cela inclut l'accès aux fonctionnalités au niveau de l'appareil telles que l'appareil photo et le microphone, le GPS, le mode hors ligne, l'accès aux fichiers et bien d'autres. Pour avoir un aperçu de ce dont PWA est capable, vous pouvez jeter un œil à https://whatpwacando.today/ .

Par conséquent, l'application Web est un excellent choix pour ceux qui souhaitent améliorer l'expérience mobile de leur marque en ligne, sans investir dans une application mobile.

Plongeons un peu plus dans les avantages de PWA par rapport aux applications mobiles normales et aux sites Web réactifs :

PWA vs site responsive

Comparé à, disons, un site Web , un PWA est supérieur pour les raisons suivantes :

• Vitesse : à contenu égal, PWA se charge plus rapidement que les sites Web normaux grâce à la technologie Service Workers . Il est rapide au premier chargement et encore plus rapide lors des deuxièmes chargements, car il pré-cache tous les contenus et les diffuse en cas de besoin.
• Mode hors ligne : la disponibilité hors ligne est également rendue possible grâce à la technologie Service Workers. Avec les travailleurs de service correctement intégrés, tous les contenus sont préchargés la première fois que vous visitez la PWA et sont ensuite livrés à l'aide de Javascript, faisant de la PWA la nouvelle approche incontournable pour les sites Web dont l'expérience ininterrompue est un must . Nous avons un guide sur la façon de faire fonctionner votre PWA hors ligne, au cas où vous en auriez besoin.
• Notification push Web : Tout comme une application mobile native, PWA peut envoyer des notifications push sur l'écran d'accueil des utilisateurs directement à partir des navigateurs Web mobiles. Ceci est particulièrement utile pour les magasins de commerce électronique pour envoyer des offres et des offres personnalisées à leurs clients. Le push Web pour PWA Android est activé depuis des lustres, et heureusement, il arrivera très bientôt sur PWA iOS.
• Ajouter à l'écran d'accueil : Cette fonction invite les mobinautes à « installer » la PWA. Une fois que l'utilisateur a accepté l'invite, la PWA sera ajoutée à son écran d'accueil mobile et fonctionnera comme toute autre application installée. Voici notre guide pour PWA Ajouter à l'écran d'accueil. Ne le manquez pas !

L'ancienne invite "Ajouter à l'écran d'accueil" sur Chrome ressemblera à ceci :

 >> Lecture recommandée : Comparaison complète entre PWA et Responsive Website

PWA vs application native

Et non seulement les PWA sont meilleures que les sites Web, mais les marques choisissent également les PWA plutôt que les applications natives en raison des avantages suivants que les PWA apportent :

• Multiplateforme : une fois la PWA construite, elle est accessible via toutes les plates-formes mobiles telles qu'Android, iOS ou Windows, car la PWA est basée sur un navigateur et non sur un système d'exploitation.
• À jour : Les modifications apportées à PWA prendront effet immédiatement, dès que les utilisateurs actualiseront la page.
• Indexabilité : Parce que PWA est encore techniquement un site Web, son contenu peut être indexé et détectable sur les moteurs de recherche comme Google. Cela ouvre des opportunités pour les pratiques SEO (Search Engine Optimization), qui permettent à PWA d'atteindre une plus grande base d'utilisateurs par rapport à l'application native.
• Pas besoin de publier : Avec les applications natives, le processus de publication des magasins d'applications peut parfois être très pénible. Imaginez que vous soumettez votre application aux magasins d'applications, que vous attendiez avec enthousiasme pendant 5 jours, pour obtenir un rejet avec une raison qui vous prend 10 fois à relire et que vous ne savez toujours pas de quoi il s'agit. Et dans certains cas, votre application peut ne jamais être acceptée, jamais. (Sex shops ou produits de vapotage, ça vous dit ?). Avec PWA, il n'y a pas de soumission d'application. Quel soulagement! Si vous souhaitez publier vos PWA sur Apple Appstore, Google Play et Microsoft Store, voici comment procéder !
• Faible coût de développement : étant donné que PWA peut être développé une seule fois, puis être disponible pour toutes les plates-formes mobiles et tous les navigateurs qui le prennent en charge, le coût de développement de PWA est relativement faible par rapport aux applications natives. Une autre raison est que PWA utilise des langages de programmation et des technologies qui sont plus communément compris et qui ont une base de développeurs beaucoup plus large.

 Lecture recommandée:
- Progressive Web App vs Native App : Qu'est-ce qui vous convient le mieux ?
- Avantages de PWA pour le commerce électronique

Inconvénient PWA

Évidemment, tout cela semble trop beau pour être vrai ; et quand quelque chose semble trop beau pour être vrai, les gens demandent souvent "Ok, quel est le problème".

Le PWA, malgré ses caractéristiques déterminantes pour l'industrie, a toujours ses inconvénients :

• Accessibilité

Étant donné que la technologie est encore nouvelle et tout, il n'y a pas de marché d'applications actuel pour les PWA, ce qui réduit sa capacité à atteindre un public plus large d'une certaine manière. Cependant, il y a des mouvements de sociétés connues telles que Microsoft avec leur incorporation de PWA dans Microsoft Store, faire un avenir de tout ce qui est PWA dans Windows 10 ne semble pas si farfelu.

• Communication avec les autres applications installées :

Étant donné que PWA est toujours fondamentalement et essentiellement une page Web semblable à une application, elle peut être limitée à bien des égards. La plus grande limitation pourrait être qu'il s'agit d'une communicabilité inter-applications limitée , ce qui pourrait poser problème aux développeurs.

FAQ

A quoi sert le PWA ?

Une application Web rapide, fiable et agréable à utiliser peut servir à de nombreuses fins. Par exemple, Tik Tok, les PWA d'Aliexpress amènent les gens à se familiariser avec les sites, les invitant ainsi à télécharger leurs applications natives. Spotify utilise PWA pour optimiser davantage les performances et la réactivité de son site Web, offrant ainsi à ses utilisateurs une autre option que le téléchargement de leur application. Des jeux comme pacman ou 2048 utilisent également PWA pour atteindre plus d'internautes.

Quelle est la différence entre PWA et une application standard ?

D'un point de vue technique, une application native doit être téléchargée à partir de son magasin d'applications tandis que vous pouvez accéder à PWA via un navigateur Web. Du point de vue commercial, PWA peut être plus convivial pour le référencement, moins cher et plus rapide à développer. Pendant ce temps, une application native est toujours la meilleure pour les projets mobiles complexes, elle peut également créer une crédibilité de marque plus forte.

Les PWA fonctionnent-ils uniquement sur les appareils mobiles ?

Non, PWA fonctionne à la fois sur ordinateur, mobile et tablette.

Quel est le langage de programmation de PWA ?

PWA est construit avec un langage de programmation et des technologies Web populaires, notamment HTML, CSS, Javascript et WebAssembly.

Conclusion

« PWA remplacera-t-il les applications natives ? »

Nous pensons que non.

Encore.

Au quatrième trimestre de 2019, il y avait près de 3 millions d'applications sur Google Play et plus de 2 millions d'applications sur l'App Store d'Apple (Statista, 2019). Ce nombre continue de croître et il ne semble pas que toutes ces applications seront bientôt remplacées. L'habitude de l'utilisateur est une chose et n'est pas facile à changer.

Cela dit, les Progressive Web Apps ont un grand potentiel. Chez SimiCart, nous croyons que les applications Web progressives sont l'avenir. Avec sa vitesse, sa flexibilité de mise en page et ses fonctionnalités, PWA est destiné à remplacer le site de bureau, le site mobile, les applications mobiles natives et même les applications Windows natives. Oui, vous avez bien entendu, les applications Windows . Dans le seul monde du commerce électronique, Progressive Web App est actuellement l'approche incontournable pour les propriétaires de magasins qui souhaitent une expérience légère, réactive et attrayante pour les acheteurs en ligne.

En fait, les statistiques montrent qu'un retard d'un mois dans la mise en œuvre de la PWA peut entraîner jusqu'à 1,4 million de dollars de perte de revenus, et 6,8 millions de dollars supplémentaires si les marques décident de le retarder de six mois.

Pour les propriétaires de magasins de commerce électronique à la recherche d'une solution Magento PWA parfaite et complète, chez SimiCart, nous proposons un package complet pour vous et votre magasin.