Les progressive web apps (PWA)

Présentation

Ecrit par Vivien

Qu’est-ce qu’une progressive web app ?

Les progressive web apps sont des applications qui reposent à 100% sur les API web, qui au premier contact ont l’apparence d’une web app classique (navigateur internet avec barre d’url visible) et qui progressivement peuvent prendre l’apparence d’une application et se comporter comme une application native.

App Like

En terme d’apparence on parle d’une icône sur le dashboard, d’un splash screen d’un mode plein écran et tout ceci se gère via le fichier manifest.json situé à la racine.

Mode hors connexion

En plus de son apparence, ce qui différencie une PWA d’une web app classique c’est son mode hors connexion. En effet, avec le concept de PWA on peut très bien envisager une application qui a besoin du réseau uniquement pour la phase d’installation et qui une fois installée ne fait plus aucune requête HTTP.

Pour la persistance des données, on n’utilisera pas localStorage pour des gros volumes de données, mais plutôt indexdb ou websql. Le top étant de combiner une base avec une base distante et que le tout se synchronise tout seul quand il y a du réseau (exemple pouchDB / couchDB).

Les fichiers CSS, JS et images seront quant à eux mis en cache via les service workers. Pour faire très simple, un service worker permet de mettre en cache des ressources et de les servir à la place des ressources distantes. Nous verrons plus en détail dans un prochain post ce que permettent les service workers.

Exemple de fichier manifest.json:

{
  "name": "Peoples",
  "short_name": "Peoples",
  "icons": [{
    "src": "../img/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png",
  }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_coloe": "#2F3BA2",
  "gcm_sender_id": "912272722967",
}

Be Progressive !

A quoi ressemble une PWA sur un navigateur qui n’a pas encore implémenté les nouvelles API ?

Si on utilise les nouvelles API de façon progressive en faisant de la « feature detection » alors notre PWA ressemblera à une web app classique parfaitement utilisable, du moment que l’on est connecté au réseau.

Si au contraire on ne pense pas à la rétro-compatibilité, alors notre PWA risque de ne ressembler à rien et d’être inutilisable à cause d’une belle erreur bloquante dans la console. La rétrocompatibilité d’une PWA, ça commence avec le support de… l’iphone 6. Donc pensez-y.

Exemple d’utilisation progressive des services workers:

<script>
 var logSW = function() {
   console.log('OK'); 
 };
 navigator.serviceWorker && navigator.serviceWorker.register('service-worker.js').then(logSW);
<script>

Push push

Un autre aspect intéressant des PWA, c’est que l’on peut mettre en place un système de push notification afin d’inciter nos chèrs utilisateurs à revenir dans l’application.

Et les performances ?

La performance est un sujet à part entière qui sort du cadre des PWA. Mais pour répondre à la question : les PWA sont-elles aussi fluides que les applications natives ?

Mon avis personnel est oui, les PWA peuvent rivaliser avec les applications natives en terme d’expérience utilisateur (fluidité, style graphique, etc). Sans oublier qu’on peut aussi avoir des appli natives mal conçues aux perf pas top.

Le plus des PWA ?

Comme on vient de le voir, une PWA c’est une web app augmentée avec des fonctionnalités qui étaient réservées aux applications natives. Les PWA cumulent donc les avantages:

  • Responsive et performante
  • Accessible depuis le dashboard
  • Accessible hors connexion
  • Installable depuis une url
  • On peut les partager sur les réseaux sociaux
  • On peut les trouver sur les moteurs de recherche
  • Elles sont ré-engageantes
  • Elles sont tout le temps à jour

Les frictions sont donc ultra réduites, il n’y pas de droit d’entrée à payer sur un store, pas de mise à jour bloquée car le business model de notre appli ne plait pas au gérant du store, pas de popin qui demande l’accès au carnet d’adresse ou autre.

Si votre application a besoin uniquement des API web pour fonctionner, mon conseil est de vous lancer dans la mise en place d’une Progressive Web App, vous éviterez ainsi tous les inconvénients d’une application hybride et, qui sait, vous aurez un meilleur retour sur investissement comme Flipkart qui a abandonné le natif au profit d’une PWA.

Si votre cible est majoritairement sur iOS, alors il faudra privilégier le natif en attendant qu’Apple implémente les nouveaux standards web. Pourquoi pas l’hybride ? Car les perfs, l’expérience utilisateur d’une appli hybrid seront meilleures sur Android …

Dans un prochain post nous mettrons les mains dans le code et réaliserons pas à pas une Progressive Web App. Pour les plus impatients voici un excellent exemple de ce que permettent de faire techniquement les PWA.

Retour en haut
Consentement à l'utilisation de Cookies avec Real Cookie Banner