Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Progressive Web App
  3. Background Sync
Extrait - Progressive Web App Utilisez les standards du web pour développer vos applications mobiles
Extraits du livre
Progressive Web App Utilisez les standards du web pour développer vos applications mobiles Revenir à la page d'achat du livre

Background Sync

Introduction

L’application fil rouge s’améliore de chapitre en chapitre. En effet, quelle que soit sa connectivité, l’utilisateur est capable de charger l’application et de lire le contenu. Par contre, il n’est pas capable d’interagir avec elle. Interagir, c’est par exemple mettre en favoris certains articles ou mettre dans le panier certains produits dans une application d’e-commerce.

Deux API sont en cours d’élaboration pour remédier à ce manque. En effet, si certaines actions de l’application sont très importantes pour une société, voire primordiales, il est hors de question qu’elles soient inutilisables une partie du temps, juste parce que l’utilisateur n’a pas de connectivité.

Dans ce chapitre, nous allons aborder ces deux API : les Background Sync et Periodic Background Sync.

Ces API sont pour le moment fonctionnelles sur peu de navigateurs. Une stratégie doit donc être mise en place afin de garder une application fonctionnelle pour l’ensemble des navigateurs.

API Background Sync

L’API Background Sync permet d’enregistrer des phases de synchronisation entre l’application et le serveur. Ces synchronisations seront exécutées par le navigateur en fonction de certains critères : connectivité, état de la batterie…

Pour cela, dans l’application, au moment opportun, nous devons demander au navigateur d’enregistrer une tâche de synchronisation. Nous pouvons par exemple le faire après une interaction de l’utilisateur. Le navigateur exécutera cette phase de synchronisation immédiatement si l’utilisateur a de la connectivité. Si ce n’est pas le cas, cette tâche sera réalisée automatiquement quand la connexion sera de retour.

Nous devons tout d’abord demander l’accord de vos visiteurs en utilisant l’API Permission. Si le statut retourné est égal à granted, nous pouvons faire le traitement. Si le statut est égal à denied, nous pouvons implémenter une solution de repli comme celle que nous aborderons par la suite.

const status = await navigator.permissions.query( 
  name : ‘background-sync 
}); 
 
if(status ≡ ‘granted'){ 
  // Nous pouvons à présent faire appel à l'API Background Sync 
}  

Une fois les permissions vérifiées, nous récupérons l’instance du Service Worker enregistré, et faisons appel à la méthode register de l’objet sync. Dans l’exemple ci-après, au clic sur le bouton (lors de l’ajout d’un produit au panier par exemple), nous enregistrons une demande de synchronisation.

const status = await navigator.permissions.query( 
    name : ‘background-sync 
}); 
 
document.getElementById(‘addToBasket') 
    .addEventListener(‘click', e => { 
        if(status ≡ ‘granted'){ 
           navigator.serviceWorker.ready 
                .then(reg => reg.sync.register(‘syncArticle') ; ...

API Periodic Background Sync

L’API Periodic Background Sync est assez comparable à l’API Background Sync, à part qu’il est possible de programmer une synchronisation à intervalles réguliers en utilisant une expression cron.

Nous commençons par l’implémentation dans le Service Worker, car elle est en fait très proche de celle de l’API Background Sync. En effet, au lieu d’écouter un événement sync, nous allons écouter periodicsync.

self.addEventListene(‘periodicsync', event => { 
  ... 
}) ;  

En fonction de la périodicité que nous allons configurer plus tard, le navigateur va demander une synchronisation en émettant l’événement periodicsync. Comme nous pouvons encore une fois demander plusieurs traitements périodiques pour la même application, il est nécessaire de pouvoir les identifier. Pour cela, nous allons vérifier la valeur de la propriété tag de l’événement émis. Dans l’exemple ci-après, si l’événement correspond à la demande de synchronisation syncArticles, nous faisons le traitement associé. 

self.addEventListene(‘periodicsync', event => { 
  if(event.tag ≡ ‘syncArticles'){ 
    e.waitUntil(syncArticles()) ; ...

Compatibilité navigateurs

Ces deux API sont encore en cours de spécification et ne sont disponibles que sur peu de navigateurs pour le moment.

images/09El01.png

API Background Sync

Pour utiliser l’API Background Sync avec les navigateurs ne la supportant pas, nous devons mettre en place un fallback. Heureusement, Workbox propose le plug-in workbox-background-sync.

Application fil rouge

Nous allons ajouter à l’application fil rouge la possibilité de mettre des repositories GitHub en favoris. Cette fonctionnalité n’appellera pas l’API de GitHub directement, mais plutôt un serveur très simplifié. Vous pouvez dès à présent récupérer le code de ce serveur sur la branche chapitre_09 du dépôt Git, puis exécutez les commandes suivantes :

git checkout chapitre_08 
cd server 
npm install 
node index.js 

Ce serveur, basé sur le framework Express, se limite à deux endpoints permettant de récupérer et de modifier une liste de favoris (cette liste correspond aux identifiants des projets retournés par l’API de GitHub) :

  • GET http://localhost:3000/favorites pour récupérer la liste des favoris.

  • POST http://localhost:3000/favorites pour réinitialiser la liste des favoris. Il faudra passer dans le body de la requête la liste des identifiants des repositories que nous souhaitons mettre en favoris.

Voici le code source de ce serveur très basique.

const express = require("express"); 
const bodyParser = require("body-parser"); 
 
const cors = require("cors"); 
 
const app = express(); 
app.use(bodyParser.json()); 
 
app.use(cors()); 
 
const port = 3000; 
 
let favorites = []; 
 
app.get("/favorites", (request, response) => { 
  response.send(favorites); 
}); 
 
app.post("/favorites", (request, response) => { 
  console.log(request.body); 
  favorites = request.body; 
  response.send(favorites); 
}); 
 
app.listen(port, err => { 
  console.log(`server is listening on ${port}`); 
});  

Dans notre interface graphique, nous joignons un bouton à tous nos repositories, permettant d’ajouter ou de supprimer le projet de cette liste. Voici le code HTML à insérer. Nous associons un attribut data-repo-id afin de faciliter la récupération de l’identifiant du repository du bouton sur lequel l’utilisateur aura cliqué.

<div class="content"> 
  ${repo.description} ...