Background Sync

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()) ; ...

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) :

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} ...