PWA, plus qu’un site mobile

17 juin 2019

Vous avez un site web, si celui-ci est responsive design, c’est dĂ©jĂ  un premier bon point. Mais saviez-vous que vous pouviez aller encore plus loin en passant d’un site optimisĂ© pour le mobile au PWA ?

PWA ou Progressive Web App

 

PWA est l’acronyme de Progressive Web App. Une PWA n’est pas une application au mĂȘme sens qu’une que vous tĂ©lĂ©chargez pour l’installer sur votre smartphone, c’est un site web qui peut utiliser des fonctionnalitĂ©s avancĂ©es, sur votre ordinateur ou votre smartphone.

Car une progressive web app n’est pas optimisĂ©e que pour le mobile, elle peut permettre de gĂ©olocaliser ou d’envoyer des notifications push par exemple mĂȘme pour un ordinateur, PC ou MAC.

Sur mobile une application native sera dĂ©veloppĂ©e pour une plateforme, iOs ou Android le plus souvent, alors qu’une PWA est avant tout un site web, donc s’appuie sur le navigateur prĂ©sent sur l’appareil.

Il est possible d’accĂ©der Ă  des fonctionnalitĂ©s de l’appareil telles que :

  • Utilisation de l’appareil photo
  • Envoi de notifications push
  • Affichage full screen
  • Ajout d’une icĂŽne sur la page d’accueil


Ce qui en fait plus qu’un simple site adaptĂ© au format mobile mais une vĂ©ritable application avec des fonctionnalitĂ©s avancĂ©es.

Quels bénéfices attendre du passage en Progressive Web App ?

Utiliser une technologie sous prĂ©texte qu’elle est nouvelle ou Ă  la mode n’est pas une raison valable bien que rĂ©pandue. Pour ĂȘtre utilisĂ©e, une technologie doit vous apporter de la valeur ajoutĂ©e.

Bon pour le référencement

Premier point qui à lui seul peut justifier de passer en progressive web app est le référencement de votre site, notamment sur mobile.

L’explication en est simple : la PWA oblige Ă  utiliser de bonnes pratiques de conception et d’usabilitĂ©, par exemple :

  • Vous serez obligĂ© d’avoir un site sĂ©curisĂ© avec un certificat (le https)
  • Vous devrez avoir un design optimisĂ© pour un usage mobile, smartphone et tablette

Ce que vous pouvez faire pour optimiser un site pour le mobile, vous DEVEZ le faire pour une PWA.

Vous pourrez en plus forcer la mise en cache d’élĂ©ments que vous pouvez choisir, avec mise Ă  jour automatique, le chargement du site s’en trouvera accĂ©lĂ©rĂ©.

Evolutif

Progressive signifie évolutif. Avec une application native sur un app store, vous devez gĂ©rer les versions des diffĂ©rents OS. Avec une PWA, nul besoin, vous pourrez allier la modernitĂ© tout en gĂ©rant l’obsolescence.

Comment ? Sans rien faire, c’est natif !

La technologie que vous aller dĂ©ployer utilise des workers. Si celui-ci n’est pas accessible l’application ne va pas planter, la fonctionnalitĂ© ne sera tout simplement pas accessible et votre site sera toujours fonctionnel.

Expérience utilisateur enrichie

Une progressive web app disposant de plus de fonctionnalitĂ©s qu’un site web « classique », vous pourrez offrir une expĂ©rience utilisateur enrichie. Sous rĂ©serve bien entendu que votre utilisateur dispose d’une version compatible avec les fonctionnalitĂ©s activĂ©es.

Vous pourrez permettre Ă  l’utilisateur d’installer une icĂŽne sur sa page d’accueil pour accĂ©der directement Ă  votre site comme une application native. Site qui pourra ĂȘtre affichĂ© en plein Ă©cran, envoyer des notifications Ă  vos utilisateurs, les gĂ©olocaliser ou leurs permettre de consulter votre site avec une connexion rĂ©duite.

Quelques chiffres

Rien ne vaut un retour d’expĂ©rience pour comprendre et illustrer les bĂ©nĂ©fices d’une technologie.

Le site PWAStats (en anglais) propose des retours d’expĂ©rience aprĂšs le passage en progressive web app, et les rĂ©sultats sont impressionnants.

Citons par exemple la cĂ©lĂšbre application de rencontre Tinder (retour d’expĂ©rience complet en anglais ici, dont est extraite l’illustration) : « Le temps de chargement est passĂ© de 11,91 secondes Ă  4,69 secondes avec la nouvelle PWA. Elle est aussi 90% plus petite que l’application native Android. L’engagement des utilisateurs est omniprĂ©sent sur la PWA. »

Différences Android et iOs

Toutefois, s’appuyant sur le navigateur, il existe des diffĂ©rences entre une progressive web app sur Android et son pendant sur iOs. Voici les diffĂ©rences entre les deux plateformes Ă  ce jour :

Apple amĂ©liore l’intĂ©gration des PWA Ă  Safari et iOs mobile notamment, reste qu’à l’heure actuelle la synchronisation en arriĂšre plan et le push notification ne sont pas encore fonctionnels sous iOs 12.2.