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

Lorsque vous répondez aux requêtes à l'aide d'entrées mises en cache, bien que cela soit rapide, les utilisateurs peuvent finir par voir des données obsolètes.

Le package workbox-broadcast-update fournit une méthode standard pour notifier Clients Windows qu'une réponse mise en cache a été mise à jour. Il est le plus souvent utilisé avec la stratégie StaleWhileRevalidate.

Chaque fois que la requête « revalidate » de cette stratégie récupère une réponse à partir du différent de celui précédemment mis en cache, ce module envoie un (via postMessage()) à tous les clients Windows 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 qui affiche automatiquement un message pour informer l'utilisateur que les mises à jour sont disponibles.

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

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

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

Workbox utilise les 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

La bibliothèque est destinée à être utilisée avec StaleWhileRevalidate. de mise en cache, car elle implique le renvoi une réponse immédiate, mais fournit également un mécanisme permettant de mettre à jour de manière asynchrone.

Pour diffuser des informations, il vous suffit d'ajouter un broadcastUpdate.BroadcastUpdatePlugin à votre les 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 DOMContentLoaded se déclenche, vous pouvez écouter les événements suivants:

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 des messages

Lorsqu'un écouteur d'événements message est appelé dans votre application Web, event.data sera au 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 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 ou onglets ouverts lorsqu'une 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

    vide

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

    La fonction constructor se présente comme suit : 

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

  • notifyIfUpdated

    vide

    Compare deux réponses et envoie un message (via postMessage()) à tous les clients de fenêtre si les réponses sont différentes. 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>

      Résolu une fois la mise à jour envoyée.

BroadcastCacheUpdateOptions

Propriétés

  • headersToCheck

    string[] facultatif

  • notifyAllClients

    Booléen facultatif

  • generatePayload

    void facultatif

    La fonction generatePayload se présente comme suit: 

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

    • retours

      Record<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

    vide

    Créez une instance workbox-broadcast-update.BroadcastUpdate avec les options transmises et appelez 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[],
)

Compte tenu de deux Response's, compare plusieurs valeurs d'en-tête pour déterminer si elles sont identiques ou non.

Paramètres

  • firstResponse

    Réponse

  • secondResponse

    Réponse

  • headersToCheck

    chaîne[]

Renvoie

  • booléen