workbox-broadcast-update

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

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

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

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

Bagaimana cara update ditentukan?

Header tertentu dari cache dan Response objek akan dibandingkan, dan jika ada {i>header<i} yang memiliki nilai yang berbeda, hal ini dianggap sebagai pembaruan.

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

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

Menggunakan Update Siaran

Library ini dimaksudkan untuk digunakan bersama dengan StaleWhileRevalidate strategi caching, karena strategi tersebut melibatkan pengembalian respons dengan segera, tetapi juga menyediakan mekanisme untuk memperbarui cache secara asinkron.

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

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

Menyesuaikan Header yang Akan Diperiksa

Anda dapat menyesuaikan header yang akan diperiksa dengan menetapkan 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, Anda dapat menggunakan logika yang mendasarinya 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[],
)