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

Synchronisez les données de votre application Web en arrière-plan pour une expérience plus native

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 ContenuEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Suite 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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Suite 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.

Sans synchronisation régulière en arrière-plan, les applications Web doivent utiliser des méthodes alternatives pour télécharger les données. Un exemple courant est l'utilisation d'une notification push pour réveiller un technicien de service. 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 mises à jour vraiment importantes, comme les grandes nouvelles de dernière heure.

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 serveurLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Suite cuando una solicitud anterior ha fallado.

Obtenez le bon engagement des utilisateurs

Si elle n'est pas effectuée correctement, la synchronisation périodique en arrière-plan peut gaspiller les ressources de l'utilisateur. Avant de le lancer, Chrome l'a soumis à une période de test 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'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énementConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Suite 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 gensLas personas son personalidades imaginarias que representan a un determinado grupo objetivo. En el marketing online, las personas ayudan a entender mejor a los usuarios de un portal web o a los clientes de una tienda online. Concepto de personas Para que las personas puedan ejercer su efecto positivo, deben ser lo más detalladas viable. Esto conlleva un término exhaustiva de los grupos destinatarios para conseguir datos empíricos. La próxima Suite hayan instalado aplicaciones que acceden periódicamente a la red en segundo plano para brindar una mejor expérience utilisateurEl término experiencia de usuario (UX) se refiere a la experiencia que un usuario tiene con un producto o servicio. En cuanto a Internet, el término se usa frecuentemente al examinar la experiencia que los usuarios disponen con una web. Esto además puede ser en referencia al uso de un dispositivo smartphone (UX smartphone). Items de la experiencia del usuario La experiencia del usuario y la usabilidad se usan frecuentemente Suite 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 navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite 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.
• Comme pour toutes les communications Internet, la synchronisation périodique en arrière-plan révèle les adresses IP du client, le serveur auquel il s'adresse et le 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 pour s'aligner sur la fréquence à laquelle la personne utilise cette application. Si la personne cesse fréquemment d'interagir avec l'application, la synchronisation périodique en arrière-plan ne sera plus activée. Il s'agit d'une nette amélioration par rapport au statu quo des applications natives.

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 douteConcepto de Query¿Qué es una Query?Una query, en inglés, es una definición que significa pregunta. Trasladando este concepto al marketing digital y a internet, se traduce como el concepto que un usuario escribe en un buscador, véase Google, cuando desea realizar una búsqueda usando keywords o palabras clave. Es la serie de términos reales que se utilizan al momento de ir en busca de información en estos portales.Cuando un consumidor Suite({
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 cacheUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y Suite 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 BlogEl término blog se usa para describir un diario virtual en Internet. El autor de un blogger puede publicar posts sobre cualquier tema. Los posts suelen estar presente de forma cronológica. El estilo de redacción de un blog suele ser informal y se escribe en primera persona. No obstante, además son posibles otros estilos, por ejemplo en el caso de los periódicos online, en los que la atención se centra Suite. 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éesLos metadatos son datos estructurados que contienen información sobre una fuente como, por ejemplo, un libro o un documento web. Gracias a los metadatos resulta mucho más fácil hallar la fuente de información dado que contienen datos sobre el título, el autor, la fecha de publicación, la descripción, etc. Se utilizan en librerías pero además para la estadística y la ingeniería de software. Metadatos en WWW Los metadatos se utilizan Suite 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.