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

Türler

BroadcastCacheUpdate

Önbelleğe alınmış bir yanıt güncellendiğinde açık pencereleri/sekmeleri bilgilendirmek için postMessage() API'yi kullanır.

Verimliliği sağlamak için temel yanıt gövdeleri karşılaştırılmaz, yalnızca belirli yanıt başlıkları kontrol edilir.

Özellikler

  • oluşturucu

    geçersiz

    Aşağıdaki işlemler için belirli bir channelName ile BroadcastCacheUpdate örneği oluşturun: mesajları anons açık

    constructor işlevi aşağıdaki gibi görünür: 

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

  • notifyIfUpdated

    geçersiz

    İki Yanıtı karşılaştırır ve yanıtlar farklıysa tüm pencere istemcilerine (postMessage() aracılığıyla) bir mesaj gönderir. Yanıtların ikisi de opaque değerini belirtin.

    Yayınlanan mesajın biçimi aşağıdaki gibidir (payload, örneğin oluşturulduğu generatePayload seçeneği aracılığıyla özelleştirilebilir):

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

    notifyIfUpdated işlevi aşağıdaki gibi görünür: 

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

    • returns

      Promise<void>

      Güncelleme gönderildiğinde çözümlenir.

BroadcastCacheUpdateOptions

Özellikler

  • headersToCheck

    string[] isteğe bağlı

  • notifyAllClients

    boole isteğe bağlı

  • generatePayload

    geçersiz isteğe bağlı

    generatePayload işlevi aşağıdaki gibi görünür: 

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

    • returns

      Kayıt<stringany>

BroadcastUpdatePlugin

Bu eklenti, önbelleğe alınmış bir yanıt güncellendiğinde otomatik olarak bir mesaj yayınlar.

Özellikler

  • oluşturucu

    geçersiz

    İletilen seçeneklerle bir workbox-broadcast-update.BroadcastUpdate örneği oluşturur ve eklentinin cacheDidUpdate geri çağırma işlevi her çağrıldığında notifyIfUpdated yöntemini çağırır.

    constructor işlevi şu şekilde görünür: 

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

Yöntemler

responsesAreSame()

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

İki Response's verildiğinde, aynı olup olmadıklarını görmek için birkaç başlık değerini karşılaştırır. aynı değildir.

Parametreler

  • firstResponse

    Yanıt

  • secondResponse

    Yanıt

  • headersToCheck

    dize[]

İadeler

  • boolean