çalışma kutusu-yayınlama-güncellemesi

İsteklere önbelleğe alınan girişlerle yanıt verirken, kullanıcıların eski verileri görebileceği anlamına gelir.

workbox-broadcast-update paketi, önbelleğe alınmış bir yanıtın güncellendiğini Windows istemcilerine bildirmenin standart bir yolunu sağlar. Bu, en yaygın olarak StaleWhileRevalidate stratejisini kullanın.

Her "yeniden doğrula" bir yanıt alındığından emin olun. önbelleğe alınandan farklı bir ağ görürseniz bu modül, mesaj ( postMessage()) geçerli hizmet çalışanının kapsamındaki tüm Window İstemcileri için geçerlidir.

Window İstemcileri güncellemeleri dinleyebilir ve uygun işlemi yapabilirler. Örneğin: kullanıcıya otomatik olarak güncellemelerin güncellendiğini bildiren bir mesaj göstererek kullanılabilir.

Güncellemeler nasıl belirleniyor?

Önbelleğe alınmış ve yeni Responseöğelerin belirli üstbilgileri karşılaştırılır ve üstbilgilerden herhangi birinin değeri farklıysa güncelleme olarak kabul edilir.

Varsayılan olarak Content-Length, ETag ve Last-Modified başlıkları karşılaştırılır.

Workbox, özellikle büyük olabilecek yanıtlar için daha verimli olmak amacıyla yanıt gövdelerinin bayt bayt karşılaştırması yerine başlık değerlerini kullanır.

Yayın güncellemesini kullanma

Kitaplığın, StaleWhileRevalidateönbelleğe alma stratejisiyle birlikte kullanılması amaçlanmıştır. Bu strateji, önbelleğe alınmış bir yanıtı hemen döndürmeyi içerir ancak önbelleği eşzamansız olarak güncelleme mekanizması da sağlar.

Güncellemeleri yayınlamak için strateji seçeneklerinize bir broadcastUpdate.BroadcastUpdatePlugin eklemeniz yeterlidir.

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

Web uygulamanızda, DOMContentLoaded etkinliği tetiklenmeden önce bu etkinlikleri aşağıdaki gibi dinleyebilirsiniz:

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

Mesaj biçimi

Web uygulamanızda bir message etkinlik işleyici çağrıldığında event.data mülkü aşağıdaki biçimde olur:

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

Kontrol Edilecek Üstbilgileri Özelleştir

headersToCheck mülkünü ayarlayarak kontrol edilecek üstbilgileri özelleştirebilirsiniz.

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

Gelişmiş Kullanım

Çoğu geliştirici, workbox-broadcast-update'ü yukarıda gösterildiği gibi belirli bir stratejinin eklentisi olarak kullansa da temel mantığı hizmet çalışanı kodunda kullanmak mümkündür.

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[],
): boolean