Expériences hors connexion enrichies grâce à l'API Periodic Background Sync

Synchronisez les données de votre application Web en arrière-plan pour une expérience plus semblable à celle d'une application

Jeff Posnick

Joe Medley

Avez-vous déjà été dans l'une des situations suivantes ?

• Connexion en train ou en métro instable ou inexistante
• L'application a été limitée par votre opérateur après avoir 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 la frustration de recevoir certaines tâches effectuées sur le Web, et se demandaient pourquoi les applications spécifiques à certaines plates-formes étaient si souvent plus performantes. dans ces scénarios. Les applications spécifiques à une plate-forme peuvent récupérer des contenus récents, comme des articles d'actualité ou la météo des informations à l'avance. 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 se synchroniser régulièrement données en arrière-plan, ce qui permet aux applications Web de se rapprocher du comportement d'une application l'application.

Essayer

Vous pouvez essayer la synchronisation périodique en arrière-plan avec la démonstration en direct. l'application Nest. Avant de l'utiliser, vérifiez les points suivants:

• Vous utilisez Chrome 80 ou une version ultérieure.
• Toi 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 progressive web app ou soutenue par un service worker. Pour ce faire, il télécharge des données dans en arrière-plan lorsque l'application ou la page n'est pas utilisée. Cela empêche l'accès son contenu ne s'actualise plus après son lancement. Mieux encore, il 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 des données. Un exemple courant consiste à activer un service à l'aide d'une notification push ou un nœud de calcul. 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 avez toujours la possibilité à l'aide des notifications push pour les mises à jour vraiment importantes, les alertes info.

Il est facile de confondre la synchronisation périodique en arrière-plan et la synchronisation en arrière-plan. Bien qu'ils ont des noms similaires, leurs cas d'utilisation sont différents. Entre autres, la synchronisation en arrière-plan est le plus souvent utilisée pour renvoyer des données à un serveur lorsqu'une La demande précédente a échoué.

Susciter l'intérêt et l'interaction des utilisateurs

si elle est mal effectuée, la synchronisation périodique en arrière-plan peut gaspiller ressources. Avant de la publier, Chrome l'a soumise à une période d'essai que c'était correct. Cette section explique certaines des décisions de conception que Chrome prend pour rendre cette fonctionnalité aussi utile que possible.

La première décision de conception de Chrome est qu'une application Web ne peut utiliser en arrière-plan après qu'une personne l'a installée sur son appareil 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, étant donné que Chrome ne veut pas que les applications Web inutilisées ou rarement utilisées soient consomment de la batterie ou des données, Chrome a conçu une synchronisation périodique en arrière-plan les développeurs doivent l'obtenir en apportant de la valeur à leurs utilisateurs. Concrètement, Chrome utilise le score d'engagement du site. (about://site-engagement/) pour déterminer si des synchronisations périodiques en arrière-plan peuvent se produire et à quelle fréquence pour une application Web donnée. En d'autres termes, un événement periodicsync ne se déclenchera pas du tout, sauf si l'engagement est supérieur à zéro, et sa valeur a une incidence sur la fréquence à laquelle L'événement periodicsync se déclenche. Ainsi, seules les applications qui se synchronisent dans le arrière-plan sont ceux que vous utilisez activement.

La synchronisation périodique en arrière-plan présente certaines similitudes avec les API existantes. pratiques sur les plates-formes populaires. Par exemple, la synchronisation ponctuelle en arrière-plan les notifications push permettent à la logique d'une application Web de vivre un peu plus longtemps service worker) après qu'une personne a fermé la page. Sur la plupart des plateformes, il est Il est courant que les gens installent des applications qui accèdent régulièrement au réseau dans en arrière-plan afin d'améliorer l'expérience utilisateur en cas de 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 qui prolonge la durée de vie de la logique d'une application Web pour qu'elle s'exécute à intervalles réguliers peuvent prendre quelques minutes à la fois.

Si le navigateur autorise cette opération fréquemment et sans restrictions, peut entraîner des problèmes de confidentialité. Voici comment Chrome a résolu ce problème 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 connecté précédemment. Chrome recommande de ne se connecter qu'aux réseaux gérés par des tiers dignes de confiance.
• Comme pour toute communication Internet, une synchronisation périodique en arrière-plan révèle l'adresse IP les adresses du client, le serveur auquel il communique et le nom du Google Cloud. Pour réduire le niveau d'exposition à ce qu'il serait synchronisée lorsqu'elle était au premier plan, le navigateur limite la fréquence l'arrière-plan se synchronise en fonction de la fréquence à laquelle la personne utilise l'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 au statu quo applications.

Quand les utiliser ?

Les règles d'utilisation varient selon les navigateurs. Pour résumer, Chrome place la Exigences suivantes concernant la synchronisation périodique en arrière-plan:

• Un score d'engagement utilisateur particulier.
• 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 la fréquence de synchronisation dépendra de la fréquence d'utilisation de l'application. Notez que les applications spécifiques à la plate-forme ne le font actuellement pas.) Elle prend également la puissance de l'appareil et l'état de la connectivité.

