Connaissez-vous la technologie « Progressive Web App » alias PWA ?
Nous le savons bien, le support mobile représente 46% des connexions à un site internet en France et le cabinet WARC prédit que ce chiffre passe à 72% d’ici 2025 ! À ce jour, trois types de technologies sont disponibles pour le développement d'applications mobiles : le natif, l'hybride, et la PWA ( plus généralement, le Web ). De nombreux grands acteurs (Pinterest, Starbucks, Uber etc.) ont déjà opté pour une PWA dans les cas d’usages simples, mais qu’est-ce qui se cache derrière cet acronyme prometteur ?

D’où vient la « Progressive Web App » et à quoi ça sert ?

Histoire et description de la PWA

La première version de PWA ou « Progressive Web App » a fait son apparition en 2015 et a été développée par Google.

C’est une application qui se développe comme un site web responsive standard, en langage web (HTML5, CSS3, Javascript, avec le framework de votre choix), contrairement aux applications mobiles natives, qui elles sont souvent codées soit en Java pour Android soit en Objective-C ou Swift pour IOS.

Une application PWA est accessible via le navigateur et on peut l’installer sur son smartphone ou sa tablette comme une application mobile classique. Ce n’est pas le cas des applications natives ou certaines applications hybrides qui sont faites uniquement pour le format mobile et sont accessibles dans les « magasins » d’applications des smartphones (Google Play, App Store).

Lancez-vous et téléchargez votre première PWA !

Comment ajouter une « Progressive Web App » à son écran d’accueil

Vous souhaitez découvrir comment fonctionne une PWA ?

Saisissez votre smartphone, ouvrez votre navigateur et RDV sur la PWA développée par Log’in Line pour Aldelia :  www.areebajobs.com

Vous êtes sous Android : cliquez sur le bouton « S’inscrire » puis « Ajouter à l’écran d’accueil ».

Vous êtes sous IOS : cliquez sur le bouton « S’inscrire » puis sur l’icône partager et enfin « Sur l’écran d‘accueil ».

L’icône de l’app est maintenant sur votre écran d’accueil, consultable en un clic ! Comme vous pouvez le remarquer, la PWA aborde alors une apparence d’application classique, les éléments de votre navigateur n’apparaissent plus !

Développer sa propre PWA

Fonctionnement et avantages de la « Progressive Web App »

(Cette partie est destinée aux développeurs et aux curieux !)

Quels avantages pour le développeur ?

Grâce à son aspect 2 en 1, le développement de la PWA offre un gain de temps précieux. Le développeur peut créer le site web de façon classique et peut déclarer des propriétés de l’app (logo, splashscreen, couleur de barre des tâches…) dans le manifeste.

Ensuite, le service worker du navigateur permettra de gérer un cache d’assets pour pouvoir servir le site ou une partie en étant hors ligne.

Résultat : une expérience utilisateur similaire à celle d’une application mobile, sans les contraintes de soumission aux App-Stores, ni utilisation importante de la mémoire de l’appareil.

En somme, développer une PWA diminue les coûts de développement et de maintenance, apporte une meilleure visibilité sur les moteurs de recherche, une augmentation du taux de conversion et les mises à jour / publications ne sont pas soumises à vérification par les stores.
Attention cependant, certaines des fonctionnalités natives du téléphone (Bluetooth, NFC, géolocalisation précise …) ne seront pas accessibles en PWA. On attend avec impatience que des améliorations soient apportées de ce côté là, espérons qu’elles ne tardent pas à arriver ! Natif, hybride ou PWA, chaque technologie a ses avantages et inconvénients. Ce choix est déterminant pour la rentabilité, la fiabilité et l’usage de votre application.

Faites-nous part de votre projet, notre équipe aura plaisir à étudier la meilleure solution avec vous !

Hermine Montrouge
Hermine Montrouge

Développeuse web front @ Log'in Line

Salut ! Je m'appelle Hermine et je suis développeuse web front junior chez Log'in Line. Je suis spécialisée sur le framework React, j'aime découvrir de nouvelles tech et échanger à ce sujet !

Découvrez nos autres articles !