İ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çıkconstructor
işlevi aşağıdaki gibi görünür:(options?: BroadcastCacheUpdateOptions) => {...}
-
seçenekler
BroadcastCacheUpdateOptions optional
-
returns
-
-
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ğugeneratePayload
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) => {...}
-
seçenekler
-
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) => {...}
-
seçenekler
-
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 eklentinincacheDidUpdate
geri çağırma işlevi her çağrıldığındanotifyIfUpdated
yöntemini çağırır.constructor
işlevi şu şekilde görünür:(options?: BroadcastCacheUpdateOptions) => {...}
-
seçenekler
BroadcastCacheUpdateOptions optional
-
returns
-
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