Comment créer une Progressive Web App ?

Depuis novembre 2016 les sites Web sont d’avantage consultés depuis un smartphone ou une tablette que depuis un PC.

Google a participé à cette demande en forte progression en favorisant l’indexation des sites Web Responsives mais la firme de Mountain View n’en est pas restée là puisqu’elle a ensuite présenté les Progressive Web Apps (PWA), une solution technique à mi-chemin entre le site Web mobile et l’application native permettant d’améliorer les performances des sites Web ainsi que l’expérience utilisateur.

Qu’est-ce qu’une Progressive Web App ?

Une progressive Web App c’est un peu comme une application native que l’on consulte depuis son navigateur Web.

C’est une solution intermédiaire qui utilise les techniques du Web pour afficher les informations (HTML, CSS …) mais qui utilise les techniques des applications natives pour charger rapidement les données et les rendre disponibles hors connexion. Les PWA se consultent comme des sites web, depuis une URL sécurisée donc elles ne nécessitent aucune installation sur le téléphone.

Comment créer une Progressive Web App ?

Une PWA peut être décomposée en 4 parties

  • Un squelette HTML et CSS pour les contenus dynamiques  ainsi que d’éventuelles pages statiques;
  • Des web services JSON permettant de récupérer les contenus dynamiques;
  • Un système de stockage local (souvent une base SQL);
  • Des services workers qui permettront le pré-chargement des données et la mise en cache des requêtes.

Pour pouvoir bien dissocier les différentes parties il faut commencer par se poser les questions suivantes :

         • Qu’est-ce qui doit se charger instantanément ?

         • Quels sont les éléments graphiques clés dans l’application ?

         • Quelles sont les resources nécessaires pour le squelette (Javascript, styles, fonts, images …) ?

Ensuite nous pouvons commencer par la mise en place du design via le code HTML et CSS tout en gardant les réponses aux questions précédentes de coté. Pour le design, nous allons commencer par mettre en forme le squelette de l’application, qui devra se charger instantanément à chaque visite de l’utilisateur.

Le contenu dynamique sera chargé dans un second temps et inséré dans ce squelette. Pour cette étape il sera important de bien dissocier les ressources utilisées du code HTML (Ne pas intégrer de CSS « inline », placer tout le code javascript dans des fichiers JS …)

 

Ensuite, nous allons optimiser le temps de chargement de ce squelette tout en préparant notre application pour gérer l’affichage hors-ligne. Pour cela nous allons utiliser des ServicesWorkers.

 

Les ServiceWorkers

Ce sont les ServiceWorkers qui font la différence entre un site web responsive et une Progressive Web App.

Un ServiceWorker est un script Javascript qui s’exécutera en arrière-plan pour executer des actions qui ne nécessitent aucune interaction utilisateur et qui ne fait appel à aucune page Web. Les ServicesWorker sont généralement utilisés pour la gestion des notifications push et la synchronisation en tach de fond.

Le ServiceWorker a un cycle de vie complètement indépendant des pages web, il doit d’abord être installé en arrière-plan. Cette installation va correspondre à la mise en cache des fichiers statiques. Si la mise en cache se passe correctement, le ServiceWorker est considéré comme installé et activé. En cas d’erreur il ne sera ni installé ni activé.

Ensuite le script va écouter les événements correspondant aux appels réseau pour permettre le traitement de la réponse.

Attention, un ServiceWorker ne fonctionnera que depuis une url sécurisée, c’est à dire en HTTPS. A l’exception du localhost où il sera possible d’utiliser un ServiceWorker sans url sécurisée.

 

Mise en cache et accès hors-ligne

L’installation d’un ServiceWorker appelle une méthode de ce script dans laquelle nous pouvons executer des taches en arrière-plan. Cette installation ne sera effectuée que la première fois que l’on chargera le site. Les pages statiques (javascript, CSS, images) seront donc enregistrées en local lorsque cet événement sera appelé. Lors de la prochaine visite, les fichiers seront disponibles, même hors connexion.

 

Après installation, le ServiceWorker écoute tous les appels réseau. Il sera ainsi possible d’intercepter les réponses aux requêtes vers les API pour enregistrer le résultat en cache ou pour retourner les données en cache dans le cas d’une utilisation hors-ligne.

Il sera nécessaire toutefois d’ajouter une date dans la réponse des API et quelques conditions dans le script pour s’assurer que la donnée en cache corresponde bien aux données les plus récentes.

 

De par son fonctionnement le ServiceWorker permet de gérer le cache et les données hors connexion sans avoir à intervenir dans le code du site Web, ce qui rend la migration d’un site Web vers une WPA assez facile.

 

Usage et Inconvénients

Bien que cette technologie ne soit pas adaptée à tous les sites Web, les cas d’usages sont très nombreux. La mise en place d’une PWA pour un site d’actualité ou un blog est très pertinente. Cela permet de précharger les articles et de rentre la lecture possible hors-connexion. Dans l’exemple proposé par Google, il s’agit de créer une application météo (https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0). Globalement, les Progressives Web App sont très adaptées aux sites nécessitant peu d’interactions utilisateurs et les sites Web utilisant peu de données en temps réel.

En revanche la création d’une application de gestion disponible hors connexion nécessitera la mise en place d’une base de données local qui devra être synchronisée avec la base de données distante lorsque la connexion Internet sera de nouveau disponible. L’architecture des bases de données se complique d’autant plus dans le cas où plusieurs modifications concurrentes ont pu avoir lieu.

 

Références

Retrouvez un cas concret de création d’une PWA sur le site Google :

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

Plus d’informations et quelques exemples sur les ServiceWorkers :

https://developers.google.com/web/fundamentals/primers/service-workers/

Pour bien comprendre les ServiceWorkers il est conseiller de connaitre les Javascript Promise :

https://developers.google.com/web/fundamentals/primers/promises

 

Maxime O.

Commentaires

admin
Il existe également un meetup sur le sujet https://www.meetup.com/fr-FR/Paris-Progressive-Web-App/

Ajouter un commentaire