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

Jenis

BroadcastCacheUpdate

Menggunakan postMessage() API untuk memberi tahu setiap jendela/tab yang terbuka saat respons yang di-cache telah diupdate.

Demi efisiensi, isi respons yang mendasarinya tidak dibandingkan; hanya header respons tertentu yang akan diperiksa.

Properti

  • konstruktor

    void

    Buat instance BroadcastCacheUpdate dengan channelName tertentu untuk menyiarkan pesan

    Fungsi constructor terlihat seperti: 

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

  • notifyIfUpdated

    void

    Membandingkan dua Respons dan mengirim pesan (melalui postMessage()) ke semua klien jendela jika responsnya berbeda. Tidak satu pun Respons yang boleh buram.

    Pesan yang diposting memiliki format berikut (dengan payload dapat disesuaikan melalui opsi generatePayload yang digunakan untuk membuat instance):

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

    Fungsi notifyIfUpdated terlihat seperti: 

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

    • akan menampilkan

      Promise<void>

      Diselesaikan setelah update dikirim.

BroadcastCacheUpdateOptions

Properti

BroadcastUpdatePlugin

Plugin ini akan otomatis menyiarkan pesan setiap kali respons yang di-cache diperbarui.

Properti

Metode

responsesAreSame()

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

Dengan mempertimbangkan dua Response's, membandingkan beberapa nilai header untuk melihat apakah nilai tersebut sama atau tidak.

Parameter

  • firstResponse

    Respons

  • secondResponse

    Respons

  • headersToCheck

    string[]

Hasil

  • boolean