Expériences hors ligne plus riches avec l'API Background Periodic Sync

Sincronice los datos de su aplicación la toile en segundo plano para una experiencia más nativa

10 novembre 2019
Mise à jour 18 août 2020

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

• Voyager en train ou en métro avec une connectivité instable ou inexistante
• Votre opérateur l'a accéléré après avoir regardé trop de vidéos
• Vivre dans un pays où la bande passante a du mal à répondre à la demande

Si es así, seguramente ha sentido la frustración de hacer ciertas cosas en la web y se preguntó por qué las aplicaciones nativas a menudo funcionan mejor en estos escenarios. Las aplicaciones nativas pueden obtener Contenu nuevo, como artículos de noticias o información meteorológica, antes de tiempo. Incluso si no hay red en el metro, aún puede leer las noticias.

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 rapproche les applications Web du comportement d'une application native.

État actuel

La siguiente tabla explica el estado actual de la API de sincronización periódica en segundo plano.

Il a passé	État
1. Créez un explicatif	Compléter
2. Créer une ébauche de spécification initiale	Compléter
3. Recueillez les commentaires et répétez la conception	En progrès
4. Preuve de l'origine	Compléter
5. Lancez	Chrome 80

Essayez-le

Vous pouvez tester la synchronisation périodique en arrière-plan avec le application de démonstration en direct. Avant utilisation, assurez-vous que:

• Vous utilisez Chrome 80 ou version ultérieure.
• Votre
  Installer sur PC
  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 nouveau contenu lors du lancement d'une application Web progressive ou d'une page prise en charge par un technicien de service. 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 de se mettre à jour après le lancement pendant son affichage. Mieux encore, empêchez l'application d'afficher un spinner de contenu avant la mise à jour.

Sin una sincronización periódica en segundo plano, las aplicaciones web deben utilizar métodos alternativos para descargar datos. Un ejemplo común es el uso de una notificación de inserción para despertar a un trabajador del servicio. El Nom d'utilisateur es interrumpido por un mensaje como «nuevos datos disponibles». Actualizar los datos es esencialmente un efecto secundario. Todavía tiene la opción de usar notificaciones automáticas para actualizaciones realmente importantes, como noticias de última hora importantes.

La sincronización periódica en segundo plano se confunde fácilmente con la sincronización en segundo plano. Aunque tienen nombres similares, sus casos de uso son diferentes. Entre otras cosas, la sincronización en segundo plano se usa más comúnmente para reenviar datos a un serveur cuando una solicitud anterior ha fallado.

Obtenez le bon engagement des utilisateurs

Si se hace de forma incorrecta, la sincronización periódica en segundo plano podría suponer un desperdicio de recursos de los usuarios. Antes de lanzarlo, Chrome lo sometió a un período de prueba para asegurarse de que era correcto. Esta sección explica algunas de las decisiones de diseño que tomó Chrome para que esta función être lo más útil posible.

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'une fois que quelqu'un 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 normal dans Chrome.

