L’application web progressive, plus connue sous l’acronyme PWA, est une technologie que l’on entend parler depuis quelque temps mais qui dernièrement fait beaucoup parler d’elle. Un nouveau buzz ou le future du Web et plus particulièrement du commerce sur mobile [mCommerce] ?
PWA c’est quoi ?
Les Progressive Web Apps sont des applications hybrides entre les pages web et les applications dites natives (tablettes et smartphones). La PWA essaie de combiner les dernières fonctionnalités des navigateurs web avec le meilleur de l’expérience utilisateur sur mobile.
PWA reste un site web qui peut devenir une application sur mobile et/ou tablette si l’utilisateur souhaite s’en servir comme telle. Quand l’utilisateur visite le site, il est invité à ajouter le site sur son écran d’accueil. Si il accepte il pourra alors utiliser le site comme une app mobile, sinon il continuera a parcourir le site via son navigateur web.
Mozilla (Firefox) défini les PWA: https://developer.mozilla.org/fr/Apps/Progressive
- Découvrable: Identifiable en tant qu’application, trouvable par les moteurs de recherche.
- Installable: Disponible sur l’appareil, sur l’écran d’accueil — sans les tracas des plateformes d’application (app-store).
- Partageable: Facilement partageable par URL, sans nécessiter d’installation complexe.
- Indépendante du réseau: Fonctionne hors-ligne ou sur un réseau de mauvaise qualité.
- Progressive: Fonctionne pour chaque utilisateur, quelque soit son choix de navigateur web.
- Re-engageable: Rend facile l’implication des utilisateurs, même quand ceux-ci n’utilisent pas leurs appareils.
- Adaptative: Convient à tout les formats: bureau, téléphone, tablette, ou peu importe ce qui viendra après.
- Sécurisée: Des mécanismes de livraison qui évitent l’espionnage et s’assurent que le contenu n’a pas été falsifié.
Fonctionne hors-ligne ? Comment ça marche ?
C’est une des raisons principales pour laquelle nos Clients demandent une application mobile native: avoir une utilisation et base de données indépendamment de la qualité du réseau (Wifi, 4G, etc…). PWA contient des services workers, des scripts qui tournent en tache de fond et qui permettent de mettre en cache des contenus, des mises à jours, les push notifications et de faire fonctionner les PWA sans connexion Internet.
Dans la plus part des cas, les PWA seront des pages uniques, et au premier chargement, l’Application Shell sera mise en cache.
Application Shell c’est quoi ?
L’Application Shell est la partie statique de votre page avec son minimum HTML/CSS et JS si requis pour afficher l’UI du site web. Elle ne contient que des éléments d’UI et ne devrait pas contenir de données dynamiques. Comme l’application est en cache des le premier chargement, toutes les fois que l’utilisateur ouvrira l’app (ou le site web), l’UI et le design chargeront instantanément et l’application fera uniquement des requêtes pour les données dynamiques.
Comment installer une PWA ?
Nul besoin ! Il n’y a actuellement pas d’installation à faire. La fonctionnalité “ajouter à l’écran d’accueil” permet au visiteur d’ajouter directement un raccourci (icône) sur leur smartphone. Le résultat est comme une application native. Une fois ouverte, il y aura une animation de chargement et sans interface du navigateur web (un rendu tout comme une application mobile native). Pour avoir la fonction “ajouter à l’écran d’accueil” il vous faudra app manifest.
App manifest c’est quoi ?
Web app manifest est un fichier JSON qui vous permet de contrôler l’aspect de votre application pour l’utilisateur sur son mobile (par exemple sur son écran d’accueil). Il inclue le nom de l’application, les différentes tailles d’icônes, l’écran d’accueil d’ouverture (splashscreen), etc…
PWA ne marche pas sur Apple, et donc ?
Service workers et App manifest ne marche pas encore sur Safari mais sont en cours de développement. Nous considérons donc que les PWAs seront prochainement disponibles sur tous les navigateurs et tous les OS (Android et iOS).
En attendant de belles réussites prouvent que les PWAs sont efficaces et même sur iPhone.
À gauche: le site mobile et sur la droite la PWA. iPhone7 sur un réseau 4G.
Source: Whashington Post PWA
PWA et Magento ?
L’equipe de Magento travaille actuellement sur leur PWA Studio (Magento PWA Studio) qui devrait être disponible des la version 2.3 ou plus tard courant 2018. Le tout basé sur React et Redux.
Et pour vous et Sutunam ?
Nous avons pris le pari des PWAs comme nous l’avions fait pour les sites web responsives il y a quelques années déjà et nous sommes donc prêts pour vous accompagner dans cette nouvelle évolution. Nous étudions les PWAs depuis un moment et nous pouvons des a présent vous accompagner dans leur mise en place si vous souhaitez prendre de l’avance sur vos compétiteurs, contactez-nous.
