çalışma kutusu-stratejileri

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

Eski Halde Yeniden Doğrulama Diyagramı

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)

Önbellek İlk Şeması

Ç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)

Önce Ağ Şeması

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ğ

Yalnızca Ağ Şeması

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 Şeması

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.

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ğırarak Response ile çözümlenecek bir Promise döndürün.
  • handleAll(): handle() öğesine benzer, ancak iki Promise nesnesi döndürür. Birincisi handle() tarafından iade edilene eşdeğerdir, ikincisi ise strateji kapsamında event.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ği Request.
  • handler: Mevcut strateji için otomatik olarak StrategyHandler ö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 ve requestWillFetch(), fetchDidSucceed() ve fetchDidFail() eklenti yaşam döngüsü yöntemlerini çağırır.
  • cacheMatch: Önbellekten gelen bir isteği eşleştirir ve cacheKeyWillBeUsed() ile cachedResponseWillBeUsed() eklenti yaşam döngüsü yöntemlerini çağırır.
  • cachePut: Önbelleğe bir istek/yanıt çifti yerleştirir ve cacheKeyWillBeUsed(), cacheWillUpdate() ve cacheDidUpdate() eklenti yaşam döngüsü yöntemlerini çağırır.
  • fetchAndCachePut: fetch() yöntemini çağırır ve fetch() tarafından oluşturulan yanıta göre arka planda cachePut() 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 (genellikle FetchEvent).
  • 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 bekleyen waitUntil() 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)=> {...}

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • _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

      StrategyHandler

    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler,request: Request,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 bir Promise 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 bir FetchEvent 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 sadece Response olarak çözümlenen bir Promise 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ı olarak event.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)=> {...}

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • _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

      StrategyHandler

    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler,request: Request,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 bir Promise 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 bir FetchEvent 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 sadece Response olarak çözümlenen bir Promise 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ı olarak event.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)=> {...}

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • _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

      StrategyHandler

    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler,request: Request,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 bir Promise 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 bir FetchEvent 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 sadece Response olarak çözümlenen bir Promise 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ı olarak event.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)=> {...}

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • _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

      StrategyHandler

    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler,request: Request,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 bir Promise 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 bir FetchEvent 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 sadece Response olarak çözümlenen bir Promise 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ı olarak event.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)=> {...}

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • _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

      StrategyHandler

    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler,request: Request,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 bir Promise 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 bir FetchEvent 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 sadece Response olarak çözümlenen bir Promise 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ı olarak event.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)=> {...}

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • _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

      StrategyHandler

    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

    (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • returns

      Söz<Yanıt>

  • _handle

    void

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

    (request: Request,handler: StrategyHandler)=> {...}

    • 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 bir Promise 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 bir FetchEvent 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 sadece Response olarak çözümlenen bir Promise 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ı olarak event.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)=> {...}

  • event

    ExtendableEvent

  • params

    isteğe bağlı

  • istek

    İstek

  • url

    URL isteğe bağlı

  • cacheMatch

    void

    Strateji nesnesinde tanımlanan cacheName, matchOptions ve plugins 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 ve plugins 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 takdirde true 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ğin waitUntil() yöntemine (bu işleyicinin waitUntil() 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ımlanan fetchOptions (gezinme dışı istekler için) ve plugins öğ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ıtta this.cachePut() çalıştırılır.

    this.cachePut() çağrısı this.waitUntil() özelliğini otomatik olarak çağırır. Bu sayede, etkinlikte waitUntil() öğ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 son Request nesnesi, önbellek okuma ve/veya yazma işlemleri için önbellek anahtarı olarak ele alınır. Hiçbir cacheKeyWillBeUsed eklentisi geri çağırma işlemi kaydedilmemişse iletilen istek değiştirilmemiş olarak döndürülür

    getCacheKey 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ın

      Her 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 (genellikle FetchEvent) bir söz ekler.

    Not: Eklenen tüm vaatlerin ne zaman yerine getirileceğiniworkbox-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ı