Synchronisez les données de votre application Web en arrière-plan pour une expérience semblable à celle de votre application
Avez-vous déjà été dans l'une des situations suivantes ?
- Conduire dans un train ou le métro avec des connexions irrégulières ou inexistantes
- L'appareil a été limité par votre opérateur parce que vous avez regardé trop de vidéos
- Vivre dans un pays où la bande passante a du mal à répondre à la demande
Si c'est le cas, vous avez certainement ressenti une certaine frustration face à certaines tâches sur le Web, et vous vous êtes demandé pourquoi les applications spécifiques à une plate-forme s'avèrent si souvent plus efficaces dans ces scénarios. Les applications spécifiques à une plate-forme peuvent récupérer à l'avance des contenus à jour, tels que des articles d'actualité ou des informations météorologiques. Même s'il n'y a pas de réseau 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 régulièrement les données en arrière-plan, ce qui les rapproche du comportement d'une application spécifique à une 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, vérifiez les points suivants:
- 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 lors du lancement d'une progressive web app ou d'une page basée sur un service worker. Pour ce faire, il télécharge les données en arrière-plan lorsque l'application ou la page n'est pas utilisée. Cela empêche que le contenu de l'application ne s'actualise après le lancement pendant qu'elle est affichée. Mieux encore, cela empêche l'application d'afficher une icône de chargement de contenu avant l'actualisation.
Sans synchronisation périodique en arrière-plan, les applications Web doivent utiliser d'autres méthodes pour télécharger les données. Un exemple courant consiste à utiliser une notification push pour activer un service worker. L'utilisateur est interrompu par un message du type "nouvelles données disponibles". La mise à jour des données est essentiellement un effet secondaire. Vous avez toujours la possibilité d'utiliser les notifications push pour les informations vraiment importantes, telles que les alertes info importantes.
Une synchronisation périodique en arrière-plan peut facilement être confondue avec la synchronisation en arrière-plan. Bien qu'ils portent des noms similaires, leurs cas d'utilisation sont différents. Entre autres choses, la synchronisation en arrière-plan est le plus souvent utilisée pour renvoyer des données à un serveur lorsqu'une requête précédente a échoué.
Optimiser l'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 a mis en place 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 de conception prise par Chrome 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 dans le contexte d'un onglet standard dans Chrome.
De plus, Chrome ne souhaite pas que les applications Web inutilisées ou rarement utilisées consomment inutilement la batterie ou les données. C'est pourquoi Chrome a conçu une synchronisation périodique en arrière-plan de sorte que les développeurs l'obtiennent en offrant une valeur ajoutée à leurs utilisateurs. Concrètement, Chrome utilise un score d'engagement sur le site (about://site-engagement/) pour déterminer si des synchronisations en arrière-plan périodiques peuvent avoir lieu pour une application Web donnée, et à quelle fréquence. En d'autres termes, un événement periodicsync ne sera déclenché que 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 synchronisées en arrière-plan sont celles que vous utilisez activement.
La synchronisation périodique en arrière-plan présente des similitudes avec les API et les pratiques existantes sur les plates-formes populaires. Par exemple, la synchronisation ponctuelle en arrière-plan et les notifications push permettent à la logique d'une application Web de durer un peu plus longtemps (via son service worker) après la fermeture de 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 afin d'améliorer l'expérience utilisateur pour les mises à jour critiques, le préchargement du 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 à des périodes régulières de quelques minutes à la fois.
Si le navigateur autorise cette action fréquente et sans restrictions, cela peut entraîner des problèmes de confidentialité. Voici comment Chrome a éliminé ce risque de 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 vous connecter qu'aux réseaux gérés par des tiers dignes de confiance.
- Comme pour toutes les communications Internet, la synchronisation périodique en arrière-plan révèle les adresses IP du client, le serveur avec lequel il communique et le nom du serveur. Pour réduire cette exposition à ce qu'elle serait si l'application ne se synchronisait que lorsqu'elle était exécutée au premier plan, le navigateur limite la fréquence de synchronisation en arrière-plan d'une application afin de l'aligner sur la fréquence à laquelle l'utilisateur l'utilise. Si une personne cesse d'interagir fréquemment avec l'application, la synchronisation périodique en arrière-plan cessera de se déclencher. Il s'agit d'une nette amélioration par rapport au statu quo dans les applications spécifiques à une plate-forme.
Quand peut-il être utilisé ?
Les règles d'utilisation varient selon le navigateur. Pour résumer, Chrome impose les exigences suivantes concernant la synchronisation périodique en arrière-plan:
- Score d'engagement utilisateur spécifique.
- Présence d'un réseau déjà utilisé
La fréquence des synchronisations n'est pas contrôlée par les développeurs. La fréquence de synchronisation s'aligne sur la fréquence d'utilisation de l'application. Notez que cette opération n'est actuellement pas disponible pour les applications spécifiques à une plate-forme. Elle prend également en compte l'état d'alimentation et de 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 vous n'êtes pas obligé 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, puis télécharger différentes quantités de données en réponse. Pour vous aider, vous pouvez utiliser les ressources suivantes:
- 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 à partir d'une fenêtre ou d'un 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 un tag et un intervalle de synchronisation minimal (minInterval). Le tag 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 tags d'enregistrement. L'exemple ci-dessous utilise des noms de tags pour confirmer que la mise à jour du cache est active afin d'éviter toute 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 périodique en arrière-plan
Pour répondre à un événement de synchronisation périodique en arrière-plan, ajoutez un gestionnaire d'événements periodicsync à votre service worker. L'objet event qui lui est transmis contient 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.
});
Annuler l'enregistrement d'une synchronisation
Pour mettre fin à une synchronisation enregistrée, appelez periodicSync.unregister() avec le nom de la synchronisation dont vous souhaitez annuler l'enregistrement.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
Voici un aperçu rapide des interfaces fournies par l'API Periodic Background Sync.
PeriodicSyncEvent: transmise au gestionnaire d'événementsServiceWorkerGlobalScope.onperiodicsyncà l'heure choisie par le navigateur.PeriodicSyncManager: enregistre et annule l'enregistrement des 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 auPeriodicSyncManager.
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 derniers articles d'un site d'actualités ou d'un blog. Notez le nom du tag, qui indique le type de synchronisation dont il s'agit ('update-articles'). L'appel à updateArticles() est encapsulé dans event.waitUntil(), de sorte que le service worker ne se termine 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 périodique en arrière-plan 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 locaux. 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 grâce à une fonctionnalité expérimentale des outils pour les développeurs Chrome.
Enregistrement de l'activité locale
La section Periodic Background Sync (Synchronisation périodique en arrière-plan) des outils de développement 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 annulation de l'enregistrement. Pour obtenir des informations sur ces événements, cliquez sur Start recording (Démarrer l'enregistrement).
Pendant l'enregistrement, les entrées apparaissent dans les outils de développement en fonction des événements. Le contexte et les métadonnées sont enregistrés pour chacun d'eux.
Une fois l'enregistrement activé, il le reste pendant trois jours maximum, ce qui permet aux outils de développement de capturer les informations de débogage locales sur les synchronisations en arrière-plan qui pourraient avoir lieu, même des heures par la suite.
Simuler des événements
Bien que l'enregistrement de l'activité en arrière-plan puisse être utile, il peut être utile de tester immédiatement votre gestionnaire periodicsync, sans attendre le déclenchement d'un événement à son rythme normal.
Pour ce faire, accédez à la section Service workers du panneau "Application" dans les outils pour les développeurs Chrome. Le champ Periodic Sync (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 de développement
À partir de Chrome 81, une section Periodic Background Sync (Synchronisation périodique en arrière-plan) s'affichera dans le panneau Application des outils de développement.
