workbox-broadcast-update

Saat merespons permintaan dengan entri yang di-cache, meskipun cepat, hal ini memiliki konsekuensi bahwa pengguna mungkin akan melihat data yang sudah tidak berlaku.

Paket workbox-broadcast-update menyediakan cara standar untuk memberi tahu Klien Windows bahwa respons yang di-cache telah diperbarui. Ini paling sering digunakan bersama dengan strategi StaleWhileRevalidate.

Setiap kali langkah "validasi ulang" dalam strategi tersebut mengambil respons dari jaringan yang berbeda dengan yang sebelumnya di-cache, modul ini akan mengirimkan pesan (melalui postMessage()) ke semua Klien Jendela dalam cakupan pekerja layanan saat ini.

Klien Window dapat memproses update dan mengambil tindakan yang sesuai, seperti otomatis menampilkan pesan kepada pengguna yang memberi tahu mereka bahwa update tersedia.

Bagaimana cara menentukan pembaruan?

Header tertentu dari objek Response yang di-cache dan baru akan dibandingkan, dan jika salah satu header memiliki nilai yang berbeda, header tersebut dianggap sebagai update.

Secara default, header Content-Length, ETag, dan Last-Modified akan dibandingkan.

Workbox menggunakan nilai header, bukan perbandingan byte demi byte dari isi respons, agar lebih efisien, khususnya untuk respons yang berpotensi besar

Menggunakan Update Siaran

Library ini dimaksudkan untuk digunakan bersama dengan strategi caching StaleWhileRevalidate, karena strategi tersebut melibatkan ditampilkannya respons yang di-cache secara langsung, tetapi juga menyediakan mekanisme untuk memperbarui cache secara asinkron.

Untuk menyiarkan update, Anda hanya perlu menambahkan broadcastUpdate.BroadcastUpdatePlugin ke opsi strategi Anda.

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()],
  })
);

Di aplikasi web, sebelum peristiwa DOMContentLoaded diaktifkan, Anda dapat memproses peristiwa ini seperti berikut:

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 pesan

Saat pemroses peristiwa message dipanggil di aplikasi web Anda, properti event.data akan memiliki format berikut:

{
  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/'
  }
}

Sesuaikan Header untuk Diperiksa

Anda dapat menyesuaikan header yang akan diperiksa dengan menyetel properti 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'],
      }),
    ],
  })
);

Penggunaan Lanjutan

Meskipun sebagian besar developer akan menggunakan workbox-broadcast-update sebagai plugin strategi tertentu seperti yang ditunjukkan di atas, logika yang mendasarinya dapat digunakan dalam kode pekerja layanan.

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,
);

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