mise à jour-diffusion-boîte-de-travail

Lorsque vous répondez à des requêtes avec des entrées en cache, tout en restant rapide, les utilisateurs peuvent voir des données obsolètes.

Le package workbox-broadcast-update fournit un moyen standard d'informer les clients de fenêtre qu'une réponse mise en cache a été mise à jour. Elle est le plus souvent utilisée avec la stratégie StaleWhileRevalidate.

Chaque fois que l'étape de revalidation de cette stratégie récupère une réponse du réseau différente de celle précédemment mise en cache, ce module envoie un message (via postMessage()) à tous les clients Windows compris dans le champ d'application du service worker actuel.

Les clients Windows peuvent écouter les mises à jour et prendre les mesures appropriées, par exemple afficher automatiquement un message l'informant que des mises à jour sont disponibles.

Comment les mises à jour sont-elles déterminées ?

Certains en-têtes des en-têtes mis en cache et des nouveaux objets Response sont comparés. Si l'un des en-têtes a des valeurs différentes, cela est considéré comme une mise à jour.

Par défaut, les en-têtes Content-Length, ETag et Last-Modified sont comparés.

La fonctionnalité Workbox utilise des valeurs d'en-tête au lieu d'une comparaison octet par octet des corps de réponse pour être plus efficace, en particulier pour les réponses potentiellement volumineuses.

Utiliser la mise à jour de diffusion

Cette bibliothèque est destinée à être utilisée avec la stratégie de mise en cache StaleWhileRevalidate, car cette stratégie implique le renvoi immédiat d'une réponse mise en cache, mais fournit également un mécanisme pour mettre à jour le cache de manière asynchrone.

Pour diffuser des mises à jour, il vous suffit d'ajouter broadcastUpdate.BroadcastUpdatePlugin à vos options de stratégie.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [new BroadcastUpdatePlugin()],
  })
);

Dans votre application Web, avant le déclenchement de l'événement DOMContentLoaded, vous pouvez écouter ces événements comme suit:

navigator.serviceWorker.addEventListener('message', async event => {
  // Optional: ensure the message came from workbox-broadcast-update
  if (event.data.meta === 'workbox-broadcast-update') {
    const {cacheName, updatedURL} = event.data.payload;

    // Do something with cacheName and updatedURL.
    // For example, get the cached content and update
    // the content on the page.
    const cache = await caches.open(cacheName);
    const updatedResponse = await cache.match(updatedURL);
    const updatedText = await updatedResponse.text();
  }
});

Format du message

Lorsqu'un écouteur d'événements message est appelé dans votre application Web, la propriété event.data a le format suivant:

{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  // The two payload values vary depending on the actual update:
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

Personnaliser les en-têtes à vérifier

Vous pouvez personnaliser les en-têtes à vérifier en définissant la propriété headersToCheck.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    plugins: [
      new BroadcastUpdatePlugin({
        headersToCheck: ['X-My-Custom-Header'],
      }),
    ],
  })
);

Utilisation avancée

Bien que la plupart des développeurs utilisent workbox-broadcast-update comme plug-in d'une stratégie particulière, comme indiqué ci-dessus, il est possible d'utiliser la logique sous-jacente dans le code du service worker.

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';

const broadcastUpdate = new BroadcastCacheUpdate({
  headersToCheck: ['X-My-Custom-Header'],
});

const cacheName = 'api-cache';
const request = new Request('https://example.com/api');

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(request);
const newResponse = await fetch(request);

broadcastUpdate.notifyIfUpdated({
  cacheName,
  oldResponse,
  newResponse,
  request,
);

Types

BroadcastCacheUpdate

Utilise l'API postMessage() pour informer les fenêtres/onglets ouverts lorsqu'une réponse mise en cache a été mise à jour.

Par souci d'efficacité, les corps de réponse sous-jacents ne sont pas comparés. Seuls les en-têtes de réponse spécifiques sont vérifiés.

Propriétés

  • constructor

    void

    Créez une instance BroadcastCacheUpdate avec un channelName spécifique sur lequel diffuser des messages

    La fonction constructor se présente comme suit : 

    (options?: BroadcastCacheUpdateOptions) => {...}

  • notifyIfUpdated

    void

    Compare deux réponses et envoie un message (via postMessage()) à tous les clients de fenêtre si les réponses diffèrent. Aucune des réponses ne peut être opaque.

    Le message publié a le format suivant (où payload peut être personnalisé via l'option generatePayload avec laquelle l'instance est créée):

    {
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

    La fonction notifyIfUpdated se présente comme suit : 

    (options: CacheDidUpdateCallbackParam) => {...}

    • retours

      Promise<void>

      La résolution est résolue une fois la mise à jour envoyée.

BroadcastCacheUpdateOptions

Propriétés

  • headersToCheck

    string[] facultatif

  • notifyAllClients

    Booléen facultatif

  • generatePayload

    vide facultatif

    La fonction generatePayload se présente comme suit : 

    (options: CacheDidUpdateCallbackParam) => {...}

    • retours

      Enregistrement<stringany>

BroadcastUpdatePlugin

Ce plug-in diffuse automatiquement un message chaque fois qu'une réponse mise en cache est mise à jour.

Propriétés

  • constructor

    void

    Créez une instance workbox-broadcast-update.BroadcastUpdate avec les options transmises et appelle sa méthode notifyIfUpdated chaque fois que le rappel cacheDidUpdate du plug-in est appelé.

    La fonction constructor se présente comme suit : 

    (options?: BroadcastCacheUpdateOptions) => {...}

Méthodes

responsesAreSame()

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
)

Pour deux valeurs Response's, compare plusieurs valeurs d'en-tête pour voir si elles sont identiques ou non.

Paramètres

  • firstResponse

    Réponse

  • secondResponse

    Réponse

  • headersToCheck

    chaîne[]

Renvoie

  • boolean