Chaque mois, sur le Blog ESENS, un de nos développeurs partage ses connaissances sur le sujet de son choix! Aujourd'hui, Andrés, Développeur Full Stack et IoT, nous parle des Progressives Web Apps.


Une Progressive Web App, c’est quoi ?

Les Progressives Web Apps (PWA) sont des sites internet développés spécifiquement pour les mobiles qui s'exécutent dans le navigateur et qui utilisent le meilleur des API web pour créer une expérience très similaire à celle que procure les applications natives.

Les PWA sont:

- Fiables: elles chargent instantanément, même avec des conditions réseau pas très stables.

- Rapides: elles répondent rapidement aux interactions avec l’utilisateur.

- Engageantes: elles donnent une expérience très immersive avec des fonctionnalités natives, comme les push de notifications et la visualisation plein écran.

- Installables: elles peuvent être ajoutées à l'écran d’accueil du téléphone et être listées comme une application native.

- Sécurisées: les PWA fonctionnent uniquement avec le protocole HTTPS.

- Trouvables: en étant des pages web, les PWA peuvent être trouvées par les moteurs des recherche.

Pourquoi Développer des Progressive Web Apps

Native? Hybride? Web!

Un des problèmes au moment de déployer une application mobile, qu’elle soit native ou hybride, c’est la distribution. Les PWA permettent aux utilisateurs d'accéder à l’application et d’accéder aux mises à jour grâce à un lien, et donc sans passer par les app stores.

Avec des fonctionnalités comme les notifications et la possibilité d’avoir une icône dans la page d’accueil du dispositif, l'engagement et le temps que les utilisateurs passent sur l’application augmentent.

Le développement devient plus rapide puisqu'il n’est plus nécessaire de créer une application dédiée pour chaque système d'exploitation et les différents dispositifs: c’est du multiplateforme.

En facilitant l'accès aux données et avec une très bonne expérience utilisateur, le taux de conversion s’incrémente.

Comment fonctionnent les PWA?

Les éléments principaux sur lesquels reposent les PWA sont les Service Workers, le fichier web App Manifest et l’architecture App Shell.

Les Service Workers sont des scripts JavaScript qui fonctionnent en parallèle du site web et ils sont actifs même si le site est fermé. Ils fonctionnent comme un proxy client et permettent le mode hors-ligne avec la gestion du cache, la réception de notifications et la mise à jour des contenus en arrière-plan. L’avancement du support des Service Workers dans les différents navigateurs web des systèmes Android et Apple ont généré un fort intérêt et une expansion des PWA ces dernières années.

Le Web App Manifest est un fichier JSON qui permet aux développeurs de définir l'apparence de l’application, de l'icône et de l'écran de lancement. Il permet aussi d’ajouter la PWA à l’écran d’accueil des dispositifs mobiles.

L’App Shell est une architecture pour développer des PWA. Elle utilise un minimum de code HTML, CSS et JavaScript nécessaire pour lancer une interface utilisateur du type natif. Quand le code est pris depuis le cache en étant offline, il peut garantir le lancement rapide et fiable de l’application. Cette architecture permet aussi d'économiser des données en téléchargeant seulement les données nécessaires depuis internet.

Quelques exemples de PWA:
https://www.progressivewebapproom.com/
https://pwa.rocks/
https://paperplanes.world/


Pour aller plus loin

Études de Cas :
https://developers.google.com/web/showcase/
https://trulia-pwa.firebaseapp.com/why-pwa

Liens & Articles d’intérêt :
https://developers.google.com
https://fredcavazza.net
https://medium.com

Article rédigé par Andrés | Retrouvez tous nos articles sur le Blog ESENS !

Vous êtes à la recherche d'un nouveau challenge ? Rejoignez l'équipe ESENS en postulant à nos offres d'emploi !