De plus, étant donné que Chrome ne souhaite pas que les applications Web inutilisées ou rarement utilisées consomment gratuitement de la batterie ou des données, Chrome a conçu une synchronisation en arrière-plan régulière afin que les développeurs doivent la gagner en offrant de la valeur à leurs utilisateurs. Plus précisément, Chrome utilise un score d'interaction avec le site
(chrome://site-engagement/) pour déterminer si et à quelle fréquence effectuer des synchronisations périodiques en arrière-plan pour une application Web donnée. En d'autres termes, un periodicsync le un événement no se activará en absoluto a menos que la puntuación de participación sea mayor que cero, y su valor afecta la frecuencia con la que
periodicsync les incendies d'événement. Cela garantit que les seules applications qui se synchronisent en arrière-plan sont celles que vous utilisez activement.

La sincronización periódica en segundo plano comparte algunas similitudes con las API y las prácticas existentes en plataformas populares. Por ejemplo, la sincronización en segundo plano única y las notificaciones automáticas permiten que la lógica de una aplicación web viva un poco más (a través de su trabajador de servicio) después de que una persona ha cerrado la página. En la mayoría de las plataformas, es común que las gens hayan instalado aplicaciones que acceden periódicamente a la red en segundo plano para brindar una mejor expérience utilisateur para actualizaciones críticas, obtención previa de contenido, sincronización de datos, etc. De manera similar, la sincronización periódica en segundo plano también extiende la vida útil de la lógica de una aplicación web para que se ejecute en períodos regulares durante lo que pueden ser unos pocos minutos a la vez.

Si il le navigateur permitiera que esto ocurriera con frecuencia y sin restricciones, podría generar algunos problemas de privacidad. Así es como Chrome ha abordado este riesgo de sincronización periódica en segundo plano:

• L'activité de synchronisation en arrière-plan se produit uniquement sur un réseau auquel l'appareil s'est précédemment connecté. Chrome recommande de se connecter uniquement aux réseaux gérés par des parties de confiance.
• Como ocurre con todas las comunicaciones por Internet, la sincronización periódica en segundo plano revela las direcciones IP del client, el servidor con el que está hablando y el nombre del servidor. Para reducir esta exposición aproximadamente a lo que sería si la aplicación solo se sincronizara cuando estuviera en primer plano, el navegador limita la frecuencia de las sincronizaciones en segundo plano de una aplicación para alinearse con la frecuencia con la que la persona usa esa aplicación. Si la persona deja de interactuar con frecuencia con la aplicación, la sincronización periódica en segundo plano dejará de activarse. Esta es una mejora neta sobre el status quo en las aplicaciones nativas.

Quand peut-il être utilisé?

Les règles d'utilisation varient selon le navigateur. Pour résumer ce qui précède, Chrome impose les exigences suivantes sur la synchronisation périodique en arrière-plan:

• Un score d'engagement utilisateur particulier.
• Présence d'un réseau précédemment utilisé.

Les développeurs ne contrôlent pas la synchronisation des synchronisations. La fréquence de synchronisation s'alignera sur la fréquence d'utilisation de l'application. (Notez que les applications natives ne le font actuellement pas.) Il prend également en compte l'état d'alimentation et de connectivité de l'appareil.

Quand doit-il être utilisé?

Lorsque votre technicien de service se réveille pour conduire un periodicsync événement, vous avez le
chance pour demander des données, mais pas le obligation pour le faire. Lors de la gestion de l'événement, vous devez prendre en compte les conditions du réseau et le stockage disponible, et en réponse télécharger différentes quantités de données. Vous pouvez utiliser les ressources suivantes pour vous aider:

Autorisations

Une fois le service worker installé, utilisez le API des autorisations consulter synchronisation-d'arrière-plan périodique. Vous pouvez le faire à partir d'une fenêtre ou d'un contexte de service worker.

const statut = attendre navigateur.permissions.mettre en doute({
patate douce: 'periodic-background-sync',
});
si (statut.Etat === 'granted') {
} else {
}

Enregistrement d'une synchronisation périodique

Comme déjà mentionné, la synchronisation périodique en arrière-plan nécessite un technicien de service. Récupérer un PeriodicSyncManager utilisant ServiceWorkerRegistration.periodicSync et appeler
S'inscrire () En cela. L'enregistrement nécessite à la fois une balise et un intervalle de synchronisation minimum (minInterval). La balise identifie la synchronisation enregistrée afin que plusieurs synchronisations puissent être enregistrées. Dans l'exemple suivant, le nom de la balise est
'content-sync' et le minInterval c'est un jour.

const enregistrement = attendre navigateur.serviceWorker.prêt;
si ('periodicSync' dans enregistrement) {
  try {
    attendre enregistrement.periodicSync.S'inscrire('content-sync', {
      
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (Erreur) {
    
  }
}

Vérification d'un enregistrement

Appel PeriodicSync.getTags () para recuperar una serie de etiquetas de registro. El siguiente ejemplo utiliza nombres de etiquetas para confirmar que la actualización de la cache está activa para evitar la actualización de nuevo.

const enregistrement = attendre navigateur.serviceWorker.prêt;
si ('periodicSync' dans enregistrement) {
  const tags = attendre enregistrement.periodicSync.getTags();
  
  si (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  
  updateContentOnPageLoad();
}

Vous pouvez aussi utiliser getTags () pour afficher une liste des journaux actifs sur la page de configuration de votre application Web afin que les utilisateurs puissent activer ou désactiver des types spécifiques de mises à jour.

Répondre à un événement récurrent de synchronisation en arrière-plan

Pour répondre à un événement récurrent de synchronisation en arrière-plan, ajoutez un periodicsync gestionnaire d'événements à votre service worker. Les un événement L'objet qui lui est passé contiendra un
étiqueter paramètre qui correspond à la valeur utilisée lors de l'enregistrement. Par exemple, si une synchronisation périodique en arrière-plan a été enregistrée avec le nom 'content-sync', alors
event.tag sera 'content-sync'.

soi.addEventListener('periodicsync', (un événement) => {
si (un événement.étiqueter === 'content-sync') {
un événement.waitUntil(syncContent());
}
});

Annuler 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ésinscrire.

const enregistrement = attendre navigateur.serviceWorker.prêt;
si ('periodicSync' dans enregistrement) {
attendre enregistrement.periodicSync.unregister('content-sync');
}

Interfaces

Voici un bref aperçu des interfaces fournies par l'API Background Periodic Sync.

• PeriodicSyncEvent. Transmis à ServiceWorkerGlobalScope.onperiodicsync gestionnaire d'événements au moment choisi par le navigateur.
• PeriodicSyncManager. Enregistre et annule les synchronisations récurrentes et fournit des étiquettes pour les synchronisations enregistrées. Récupérez une instance de cette classe à partir de la propriété ServiceWorkerRegistration.periodicSync`.
• ServiceWorkerGlobalScope.onperiodicsync. Inscrire un gestionnaire pour recevoir le PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Renvoie une référence au PeriodicSyncManager.

Exemple

Mettre à jour le contenu

El siguiente ejemplo utiliza la sincronización periódica en segundo plano para descargar y almacenar en caché artículos actualizados para un sitio de noticias o Blog. Observe el nombre de la etiqueta, que indica el tipo de sincronización que es ('update-articles'). L'appel à updateArticles () est enveloppé dans event.waitUntil () afin que le technicien de service ne termine pas avant que les éléments ne soient déchargés et stockés.

asynchrone une fonction updateArticles() {
  const articlesCache = attendre caches.open('articles');
  attendre articlesCache.ajouter('/api/articles');
}

soi.addEventListener('periodicsync', (un événement) => {
  si (un événement.étiqueter === 'update-articles') {
    un événement.waitUntil(updateArticles());
  }
});

Ajouter une synchronisation en arrière-plan périodique à une application Web existante

Cet ensemble de changements étaient nécessaires pour ajouter une synchronisation en arrière-plan périodique à un PWA existant. Cet exemple comprend un certain nombre d'instructions de journal utiles qui décrivent l'état de la synchronisation périodique en arrière-plan dans l'application Web.

Dépuration

Il peut être difficile d'obtenir une vue de bout en bout de la synchronisation périodique en arrière-plan lors de l'exécution d'un test local. Les informations sur les journaux actifs, les intervalles de synchronisation approximatifs et les journaux d'é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 Chrome DevTools.

Registre d'activité locale

Les Synchronisation périodique en arrière-plan La section DevTools est organisée autour des jalons du cycle de vie périodique de la synchronisation en arrière-plan: inscrivez-vous pour synchroniser, synchroniser en arrière-plan et désinscrire. Pour plus d'informations sur ces événements, cliquez sur Commencer l'enregistrement.

Durante la grabación, las entradas aparecerán en DevTools correspondientes a los eventos, con el contexto y los métadonnées registrados para cada uno.

Une fois que vous avez activé l'enregistrement une fois, il restera activé jusqu'à trois jours, permettant à DevTools de capturer des informations de débogage locales sur les synchronisations en arrière-plan qui pourraient avoir lieu, même des heures dans le futur.

Simulation d'événements

Bien que la journalisation de l'activité en arrière-plan puisse être utile, vous souhaiterez parfois tester votre periodicsync gestionnaire immédiatement, sans attendre qu'un événement se déclenche à sa cadence normale.

Vous pouvez le faire grâce au Travailleurs de service dans le panneau Application dans Chrome DevTools. Les Synchronisation périodique Le champ vous permet de fournir une étiquette pour que vous puissiez utiliser l'événement et le déclencher autant de fois que vous le souhaitez.

À partir de Chrome 81, vous verrez un Synchronisation périodique en arrière-plan section dans DevTools Demander panneau.