Synchroniser les données de votre application Web en arrière-plan pour une expérience plus semblable à celle d'une application
Avez-vous déjà été dans l'une des situations suivantes ?
- Connexion en train ou en métro instable ou inexistante
- Votre opérateur a limité votre débit après que vous avez regardé trop de vidéos
- Résider dans un pays où la bande passante peine à suivre la demande
Si c'est le cas, vous avez sûrement ressenti la frustration de devoir effectuer certaines tâches sur le Web et vous vous êtes demandé pourquoi les applications spécifiques à une plate-forme sont si souvent plus efficaces dans ces scénarios. Les applications spécifiques à la plate-forme peuvent récupérer à l'avance des contenus récents, tels que des articles d'actualité ou des informations météo. Même s'il n'y a pas de réseau dans le métro, vous pouvez toujours lire les nouvelles.
La synchronisation périodique en arrière-plan permet aux applications Web de synchroniser périodiquement les données en arrière-plan, ce qui les rapproche du comportement d'une application spécifique à la plate-forme.
Essayer
Vous pouvez essayer la synchronisation périodique en arrière-plan avec l'application de démonstration en direct. Avant de l'utiliser, assurez-vous que:
- Vous utilisez Chrome 80 ou une version ultérieure.
- Vous devez installer l'application Web avant d'activer la synchronisation périodique en arrière-plan.
Concepts et utilisation
La synchronisation périodique en arrière-plan vous permet d'afficher du contenu récent lorsqu'une application Web progressive ou une page compatible avec un service worker est lancée. Pour ce faire, il télécharge des données en arrière-plan lorsque l'application ou la page n'est pas utilisée. Cela empêche le contenu de l'application d'être actualisé après le lancement pendant la visualisation. Mieux encore, il empêche l'application d'afficher une icône de chargement avant l'actualisation.
Sans synchronisation en arrière-plan périodique, les applications Web doivent utiliser d'autres méthodes pour télécharger des données. Un exemple courant consiste à utiliser une notification push pour réveiller un service worker. L'utilisateur est interrompu par un message indiquant, par exemple, que de nouvelles données sont disponibles. La mise à jour des données est essentiellement un effet secondaire. Vous pouvez toujours utiliser les notifications push pour les informations vraiment importantes, comme les actualités en temps réel.
La synchronisation périodique en arrière-plan est facilement confondue avec la synchronisation en arrière-plan. Bien que leurs noms soient similaires, leurs cas d'utilisation sont différents. Entre autres, la synchronisation en arrière-plan est généralement utilisée pour renvoyer des données à un serveur lorsqu'une requête précédente a échoué.
Obtenir un bon engagement utilisateur
Si elle est mal effectuée, la synchronisation périodique en arrière-plan peut gaspiller les ressources des utilisateurs. Avant de la publier, Chrome l'a soumise à une période d'essai pour s'assurer qu'elle était correcte. Cette section explique certaines des décisions de conception prises par Chrome pour rendre cette fonctionnalité aussi utile que possible.
La première décision prise par Chrome lors de la conception est qu'une application Web ne peut utiliser la synchronisation périodique en arrière-plan qu'après qu'une personne l'a installée sur son appareil et l'a lancée en tant qu'application distincte. La synchronisation périodique en arrière-plan n'est pas disponible pour un onglet standard dans Chrome.
De plus, Chrome ne souhaite pas que les applications Web inutilisées ou rarement utilisées consomment inutilement de la batterie ou des données. Chrome a donc conçu une synchronisation en arrière-plan périodique de sorte que les développeurs doivent la gagner en apportant de la valeur à leurs utilisateurs. Concrètement, Chrome utilise un score d'engagement du site (about://site-engagement/) pour déterminer si et à quelle fréquence des synchronisations périodiques en arrière-plan peuvent se produire pour une application Web donnée. En d'autres termes, un événement periodicsync ne se déclenchera pas du tout, sauf si le score d'engagement est supérieur à zéro et que sa valeur affecte la fréquence à laquelle l'événement periodicsync se déclenche. Cela garantit que les seules applications qui se synchronisent en arrière-plan sont celles que vous utilisez activement.
La synchronisation périodique en arrière-plan présente certaines similitudes avec les API et les pratiques existantes sur les plates-formes populaires. Par exemple, la synchronisation en arrière-plan ponctuelle et les notifications push permettent à la logique d'une application Web de durer un peu plus longtemps (via son service worker) après qu'un utilisateur a fermé la page. Sur la plupart des plates-formes, il est courant que les utilisateurs aient installé des applications qui accèdent régulièrement au réseau en arrière-plan pour offrir une meilleure expérience utilisateur en cas de mises à jour critiques, de préchargement de contenu, de synchronisation de données, etc. De même, la synchronisation périodique en arrière-plan prolonge également la durée de vie de la logique d'une application Web pour qu'elle s'exécute à intervalles réguliers, pendant quelques minutes à la fois.
Si le navigateur permettait cela de se produire fréquemment et sans restriction, cela pourrait poser des problèmes de confidentialité. Voici comment Chrome a géré ce risque pour la synchronisation périodique en arrière-plan:
- L'activité de synchronisation en arrière-plan ne se produit que sur un réseau auquel l'appareil s'est déjà connecté. Chrome recommande de ne se connecter qu'aux réseaux gérés par des parties fiables.
- Comme pour toutes les communications Internet, la synchronisation en arrière-plan périodique révèle les adresses IP du client, du serveur avec lequel il communique et du nom du serveur. Pour réduire cette exposition à peu près à ce qu'elle serait si l'application ne se synchronisait que lorsqu'elle était au premier plan, le navigateur limite la fréquence des synchronisations en arrière-plan d'une application en fonction de la fréquence à laquelle l'utilisateur utilise cette application. Si l'utilisateur cesse d'interagir fréquemment avec l'application, la synchronisation périodique en arrière-plan ne se déclenche plus. Il s'agit d'une amélioration nette par rapport à l'état actuel des applications spécifiques à la plate-forme.
Quand peut-elle être utilisée ?
Les règles d'utilisation varient selon le navigateur. Pour résumer les points ci-dessus, Chrome impose les exigences suivantes à la synchronisation périodique en arrière-plan:
- Score d'engagement utilisateur spécifique.
- Présence d'un réseau précédemment utilisé.
Le calendrier des synchronisations n'est pas contrôlé par les développeurs. La fréquence de synchronisation correspondra à la fréquence d'utilisation de l'application. Notez que ce n'est pas le cas pour les applications spécifiques à une plate-forme pour le moment. Il tient également compte de l'état de l'alimentation et de la connectivité de l'appareil.
Quand l'utiliser ?
Lorsque votre service worker se réveille pour gérer un événement periodicsync, vous avez la possibilité de demander des données, mais pas l'obligation de le faire. Lorsque vous gérez l'événement, vous devez prendre en compte les conditions du réseau et l'espace de stockage disponible, et télécharger différentes quantités de données en réponse. Vous pouvez utiliser les ressources suivantes pour vous aider:
- API Network Information
- Détecter le mode Économiseur de données
- Estimer l'espace de stockage disponible
Autorisations
Une fois le service worker installé, utilisez l'API Permissions pour interroger periodic-background-sync. Vous pouvez le faire depuis une fenêtre ou un contexte de service worker.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Enregistrement d'une synchronisation périodique
Comme indiqué précédemment, la synchronisation périodique en arrière-plan nécessite un service worker. Récupérez un PeriodicSyncManager à l'aide de ServiceWorkerRegistration.periodicSync et appelez register() dessus. L'enregistrement nécessite à la fois une balise et un intervalle de synchronisation minimal (minInterval). La balise identifie la synchronisation enregistrée afin que plusieurs synchronisations puissent être enregistrées. Dans l'exemple ci-dessous, le nom de la balise est 'content-sync' et minInterval correspond à un jour.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Vérifier un enregistrement
Appelez periodicSync.getTags() pour récupérer un tableau de balises d'enregistrement. Dans l'exemple ci-dessous, les noms de tags permettent de confirmer que la mise à jour du cache est active et d'éviter une nouvelle mise à jour.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Vous pouvez également utiliser getTags() pour afficher la liste des inscriptions actives sur la page des paramètres de votre application Web, afin que les utilisateurs puissent activer ou désactiver des types de mises à jour spécifiques.
Répondre à un événement de synchronisation en arrière-plan périodique
Pour répondre à un événement périodique de synchronisation en arrière-plan, ajoutez un gestionnaire d'événements periodicsync à votre service worker. L'objet event qui lui est transmis contiendra un paramètre tag correspondant à la valeur utilisée lors de l'enregistrement. Par exemple, si une synchronisation périodique en arrière-plan a été enregistrée sous le nom 'content-sync', event.tag sera 'content-sync'.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Supprimer l'enregistrement d'une synchronisation
Pour mettre fin à une synchronisation enregistrée, appelez periodicSync.unregister() avec le nom de la synchronisation que vous souhaitez désenregistrer.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
Voici un bref aperçu des interfaces fournies par l'API Periodic Background Sync.
PeriodicSyncEvent. Transmis au gestionnaire d'événementsServiceWorkerGlobalScope.onperiodicsyncà un moment choisi par le navigateur.PeriodicSyncManager. Enregistre et désenregistre les synchronisations périodiques, et fournit des tags pour les synchronisations enregistrées. Récupérez une instance de cette classe à partir de la propriété ServiceWorkerRegistration.periodicSync.ServiceWorkerGlobalScope.onperiodicsync: enregistre un gestionnaire pour recevoirPeriodicSyncEvent.ServiceWorkerRegistration.periodicSync: renvoie une référence àPeriodicSyncManager.
Exemple
Mise à jour du contenu...
L'exemple suivant utilise une synchronisation périodique en arrière-plan pour télécharger et mettre en cache les articles à jour d'un site d'actualités ou d'un blog. Notez le nom du tag, qui indique le type de synchronisation ('update-articles'). L'appel à updateArticles() est encapsulé dans event.waitUntil() afin que le service worker ne s'arrête pas avant le téléchargement et le stockage des articles.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Ajouter une synchronisation périodique en arrière-plan à une application Web existante
Cet ensemble de modifications était nécessaire pour ajouter une synchronisation périodique en arrière-plan à une PWA existante. Cet exemple inclut un certain nombre d'instructions de journalisation utiles qui décrivent l'état de la synchronisation en arrière-plan périodique dans l'application Web.
Débogage
Il peut être difficile d'obtenir une vue de bout en bout de la synchronisation périodique en arrière-plan lors des tests en local. Les informations sur les enregistrements actifs, les intervalles de synchronisation approximatifs et les journaux des événements de synchronisation passés fournissent un contexte précieux lors du débogage du comportement de votre application Web. Heureusement, vous pouvez trouver toutes ces informations via une fonctionnalité expérimentale dans les outils pour les développeurs Chrome.
Enregistrer l'activité locale
La section Synchronisation périodique en arrière-plan de DevTools est organisée autour des événements clés du cycle de vie de la synchronisation périodique en arrière-plan: inscription à la synchronisation, exécution d'une synchronisation en arrière-plan et désinscription. Pour obtenir des informations sur ces événements, cliquez sur Démarrer l'enregistrement.
Lors de l'enregistrement, les entrées apparaissent dans les outils de développement correspondant aux événements, avec le contexte et les métadonnées enregistrés pour chacun d'eux.
Une fois l'enregistrement activé, il reste activé pendant trois jours maximum, ce qui permet à DevTools de capturer des informations de débogage locales sur les synchronisations en arrière-plan qui peuvent avoir lieu, même des heures plus tard.
Simuler des événements
Bien que l'enregistrement de l'activité en arrière-plan puisse être utile, il peut arriver que vous souhaitiez tester votre gestionnaire periodicsync immédiatement, sans attendre qu'un événement se déclenche à sa cadence normale.
Pour ce faire, accédez à la section Service Workers dans le panneau "Application" de Chrome DevTools. Le champ Synchronisation périodique vous permet de fournir une balise à utiliser pour l'événement et de le déclencher autant de fois que vous le souhaitez.
Utiliser l'interface des outils pour les développeurs
À partir de Chrome 81, une section Synchronisation périodique en arrière-plan apparaîtra dans le panneau Application des outils de développement.
