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

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