PWA : Comprendre les Applications Web Progressives

Les applications web progressive (PWA: Progressive Web Application) tracent le future de la technologie en générale. Vous avez sans doute déjà attendu parler des applications web progressives quelque part, dans une conférence ou sur la toile, peu importe, vous connaîtrez de quoi il s’agit concrètement à la fin de ce billet.

Qu’est ce qu’un PWA ?

Un PWA vulgairement est un site web pouvant être installé comme étant une application native et capable d’être consulté offline.

Non ! Ce n’est pas une nouvelle technologie, ce n’est qu’une combinaison des technologies existantes. Les Progressive Web Application combinent les meilleurs des technologies existantes afin de délivrer une vraie solution aux problèmes connus.

Quels sont ces problèmes ?

Installer une application mobile n’est souvent pas quelque chose de plaisir à faire surtout quand il faut passer par les magasins d’applications pour les utilisateurs mobiles comparé au simple fait d’entrer un URL dans la barre de navigateur pour visiter un site web.

La nécessité de rester online pour naviguer dans un site web ne rend toujours pas content les internautes par rapport à ce que les applications natives permettent. Si vous êtes déconnecté sur Internet, avec les applications natives, vous pouvez avoir la possibilité de parcourir la partie accessible offline de l’application mais cela n’a souvent pas été le cas pour les sites web.

C’est dans ces contextes que les progressives web applications apportent des solutions :

• Installable : Un PWA est  un site web installable comme si c’était une application native. Cela se fait simplement et rapidement que les applications natives. Rendant ainsi facile l’installation d’une application.
• Indépendante à la couverture réseau (Connectivity independent) : Un PWA est capable d’être consulté même sans accès à Internet c’est-à-dire les pages consultées avec accès à Internet restent sauvegardées en cache pour être lues plus tard même sans Internet.
• Facile à être partagé (Linkable) : A partir d’un simple URL, vous partagez un PWA contrairement aux applications natives qui nécessitent une installation via certains types de fichiers. (apk, exe, etc…)
• Capable d’être indexé  (Discoverable) : Vu que c’est tout d’abord un site web, un PWA peut être facilement indexé dans les moteurs de recherches contrairement aux applications natives.

Différence entre PWA et Application native

Un PWA n’est rien d’autre qu’un site web traditionnel qui se lance par le biais d’un navigateur web à la différence d’une application native qui est vouée s’exécuter dans un périphérique spécifique. Cependant un PWA peut s’installer comme les applications natives mais dispose de certains limites qu’on en parle un peu plus tard.

Avantages

• Expérience utilisateur améliorée
• Engagement utilisateur garanti
• Coût de la réalisation des  projets mobiles réduit ou effacé
• Référencement de l’application mobile garantie
• Et plus…

Donc, un développeur mobile n’est plus utile ? Les limites de PWA.

On peut dire oui dans un sens et non dans un autre sens. Cela s’expliquerait en détaillant ce que peut faire un PWA comparablement à une application native.

• Un PWA peut s’installer dans un système de la même manière qu’une application native
• Un PWA peut être consulté sans accès à Internet si les données sont préalablement chargées
• Un PWA peut pusher les notifications
• Un PWA peut faire tout ce qu’un site web peut faire dans un système. Lire les fichiers de son système, avoir accès à la caméra, etc. plus d’informations

Une application native par contre peut communiquer entièrement avec le système, lire les SMS, lire les contacts, etc chose qu’un PWA n’est pas capable. Donc, si une application native a besoin de communiquer avec les composants du systèmes de manière conséquente, le PWA ne va vraiment pas aider. D’ailleurs le type de sites qui se serve souvent du PWA sont :

• Les sites E-commerce (ex: alibaba.com)
• Les réseaux sociaux (ex: twitter.com
• Les blogs (ex: informagenie.com)
• Les sites d’actualités (ex: bisonews.com)

Pour n’en citer que ceux là.

Comment implémenter le PWA dans son site ?

Vous avez analysé et trouvé que transformer son site en PWA serait compatible et avantageux, cela se fait de manière aussi très simple sans trop coder d’ailleurs.

Vous n’avez qu’à générer le manifest et les services workers dans PWABuiler et les inclurent dans votre site web. L’inclusion du manifeste se fait à l’aide de :

<meta name="manifest" content="manifest.json" />

Et vous pouvez inclure le service Worker comme suit :

<script src="https://pagebuilder-sw-register.js"><script>
<script src="https://pagebuilder-sw.js"><script>

Transformer son site WordPress en PWA

Si vous êtes sous WordPress, C’est encore plus facile de le faire à l’aide du plugin SuperPWA. il existe un article qui vous explique comment transformer en quelque minute votre site sous WordPress en PWA.

Enfin, ceux qui aiment aller au fond pourraient en savoir plus sur le fonctionnement de PWA.