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

Önbelleğe alınmış girişlere sahip isteklere yanıt verirken hızlı olmakla birlikte, kullanıcıların eski verileri görmelerine yol açacak bir denge söz konusudur.

workbox-broadcast-update paketi, önbelleğe alınan bir yanıtın güncellendiğini Window İstemcileri'ne bildirmek için standart bir yol sunar. Bu, en sık StaleWhileRevalidate stratejisiyle birlikte kullanılır.

Bu stratejinin "yeniden doğrula" adımı, ağdan daha önce önbelleğe alınandan farklı bir yanıt aldığında bu modül, geçerli hizmet çalışanı kapsamındaki tüm Window İstemcilerine bir mesaj (postMessage() üzerinden) gönderir.

Pencere İstemcileri güncellemeleri dinleyebilir ve kullanıcıya güncellemelerin olduğunu bildiren otomatik bir mesaj görüntülemek gibi uygun işlemleri yapabilir.

Güncellemeler nasıl belirlenir?

Önbelleğe alınan ve yeni Response nesnelerinin belirli üst bilgileri karşılaştırılır. Başlıklardan herhangi birinin farklı değerleri varsa 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 potansiyel olarak büyük yanıtlarda daha verimli olmak için yanıt gövdelerinin baytlarca karşılaştırması yerine üstbilgi değerlerini kullanır.

Yayın Güncelleme'yi kullanma

Kitaplık, StaleWhileRevalidate önbelleğe alma stratejisiyle birlikte kullanılmak üzere tasarlanmıştır. Çünkü bu strateji, önbelleğe alınan yanıtın hemen döndürülmesini sağlamanın yanı sıra önbelleği eşzamansız olarak güncellemek için bir mekanizma da sağlar.

Güncellemeleri yayınlamak için strateji seçeneklerinize 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 aşağıdaki gibi etkinlikleri 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 özelliği 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 Başlıkları Özelleştirme

headersToCheck özelliğini ayarlayarak kontrol edilecek üst bilgileri ö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, yukarıda gösterildiği gibi belirli bir stratejinin eklentisi olarak workbox-broadcast-update hizmetini kullanır ancak Service Worker kodundaki temel mantığı kullanmak da 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 bildirmek için postMessage() API'yi kullanır.

Verimlilik amacıyla, temel yanıt gövdeleri karşılaştırılmaz; yalnızca belirli yanıt başlıkları kontrol edilir.

Özellikler

  • oluşturucu

    void

    Mesajları şurada yayınlamak için belirli bir channelName ile BroadcastCacheUpdate örneği oluşturun:

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

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

  • notifyIfUpdated

    void

    İki Yanıtı karşılaştırır ve yanıtlar farklıysa tüm pencere istemcilerine bir mesaj (postMessage() üzerinden) gönderir. Yanıtların hiçbiri opak olamaz.

    Yayınlanan mesaj şu biçimdedir (payload, örneğin oluşturulduğu generatePayload seçeneği kullanılarak özelleştirilebilir):

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

    notifyIfUpdated işlevi şu şekilde 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

    void isteğe bağlı

    generatePayload işlevi şu şekilde 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

    void

    Geçirilen seçeneklerle bir workbox-broadcast-update.BroadcastUpdate örneği oluşturun ve eklentinin cacheDidUpdate geri çağırması her çağrıldığında ilgili notifyIfUpdated yöntemini çağırın.

    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ç üst bilgi değeri karşılaştırılır.

Parametreler

  • firstResponse

    Yanıt

  • secondResponse

    Yanıt

  • headersToCheck

    dize[]

İlerlemeler

  • boolean