Service Worker'lar kullanıma sunulduğunda, bir dizi yaygın önbelleğe alma stratejisi ortaya çıkmıştır. Önbelleğe alma stratejisi, Service Worker'ın bir getirme etkinliği aldıktan sonra nasıl yanıt oluşturacağını belirleyen bir kalıptır.
workbox-strategies
, en yaygın önbelleğe alma stratejilerini sağladığından bunları Service Worker'ınızda kolayca uygulayabilirsiniz.
Workbox'ın desteklediği stratejilerin ayrıntılarına girmeyeceğiz. Ancak Çevrimdışı Tarif Defteri'nden daha fazla bilgi edinebilirsiniz.
Stratejileri Kullanma
Aşağıdaki örneklerde, Çalışma Kutusu önbelleğe alma stratejilerini workbox-routing
ile nasıl kullanacağınızı göstereceğiz. Bu dokümanın Yapılandırma Stratejileri bölümünde ele alınan her strateji için tanımlayabileceğiniz bazı seçenekler vardır.
Gelişmiş Kullanım bölümünde, önbelleğe alma stratejilerini workbox-routing
olmadan doğrudan nasıl kullanabileceğinizi ele alacağız.
Eski-Yeniden Doğrula
stale-sure-reverify kalıbı isteğe mümkün olduğunca hızlı bir şekilde yanıt vermenize olanak tanır önbelleğe alınmış bir yanıt ile (önbelleğe alınmadığı takdirde ağ isteği geri alınır). Daha sonra ağ isteği, önbelleği güncellemek için kullanılır. Eski yeniden doğrulama işleminin bazı uygulamalarının aksine, bu strateji önbelleğe alınan yanıtın yaşı ne olursa olsun her zaman bir yeniden doğrulama isteğinde bulunur.
Bu, en güncel kaynağa sahip olmanın uygulama için hayati önem taşımadığı oldukça yaygın bir stratejidir.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
Önce Önbellek (Önbellek, Ağa Geri Dönüyor)
Çevrimdışı web uygulamaları büyük ölçüde önbelleği kullanır ancak kritik olmayan ve kademeli olarak önbelleğe alınabilen öğeler için önce önbellek en iyi seçenektir.
Önbellekte bir Yanıt varsa İstek, önbelleğe alınan yanıt kullanılarak karşılanır ve ağ hiç kullanılmaz. Önbelleğe alınan bir yanıt yoksa İstek bir ağ isteği tarafından karşılanır ve bir sonraki isteğin doğrudan önbellekten sunulabilmesi için yanıt önbelleğe alınır.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Önce Ağ (Ağ Önbelleğe Geri Dönüyor)
Sık güncellenen istekler için ideal çözüm önce ağ stratejisidir. Varsayılan olarak ağdan en son yanıtı almaya çalışır. İstek başarılı olursa yanıt önbelleğe alınır. Ağ yanıt döndüremezse önbelleğe alınan yanıt kullanılır.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
Yalnızca Ağ
Ağdan karşılanması gereken belirli istekler varsa kullanılacak strateji yalnızca ağ'dır.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Yalnızca Önbellek
Yalnızca önbellek stratejisi, yanıtların bir önbellekten alınmasını sağlar. Bu, çalışma kutusunda daha az yaygındır, ancak kendi önbelleğe alma adımınız varsa yararlı olabilir.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Stratejileri Yapılandırma
Tüm stratejiler aşağıdakileri yapılandırmanıza olanak tanır:
- Stratejide kullanılacak önbelleğin adı.
- Stratejide kullanılacak önbelleği süre sonu kısıtlamaları.
- Bir isteği getirirken ve önbelleğe alırken yaşam döngüsü yöntemlerinin çağrılacağı bir eklenti dizisi.
Bir Strateji Tarafından Kullanılan Önbelleği Değiştirme
Önbellek adı sağlayarak kullanılan önbelleği değiştirebilirsiniz. Öğelerinizi ayırmak istediğinizde bu işlem hata ayıklamaya yardımcı olur.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
Eklentileri Kullanma
Workbox, bu stratejilerle kullanılabilecek bir dizi eklentiyle birlikte gelir.
- çalışma kutusu-arka plan-senkronizasyon
- workbox-broadcast-güncellemesi
- çalışma kutusu-önbelleğe alınabilir-yanıt
- workbox-expiration (çalışma kutusunun geçerlilik süresi sona erer)
- çalışma kutusu-aralığı-istekleri
Bu eklentilerden (veya özel bir eklenti) herhangi birini kullanmak için örnekleri plugins
seçeneğine geçirmeniz yeterlidir.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
],
})
);
Özel Stratejiler
Workbox, stratejileri yapılandırmanın yanı sıra kendi özel stratejilerinizi oluşturmanıza da olanak tanır.
Bu işlem, workbox-strategies
öğesinden Strategy
temel sınıfını içe aktararak ve genişleterek yapılabilir:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
Bu örnekte handle()
, belirli bir işleme mantığı tanımlamak için bir istek stratejisi olarak kullanılır. Kullanılabilecek iki istek stratejisi vardır:
handle()
: Bir istek stratejisi uygulayın ve ilgili tüm eklenti geri çağırmalarını çağırarakResponse
ile çözümlenecek birPromise
döndürün.handleAll()
:handle()
öğesine benzer, ancak ikiPromise
nesnesi döndürür. Birincisihandle()
tarafından iade edilene eşdeğerdir, ikincisi ise strateji kapsamındaevent.waitUntil()
öğesine eklenen sözler tamamlandığında çözümlenir.
Her iki istek stratejisi de iki parametreyle çağrılır:
request
: Stratejinin yanıt döndüreceğiRequest
.handler
: Mevcut strateji için otomatik olarakStrategyHandler
örneği oluşturuldu.
Yeni Strateji Oluşturma
Aşağıda, NetworkOnly
davranışını yeniden uygulayan yeni bir strateji örneği verilmiştir:
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
Yerel fetch
yöntemi yerine handler.fetch()
yönteminin nasıl çağrıldığına dikkat edin. StrategyHandler
sınıfı, handle()
veya handleAll()
her kullanıldığında kullanılabilecek çeşitli getirme ve önbellek işlemleri sağlar:
fetch
: Belirli bir isteği getirir verequestWillFetch()
,fetchDidSucceed()
vefetchDidFail()
eklenti yaşam döngüsü yöntemlerini çağırır.cacheMatch
: Önbellekten gelen bir isteği eşleştirir vecacheKeyWillBeUsed()
ilecachedResponseWillBeUsed()
eklenti yaşam döngüsü yöntemlerini çağırır.cachePut
: Önbelleğe bir istek/yanıt çifti yerleştirir vecacheKeyWillBeUsed()
,cacheWillUpdate()
vecacheDidUpdate()
eklenti yaşam döngüsü yöntemlerini çağırır.fetchAndCachePut
:fetch()
yöntemini çağırır vefetch()
tarafından oluşturulan yanıta göre arka plandacachePut()
yöntemini çalıştırır.hasCallback
: Geri çağırmayı girdi olarak alır ve stratejinin belirtilen geri çağırma özelliğine sahip en az bir eklentisi varsa true değerini döndürür.runCallbacks
: Belirli bir adla eşleşen tüm eklenti geri çağırmalarını sırayla çalıştırır ve tek bağımsız değişken olarak belirli bir param nesnesini (mevcut eklenti durumuyla birleştirilmiş) geçirir.iterateCallbacks
: Geri çağırmayı kabul eder ve eşleşen eklenti geri çağırmalarının yinelenebilir bir kısmını döndürür. Burada her geri arama, geçerli işleyici durumuyla sarmalanır (yani her geri çağırmayı çağırdığınızda ilettiğiniz nesne parametresi eklentinin geçerli durumuyla birleştirilir).waitUntil
: İşlenen istekle ilişkili etkinliğin ömür boyu taahhütlerini uzatma sözü ekler (genellikleFetchEvent
).doneWaiting
:waitUntil()
için iletilen tüm sözler yerine getirildiğinde kesinleşen bir söz döndürür.destroy
: Stratejinin çalıştırılmasını durdurur ve bekleyenwaitUntil()
taahhütlerinin tümünü hemen çözüme kavuşturur.
Özel Önbellek Ağ Yarışı Stratejisi
Aşağıdaki örnek, Çevrimdışı Tarif Defterindeki cache-network-race örneğini temel almaktadır (Workbox'ın bunu sunmadığı) ancak bir adım daha ileri gider ve başarılı bir ağ isteğinden sonra önbelleği her zaman günceller. Bu, birden fazla eylemin kullanıldığı daha karmaşık bir strateji örneğinde verilmiştir.
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
_handle(request, handler) {
const fetchAndCachePutDone = handler.fetchAndCachePut(request);
const cacheMatchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchAndCachePutDone.then(resolve);
cacheMatchDone.then(response => response && resolve(response));
// Reject if both network and cache error or find no response.
Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
results => {
const [fetchAndCachePutResult, cacheMatchResult] = results;
if (
fetchAndCachePutResult.status === 'rejected' &&
!cacheMatchResult.value
) {
reject(fetchAndCachePutResult.reason);
}
}
);
});
}
}
Gelişmiş Kullanım
Stratejileri kendi getirme etkinliği mantığınızda kullanmak istiyorsanız belirli bir strateji aracılığıyla istek çalıştırmak için strateji sınıflarını kullanabilirsiniz.
Örneğin, eski olan "yeniden doğrula" stratejisini kullanmak için aşağıdakileri yapabilirsiniz:
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if (url.origin === location.origin && url.pathname === '/') {
event.respondWith(new StaleWhileRevalidate().handle({event, request}));
}
});
Mevcut sınıfların listesini workbox-strategies referans belgelerinde bulabilirsiniz.
Türler
CacheFirst
Önbellek öncelikli istek stratejisinin uygulanması.
Önbellek öncelikli strateji, uzun süre önbelleğe alınabildiğinden /styles/example.a8f5f1.css
gibi URL'ler gibi düzeltilmiş öğeler için yararlıdır.
Ağ isteği başarısız olursa ve önbellek eşleşmesi yoksa bir WorkboxError
istisnası oluşur.
Özellikler
-
oluşturucu
void
Stratejinin yeni bir örneğini oluşturur ve belgelenen tüm seçenek özelliklerini, herkese açık örnek özellikleri olarak ayarlar.
Not: Bir özel strateji sınıfı temel Strateji sınıfını genişletiyorsa ve bu özelliklerden daha fazlasına ihtiyaç duymuyorsa kendi kurucusunu tanımlaması gerekmez.
constructor
işlevi şu şekilde görünür:(options?: StrategyOptions) => {...}
-
seçenekler
StrategyOptions (isteğe bağlı): isteğe bağlı
-
returns
-
-
cacheName
dize
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
-
_awaitComplete
void
_awaitComplete
işlevi şu şekilde görünür:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Söz<Yanıt>
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
işlevi şu şekilde görünür:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Söz<Yanıt>
-
-
herkese açık kullanıcı adı
void
Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırmalarını çağırarak
Response
ile çözümlenecek birPromise
döndürür.Bir strateji örneği bir Çalışma Kutusu
workbox-routing.Route
ile kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.Alternatif olarak bu yöntem
event.respondWith()
işlevine geçirilerek bağımsız birFetchEvent
işleyicide kullanılabilir.handle
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
Söz<Yanıt>
-
-
handleAll
void
workbox-strategies.Strategy~handle
'a benzer, ancak sadeceResponse
olarak çözümlenen birPromise
döndürmek yerine, birkaç[response, done]
vaadi döndürür. İlki (response
)handle()
tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarakevent.waitUntil()
öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için
done
sözünü bekleyebilirsiniz.handleAll
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
[Promise<Response>, Promise<void>]
Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.
-
CacheOnly
Yalnızca önbellek istek stratejisinin uygulanması.
Bu sınıf, Workbox eklentilerinden yararlanmak istiyorsanız kullanışlıdır.
Önbellek eşleşmesi yoksa bir WorkboxError
istisnası oluşur.
Özellikler
-
oluşturucu
void
Stratejinin yeni bir örneğini oluşturur ve belgelenen tüm seçenek özelliklerini, herkese açık örnek özellikleri olarak ayarlar.
Not: Bir özel strateji sınıfı temel Strateji sınıfını genişletiyorsa ve bu özelliklerden daha fazlasına ihtiyaç duymuyorsa kendi kurucusunu tanımlaması gerekmez.
constructor
işlevi şu şekilde görünür:(options?: StrategyOptions) => {...}
-
seçenekler
StrategyOptions (isteğe bağlı): isteğe bağlı
-
returns
-
-
cacheName
dize
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
-
_awaitComplete
void
_awaitComplete
işlevi şu şekilde görünür:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Söz<Yanıt>
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
işlevi şu şekilde görünür:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Söz<Yanıt>
-
-
herkese açık kullanıcı adı
void
Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırmalarını çağırarak
Response
ile çözümlenecek birPromise
döndürür.Bir strateji örneği bir Çalışma Kutusu
workbox-routing.Route
ile kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.Alternatif olarak bu yöntem
event.respondWith()
işlevine geçirilerek bağımsız birFetchEvent
işleyicide kullanılabilir.handle
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
Söz<Yanıt>
-
-
handleAll
void
workbox-strategies.Strategy~handle
'a benzer, ancak sadeceResponse
olarak çözümlenen birPromise
döndürmek yerine, birkaç[response, done]
vaadi döndürür. İlki (response
)handle()
tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarakevent.waitUntil()
öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için
done
sözünü bekleyebilirsiniz.handleAll
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
[Promise<Response>, Promise<void>]
Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.
-
NetworkFirst
Önce ağ istek stratejisinin uygulanması.
Varsayılan olarak bu strateji, opak yanıtların yanı sıra 200 durum kodu içeren yanıtları önbelleğe alır. Opak yanıtlar, yanıtın CORS'yi desteklemediği kaynaklar arası isteklerdir.
Ağ isteği başarısız olursa ve önbellek eşleşmesi yoksa bir WorkboxError
istisnası oluşur.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(options?: NetworkFirstOptions) => {...}
-
seçenekler
NetworkFirstOptions (isteğe bağlı) isteğe bağlı
-
returns
-
-
cacheName
dize
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
-
_awaitComplete
void
_awaitComplete
işlevi şu şekilde görünür:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Söz<Yanıt>
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
işlevi şu şekilde görünür:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Söz<Yanıt>
-
-
herkese açık kullanıcı adı
void
Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırmalarını çağırarak
Response
ile çözümlenecek birPromise
döndürür.Bir strateji örneği bir Çalışma Kutusu
workbox-routing.Route
ile kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.Alternatif olarak bu yöntem
event.respondWith()
işlevine geçirilerek bağımsız birFetchEvent
işleyicide kullanılabilir.handle
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
Söz<Yanıt>
-
-
handleAll
void
workbox-strategies.Strategy~handle
'a benzer, ancak sadeceResponse
olarak çözümlenen birPromise
döndürmek yerine, birkaç[response, done]
vaadi döndürür. İlki (response
)handle()
tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarakevent.waitUntil()
öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için
done
sözünü bekleyebilirsiniz.handleAll
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
[Promise<Response>, Promise<void>]
Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.
-
NetworkFirstOptions
Özellikler
-
cacheName
string isteğe bağlı
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
networkTimeoutSeconds
numara isteğe bağlı
-
plugins
WorkboxPlugin[] isteğe bağlı
NetworkOnly
Yalnızca ağ istek stratejisinin uygulanması.
Bu sınıf, Workbox eklentilerinden yararlanmak istiyorsanız kullanışlıdır.
Ağ isteği başarısız olursa bir WorkboxError
istisnası oluşur.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(options?: NetworkOnlyOptions) => {...}
-
seçenekler
NetworkOnlyOptions (isteğe bağlı) isteğe bağlı
-
returns
-
-
cacheName
dize
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
-
_awaitComplete
void
_awaitComplete
işlevi şu şekilde görünür:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Söz<Yanıt>
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
işlevi şu şekilde görünür:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Söz<Yanıt>
-
-
herkese açık kullanıcı adı
void
Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırmalarını çağırarak
Response
ile çözümlenecek birPromise
döndürür.Bir strateji örneği bir Çalışma Kutusu
workbox-routing.Route
ile kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.Alternatif olarak bu yöntem
event.respondWith()
işlevine geçirilerek bağımsız birFetchEvent
işleyicide kullanılabilir.handle
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
Söz<Yanıt>
-
-
handleAll
void
workbox-strategies.Strategy~handle
'a benzer, ancak sadeceResponse
olarak çözümlenen birPromise
döndürmek yerine, birkaç[response, done]
vaadi döndürür. İlki (response
)handle()
tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarakevent.waitUntil()
öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için
done
sözünü bekleyebilirsiniz.handleAll
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
[Promise<Response>, Promise<void>]
Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.
-
NetworkOnlyOptions
Özellikler
-
fetchOptions
RequestInit isteğe bağlı
-
networkTimeoutSeconds
numara isteğe bağlı
-
plugins
WorkboxPlugin[] isteğe bağlı
StaleWhileRevalidate
Eskileri tekrar doğrula istek stratejisinin uygulanması.
Kaynaklar hem önbellekten hem de ağdan paralel olarak istenir. Strateji, varsa önbelleğe alınan sürümle yanıt verir, aksi takdirde ağ yanıtını bekler. Önbellek, her başarılı istekle birlikte ağ yanıtıyla güncellenir.
Varsayılan olarak bu strateji, opak yanıtların yanı sıra 200 durum kodu içeren yanıtları önbelleğe alır. Opak yanıtlar, yanıtın CORS'yi desteklemediği kaynaklar arası isteklerdir.
Ağ isteği başarısız olursa ve önbellek eşleşmesi yoksa bir WorkboxError
istisnası oluşur.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(options?: StrategyOptions) => {...}
-
seçenekler
StrategyOptions (isteğe bağlı): isteğe bağlı
-
returns
-
-
cacheName
dize
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
-
_awaitComplete
void
_awaitComplete
işlevi şu şekilde görünür:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Söz<Yanıt>
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
işlevi şu şekilde görünür:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Söz<Yanıt>
-
-
herkese açık kullanıcı adı
void
Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırmalarını çağırarak
Response
ile çözümlenecek birPromise
döndürür.Bir strateji örneği bir Çalışma Kutusu
workbox-routing.Route
ile kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.Alternatif olarak bu yöntem
event.respondWith()
işlevine geçirilerek bağımsız birFetchEvent
işleyicide kullanılabilir.handle
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
Söz<Yanıt>
-
-
handleAll
void
workbox-strategies.Strategy~handle
'a benzer, ancak sadeceResponse
olarak çözümlenen birPromise
döndürmek yerine, birkaç[response, done]
vaadi döndürür. İlki (response
)handle()
tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarakevent.waitUntil()
öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için
done
sözünü bekleyebilirsiniz.handleAll
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
[Promise<Response>, Promise<void>]
Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.
-
Strategy
Diğer tüm strateji sınıflarının alması gereken soyut bir temel sınıf:
Özellikler
-
oluşturucu
void
Stratejinin yeni bir örneğini oluşturur ve belgelenen tüm seçenek özelliklerini, herkese açık örnek özellikleri olarak ayarlar.
Not: Bir özel strateji sınıfı temel Strateji sınıfını genişletiyorsa ve bu özelliklerden daha fazlasına ihtiyaç duymuyorsa kendi kurucusunu tanımlaması gerekmez.
constructor
işlevi şu şekilde görünür:(options?: StrategyOptions) => {...}
-
seçenekler
StrategyOptions (isteğe bağlı): isteğe bağlı
-
returns
-
-
cacheName
dize
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
-
_awaitComplete
void
_awaitComplete
işlevi şu şekilde görünür:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Söz<Yanıt>
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
_getResponse
işlevi şu şekilde görünür:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
istek
İstek
-
event
ExtendableEvent
-
returns
Söz<Yanıt>
-
-
_handle
void
_handle
işlevi şu şekilde görünür:(request: Request, handler: StrategyHandler) => {...}
-
istek
İstek
-
handler
-
returns
Söz<Yanıt>
-
-
herkese açık kullanıcı adı
void
Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırmalarını çağırarak
Response
ile çözümlenecek birPromise
döndürür.Bir strateji örneği bir Çalışma Kutusu
workbox-routing.Route
ile kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.Alternatif olarak bu yöntem
event.respondWith()
işlevine geçirilerek bağımsız birFetchEvent
işleyicide kullanılabilir.handle
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
Söz<Yanıt>
-
-
handleAll
void
workbox-strategies.Strategy~handle
'a benzer, ancak sadeceResponse
olarak çözümlenen birPromise
döndürmek yerine, birkaç[response, done]
vaadi döndürür. İlki (response
)handle()
tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarakevent.waitUntil()
öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için
done
sözünü bekleyebilirsiniz.handleAll
işlevi şu şekilde görünür:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
seçenekler
FetchEvent | HandlerCallbackOptions
Bir
FetchEvent
veya aşağıda listelenen özelliklere sahip bir nesne.
-
returns
[Promise<Response>, Promise<void>]
Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.
-
StrategyHandler
Bir Strateji örneği örneğinin, eklenti geri çağırmalarıyla ilgili tüm getirme ve önbellek işlemlerini sarmalayan ve stratejinin ne zaman "bitti" olduğunu (yani eklenen tüm event.waitUntil()
vaatlerinin çözümlendiğini) takip eden workbox-strategies.Strategy~handle
veya workbox-strategies.Strategy~handleAll
yöntemini her çağırışında bir sınıf oluşturulur.
Özellikler
-
oluşturucu
void
İletilen strateji ve isteği işleyen etkinlikle ilişkili yeni bir örnek oluşturur.
Oluşturucu ayrıca, bu isteği işleyen eklentilerin her birine iletilecek durumu başlatır.
constructor
işlevi şu şekilde görünür:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
strateji
-
seçenekler
-
returns
-
-
event
ExtendableEvent
-
params
isteğe bağlı
-
istek
İstek
-
url
URL isteğe bağlı
-
cacheMatch
void
Strateji nesnesinde tanımlanan
cacheName
,matchOptions
veplugins
değerlerini kullanarak önbellekten gelen bir isteği eşleştirir (ve geçerli eklenti geri çağırma yöntemlerini çağırır).Bu yöntem kullanılırken aşağıdaki eklenti yaşam döngüsü yöntemleri çağrılır:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
cacheMatch
işlevi şu şekilde görünür:(key: RequestInfo) => {...}
-
anahtar
RequestInfo
Önbellek anahtarı olarak kullanılacak İstek veya URL.
-
returns
Söz<Yanıt>
Varsa eşleşen bir yanıt.
-
cachePut
void
Strateji nesnesinde tanımlanan
cacheName
veplugins
değerlerini kullanarak bir istek/yanıt çiftini önbelleğe yerleştirir (ve geçerli tüm eklenti geri çağırma yöntemlerini çağırır).Bu yöntem kullanılırken aşağıdaki eklenti yaşam döngüsü yöntemleri çağrılır:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
cachePut
işlevi şu şekilde görünür:(key: RequestInfo, response: Response) => {...}
-
anahtar
RequestInfo
Önbellek anahtarı olarak kullanılacak istek veya URL.
-
yanıt
Yanıt
Önbelleğe alınan yanıt.
-
returns
Promise<boolean>
cacheWillUpdate yanıtın önbelleğe alınmamasına neden olursa
false
, aksi takdirdetrue
hatasına neden olur.
-
destroy
void
Stratejinin çalıştırılmasını durdurur ve bekleyen tüm
waitUntil()
vaatleri derhal çözüme kavuşturulur.destroy
işlevi şu şekilde görünür:() => {...}
-
doneWaiting
void
workbox-strategies.StrategyHandler~waitUntil
için gönderilen tüm sözler yerine getirildikten sonra çözümlenen bir vaat döndürür.Not:
doneWaiting()
düzenlendikten sonra yapılan tüm işler, bir etkinliğinwaitUntil()
yöntemine (bu işleyicininwaitUntil()
yöntemine değil) manuel olarak iletilmelidir. Aksi takdirde, Service Worker iş parçacığı çalışmanız tamamlanmadan önce sonlandırılır.doneWaiting
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<void>
-
-
fetch
void
Strategy
nesnesinde tanımlananfetchOptions
(gezinme dışı istekler için) veplugins
öğelerini kullanarak belirli bir isteği getirir (ve geçerli eklenti geri çağırma yöntemlerini çağırır).Bu yöntem kullanılırken aşağıdaki eklenti yaşam döngüsü yöntemleri çağrılır:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
fetch
işlevi şu şekilde görünür:(input: RequestInfo) => {...}
-
giriş
RequestInfo
URL veya getirme isteği.
-
returns
Söz<Yanıt>
-
fetchAndCachePut
void
this.fetch()
çağrıları ve (arka planda)this.fetch()
tarafından oluşturulan yanıttathis.cachePut()
çalıştırılır.this.cachePut()
çağrısıthis.waitUntil()
özelliğini otomatik olarak çağırır. Bu sayede, etkinliktewaitUntil()
öğesini manuel olarak çağırmanız gerekmez.fetchAndCachePut
işlevi şu şekilde görünür:(input: RequestInfo) => {...}
-
giriş
RequestInfo
Getirilecek ve önbelleğe alınacak istek veya URL.
-
returns
Söz<Yanıt>
-
-
getCacheKey
void
cacheKeyWillBeUsed
geri çağırma işlevi için eklenti listesini kontrol eder ve sıralı olarak bulunan geri çağırmalardan herhangi birini yürütür. Son eklenti tarafından döndürülen sonRequest
nesnesi, önbellek okuma ve/veya yazma işlemleri için önbellek anahtarı olarak ele alınır. HiçbircacheKeyWillBeUsed
eklentisi geri çağırma işlemi kaydedilmemişse iletilen istek değiştirilmemiş olarak döndürülürgetCacheKey
işlevi şu şekilde görünür:(request: Request, mode: "read"
| "write"
) => {...}-
istek
İstek
-
mod
-
returns
Taahhüt<İstek>
-
-
hasCallback
void
Stratejinin belirtilen geri çağırmaya sahip en az bir eklentisi varsa true değerini döndürür.
hasCallback
işlevi şu şekilde görünür:(name: C) => {...}
-
ad
C
Kontrol edilecek geri çağırmanın adı.
-
returns
boolean
-
-
iterateCallbacks
void
Bir geri çağırmayı kabul eder ve eşleşen eklenti geri çağırmalarının yinelemesini döndürür. Her bir geri çağırma, geçerli işleyici durumuyla sarmalanır (yani her geri çağırmayı çağırdığınızda ilettiğiniz nesne parametresi eklentinin geçerli durumuyla birleştirilir).
iterateCallbacks
işlevi şu şekilde görünür:(name: C) => {...}
-
ad
C
Çalıştırılacak geri çağırmanın adı
-
returns
Oluşturucu<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
Verilen adla eşleşen tüm eklenti geri çağırmalarını sırayla çalıştırır ve tek bağımsız değişken olarak verilen param nesnesini (mevcut eklenti durumuyla birleştirilmiş) geçirir.
Not: Bu yöntem tüm eklentileri çalıştırdığından, geri çağırma işleminin döndürülen değerinin bir sonraki geri çağırma işleminden önce uygulanması gereken durumlar için uygun değildir. Bu sorunu nasıl ele alacağınızı öğrenmek için aşağıdaki
workbox-strategies.StrategyHandler#iterateCallbacks
bölümünü inceleyin.runCallbacks
işlevi şu şekilde görünür:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
ad
C
Her eklenti içinde çalıştırılacak geri çağırmanın adı.
-
param
<indexedAccess"state"
> değerini atlayınHer geri çağırma yürütülürken ilk (ve tek) parametre olarak iletilecek nesnedir. Bu nesne, geri çağırma yürütülmeden önce mevcut eklentinin durumuyla birleştirilir.
-
returns
Promise<void>
-
-
waitUntil
void
İşlenen istekle ilişkili etkinlik etkinliğinin [ömür boyu taahhütlerini uzatın]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
özelliğine (genellikleFetchEvent
) bir söz ekler.Not: Eklenen tüm vaatlerin ne zaman yerine getirileceğini
workbox-strategies.StrategyHandler~doneWaiting
öğrenmek için bekleyebilirsiniz.waitUntil
işlevi şu şekilde görünür:(promise: Promise<T>) => {...}
-
söz vermek
Promise<T>
İsteği tetikleyen etkinliğin kullanım ömrü boyunca verdiği sözlere ekleme yapma vaadi.
-
returns
Promise<T>
-
StrategyOptions
Özellikler
-
cacheName
string isteğe bağlı
-
fetchOptions
RequestInit isteğe bağlı
-
matchOptions
CacheQueryOptions isteğe bağlı
-
plugins
WorkboxPlugin[] isteğe bağlı