Quand l'utiliser ?

Lorsque votre service worker se réveille pour gérer un événement periodicsync, vous avez la la possibilité de demander des données, mais pas l'obligation de le faire. Lors de la manipulation vous devez placer les conditions du réseau et l'espace de stockage disponible de prendre en compte et de 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
• Estimation de l'espace de stockage disponible

Autorisations

Une fois le service worker installé, utilisez le menu déroulant Permissions de l'API pour effectuer des requêtes pour periodic-background-sync. Vous pouvez le faire depuis une fenêtre le contexte 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.
}

Enregistrement d'une synchronisation périodique

Comme nous l'avons déjà indiqué, la synchronisation périodique en arrière-plan nécessite un service worker. Récupérer un PeriodicSyncManager avec ServiceWorkerRegistration.periodicSync et appeler register(). L'enregistrement nécessite à la fois une balise et intervalle de synchronisation (minInterval). La balise identifie la synchronisation enregistrée afin d'enregistrer plusieurs synchronisations. Dans l'exemple ci-dessous, le nom de la balise est 'content-sync' et minInterval durent 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. La l'exemple ci-dessous utilise les noms de tag pour confirmer que la mise à jour du cache est active afin d'éviter mise à jour à nouveau.

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 votre site Web. la page des paramètres de l'application afin que les utilisateurs puissent activer ou désactiver des types mises à jour.

Répondre à un événement périodique de synchronisation en arrière-plan

Pour répondre à un événement périodique de synchronisation en arrière-plan, ajoutez un événement 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 un la synchronisation périodique en arrière-plan a été enregistrée sous le nom 'content-sync', puis 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.
});

Annulation de l'enregistrement d'une synchronisation

Pour mettre fin à une synchronisation enregistrée, appelez periodicSync.unregister() avec le nom du 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 bref aperçu des interfaces fournies par l'interface de mise à jour périodique. API de synchronisation.

• PeriodicSyncEvent Elles sont transmises au gestionnaire d'événements ServiceWorkerGlobalScope.onperiodicsync au niveau à l'heure choisie par le navigateur.
• PeriodicSyncManager Enregistre et annule l'enregistrement des synchronisations périodiques et fournit des tags pour les enregistrements synchronisations. Récupérer une instance de cette classe à partir de ServiceWorkerRegistration.periodicSync .
• ServiceWorkerGlobalScope.onperiodicsync Enregistre un gestionnaire pour recevoir PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync Renvoie une référence à PeriodicSyncManager.

Exemple

Mise à jour du contenu...

L'exemple suivant utilise la synchronisation périodique en arrière-plan pour télécharger et mettre en cache des articles récents 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 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 a été nécessaire pour ajouter une synchronisation périodique en arrière-plan vers une PWA existante Cet exemple inclut un certain nombre d'instructions de journalisation utiles qui décrivent l'état de synchronisation périodique en arrière-plan dans l'application Web.

Débogage

Obtenir une vue de bout en bout de la synchronisation périodique en arrière-plan peut s'avérer difficile tout en effectuant des tests en local. Informations sur les enregistrements actifs, synchronisation approximative et les journaux des événements de synchronisation précédents fournissent un contexte précieux lors du débogage le comportement de votre application Web. Heureusement, vous pouvez trouver toutes ces informations via une fonctionnalité expérimentale des outils pour les développeurs Chrome.

Enregistrement de l'activité locale

La section Synchronisation périodique en arrière-plan des outils de développement s'organise autour d'événements clés dans le cycle de vie périodique de la synchronisation en arrière-plan: inscription à la synchronisation, exécution d'une la synchronisation en arrière-plan et l'annulation de l'enregistrement. Pour obtenir des informations sur ces événements, Cliquez sur Démarrer l'enregistrement.

</ph> <ph type="x-smartling-placeholder">

Pendant l'enregistrement, les entrées s'affichent dans les outils de développement correspondant aux événements, avec le contexte et les métadonnées enregistrés pour chacun.

</ph> <ph type="x-smartling-placeholder">

Une fois activé, l'enregistrement reste activé pendant trois jours au maximum. Permettre aux outils de développement de capturer les informations de débogage local sur les synchronisations en arrière-plan qui pourraient avoir lieu, même à quelques heures dans le futur.

Simuler des événements

L'enregistrement de l'activité en arrière-plan peut être utile, mais vous Vous souhaitez tester votre gestionnaire periodicsync immédiatement, sans attendre la fin se déclenchera normalement.

Pour ce faire, accédez à la section Service workers du panneau "Application" dans les outils pour les développeurs Chrome. Le champ Synchronisation périodique vous permet de fournir un tag pour la à utiliser et le déclencher autant de fois que vous le souhaitez.

Utiliser l'interface des outils de développement

À partir de Chrome 81, vous verrez une section Synchronisation périodique en arrière-plan dans le Panneau Application des outils de développement