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 ?
- Prendre le train ou le métro avec une connexion intermittente 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 à une 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 si le réseau n'est pas disponible dans le métro, vous pouvez toujours lire les actualités.
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 worker de service. L'utilisateur est interrompu par un message tel que "Nouvelles données 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 couramment 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 n'est pas effectuée correctement, la synchronisation périodique en arrière-plan peut gaspiller les ressources des utilisateurs. Avant de le publier, Chrome l'a soumis à une période d'essai pour s'assurer qu'il était correct. 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 de conception prise par Chrome est qu'une application Web ne peut utiliser la synchronisation en arrière-plan périodique qu'après qu'un utilisateur 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 dans le contexte d'un onglet standard dans Chrome.
De plus, comme 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 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 sur le site (about://site-engagement/) pour déterminer si des synchronisations périodiques en arrière-plan peuvent avoir lieu pour une application Web donnée et à quelle fréquence. 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 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 en arrière-plan périodique 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 pour les mises à jour critiques, le préchargement de contenu, la synchronisation des 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 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'à des réseaux gérés par des tiers 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 correspond à la fréquence d'utilisation de l'application. (Notez que les applications spécifiques à la plate-forme ne le font pas actuellement.) 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 tenir compte des conditions réseau et de 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étection du 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.
}
Enregistrer 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 le 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.
}
}
Valider une inscription
Appelez periodicSync.getTags() pour récupérer un tableau de balises d'enregistrement. L'exemple ci-dessous utilise des noms de balise pour confirmer que la mise à jour du cache est active afin 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 une liste des enregistrements actifs 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 de synchronisation en arrière-plan périodique, 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 en arrière-plan périodique a été enregistrée avec 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 recevoir lePeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Renvoie une référence à l'PeriodicSyncManager.
Exemple
Mettre à jour le 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 de la balise, 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 que les articles ne soient téléchargés et stockés.
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.
Pendant l'enregistrement, des entrées correspondant aux événements s'affichent dans DevTools, avec le contexte et les métadonnées consignés pour chacun.
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 plusieurs heures plus tard.
Simuler des événements
Bien que l'enregistrement de l'activité en arrière-plan puisse être utile, vous souhaiterez parfois 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 s'affiche dans le panneau Application de DevTools.
