çalışma kutusu-stratejileri

Hizmet çalışanları ilk kez kullanıma sunulduğunda bir dizi yaygın önbelleğe alma stratejisi ortaya çıktı. Önbelleğe alma stratejisi, bir hizmet çalışanı fetch 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 sunar. Bu nedenle, bunları hizmet çalışanı uygulamanızda kolayca kullanabilirsiniz.

Workbox tarafından desteklenen stratejiler dışında çok fazla ayrıntıya girmeyeceğiz ancak Çevrimdışı Yemek Kitabı'nda daha fazla bilgi edinebilirsiniz.

Stratejileri kullanma

Aşağıdaki örneklerde, Workbox önbelleğe alma stratejilerini workbox-routing ile nasıl kullanacağınızı göstereceğiz. Her stratejiyle tanımlayabileceğiniz bazı seçenekler vardır. Bu seçenekler, bu belgenin Stratejileri Yapılandırma bölümünde ele alınmıştır.

Gelişmiş Kullanım bölümünde, workbox-routing olmadan önbelleğe alma stratejilerini doğrudan nasıl kullanabileceğinizi ele alacağız.

Yeniden Doğrulama Sırasında Eski

Stale While Revalidate Diyagramı

stale-while-revalidate deseni, istekleri mümkün olduğunca hızlı bir şekilde yanıtlamanıza olanak tanır. Bu desen, varsa önbelleğe alınmış bir yanıtla yanıt verir ve önbelleğe alınmamışsa ağ isteğine geri döner. Ardından, önbelleği güncellemek için ağ isteği kullanılır. Bayatken yeniden doğrulama bazı uygulamalarının aksine, bu strateji, önbelleğe alınmış yanıtın yaşına bakılmaksızın her zaman 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 (Ağdan Geri Dönüşlü Önbellek)

Önce Önbelleğe Alınan Şema

Çevrimdışı web uygulamaları büyük ölçüde önbelleğe bağlıdır ancak kritik olmayan ve kademeli olarak önbelleğe alınabilen öğeler için en iyi seçenek önce önbellek'tir.

Önbellekte bir yanıt varsa istek, önbelleğe alınmış yanıt kullanılarak karşılanır ve ağ hiç kullanılmaz. Önbelleğe alınmış bir yanıt yoksa istek bir ağ isteğiyle karşılanır ve yanıt önbelleğe alınır. Böylece sonraki istek doğrudan önbellekten sunulur.

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ğ Diyagramı

Sık sık güncellenen istekler için ağa öncelik stratejisi ideal çözümdür. Varsayılan olarak, ağdan en son yanıtı getirmeye çalışır. İstek başarılı olursa yanıtı önbelleğe yerleştirir. Ağ yanıt döndürmezse ö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ğ Diyagramı

Ağdan belirli isteklerin karşılanmasını istiyorsanız kullanmanız gereken 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 Önbelleğe Alınmış Şema

Yalnızca önbellek stratejisi, yanıtların önbellekten alınmasını sağlar. Bu durum Workbox'ta 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 stratejilerde şunları yapılandırabilirsiniz:

  • Stratejide kullanılacak önbelleğin adı.
  • Stratejide kullanılacak önbellek geçerlilik süresi kısıtlamaları.
  • Bir isteği getirirken ve önbelleğe alırken yaşam döngüsü yöntemleri çağrılacak eklentiler dizisi.

Strateji Tarafından Kullanılan Önbelleği Değiştirme

Önbellek adı sağlayarak kullanılan önbellek stratejisini değiştirebilirsiniz. Bu seçenek, hata ayıklamaya yardımcı olmak için öğelerinizi ayırmak istiyorsanız yararlı 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 herhangi birini (veya özel bir eklentiyi) kullanmak için plugins seçeneğine örnekler iletmeniz 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, Strategy temel sınıfını workbox-strategies içe aktarıp genişleterek yapılabilir:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

Bu örnekte, belirli bir işleme mantığını tanımlamak için istek stratejisi olarak handle() kullanılır. Kullanılabilecek iki istek stratejisi vardır:

  • handle(): İstek stratejisi uygulayın ve ilgili tüm eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürün.
  • handleAll(): handle()'ye benzer ancak iki Promise nesnesi döndürür. Birincisi, handle() tarafından döndürülen değere eşdeğerdir. İkincisi ise strateji kapsamında event.waitUntil()'ye 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 oluşturulan bir handler örneği.StrategyHandler

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() kullanıldığında yararlanabileceğiniz bir dizi getirme ve önbelleğe alma işlemi sunar:

  • fetch: Belirli bir isteği getirir ve requestWillFetch(), fetchDidSucceed() ve fetchDidFail() eklenti yaşam döngüsü yöntemlerini çağırır.
  • cacheMatch: Önbellekteki bir istekle eşleşir ve cacheKeyWillBeUsed() ile cachedResponseWillBeUsed() eklentisinin yaşam döngüsü yöntemlerini çağırır.
  • cachePut: İstek/yanıt çiftini önbelleğe yerleştirir ve cacheKeyWillBeUsed(), cacheWillUpdate() ve cacheDidUpdate() eklenti yaşam döngüsü yöntemlerini çağırır.
  • fetchAndCachePut: fetch() tarafından oluşturulan yanıtta fetch()'yi çağırır ve cachePut()'yi arka planda çalıştırır.
  • hasCallback: Geri aramayı giriş olarak alır ve stratejide belirtilen geri aramaya sahip en az bir eklenti varsa true değerini döndürür.
  • runCallbacks: Belirli bir adla eşleşen tüm eklenti geri çağırma işlevlerini sırayla çalıştırır ve tek bağımsız değişken olarak belirli bir param nesnesi (mevcut eklenti durumuyla birleştirilmiş) geçirir.
  • iterateCallbacks: Geri aramayı kabul eder ve eşleşen eklenti geri aramalarının yinelenebilir bir sürümünü döndürür.Burada her geri arama, mevcut işleyici durumuyla sarmalanır (ör. her geri aramayı çağırdığınızda, ilettiğiniz nesne parametresi eklentinin mevcut durumuyla birleştirilir).
  • waitUntil: İşlenen istekle (genellikle FetchEvent) ilişkili etkinliğin ömrüyle ilgili sözleri uzatmak için bir söz ekler.
  • doneWaiting: waitUntil()'ye iletilen tüm sözler yerine getirildikten sonra yerine getirilen bir söz döndürür.
  • destroy: Stratejinin çalışmasını durdurur ve bekleyen waitUntil() sözlerini hemen yerine getirir.

Özel Önbellek Ağı Yarış Stratejisi

Aşağıdaki örnek, Offline Cookbook'taki (Workbox'ın sağlamadığı) cache-network-race temel alınarak oluşturulmuştur ancak bir adım daha ileri giderek başarılı bir ağ isteğinden sonra her zaman önbelleği günceller. Bu, birden fazla işlem kullanan daha karmaşık bir strateji örneğidir.

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);
          }
        }
      );
    });
  }
}

İleri Seviye Kullanım

Stratejileri kendi getirme etkinliği mantığınızda kullanmak istiyorsanız belirli bir strateji üzerinden istek çalıştırmak için strateji sınıflarını kullanabilirsiniz.

Örneğin, stale-while-revalidate 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}));
  }
});

Kullanılabilir sınıfların listesini workbox-strategies referans belgelerinde bulabilirsiniz.

Türler

CacheFirst

Önce önbellek istek stratejisinin uygulanması.

/styles/example.a8f5f1.css gibi URL'ler uzun süre önbelleğe alınabildiğinden, revize edilmiş öğeler için öncelikle önbellek stratejisi kullanmak faydalıdır.

Ağ isteği başarısız olursa ve önbellek eşleşmesi yoksa bu durum WorkboxError istisnasına neden olur.

Özellikler

  • oluşturucu

    geçersiz

    Stratejinin yeni bir örneğini oluşturur ve belgelenmiş tüm seçenek özelliklerini herkese açık örnek özellikleri olarak ayarlar.

    Not: Özel bir strateji sınıfı, temel Strateji sınıfını genişletiyorsa ve bu özelliklerden fazlasına ihtiyaç duymuyorsa kendi oluşturucusunu 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

    geçersiz

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

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

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    İstek stratejisi gerçekleştirir ve tüm alakalı eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürür.

    Bir strateji örneği Workbox'a kaydedildiğinde workbox-routing.Route, bu yöntem rota eşleştiğinde otomatik olarak çağrılır.

    Alternatif olarak, bu yöntem event.respondWith()'ye iletilerek bağımsız bir FetchEvent dinleyicide de kullanılabilir.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'ya benzer ancak Response'ye çözümlenen bir Promise döndürmek yerine, [response, done] vaatlerinden oluşan bir demet döndürür. Burada ilki (response), handle()'ın döndürdüğüne eşdeğerdir ve ikincisi, stratejiyi gerçekleştirme kapsamında event.waitUntil()'ye eklenen tüm vaatler tamamlandığında çözümlenecek bir vaattir.

    Stratejinin gerçekleştirdiği ek işlemlerin (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığı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

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      [response, done] demeti, yanıtın ne zaman çözümlendiğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilen sözlerdir.

CacheOnly

Yalnızca önbellek istek stratejisinin uygulanması.

Bu sınıf, Workbox eklentilerinden yararlanmak istiyorsanız kullanışlıdır.

Önbellekte eşleşme yoksa WorkboxError istisnası oluşturulur.

Özellikler

  • oluşturucu

    geçersiz

    Stratejinin yeni bir örneğini oluşturur ve belgelenmiş tüm seçenek özelliklerini herkese açık örnek özellikleri olarak ayarlar.

    Not: Özel bir strateji sınıfı, temel Strateji sınıfını genişletiyorsa ve bu özelliklerden fazlasına ihtiyaç duymuyorsa kendi oluşturucusunu 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

    geçersiz

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

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

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    İstek stratejisi gerçekleştirir ve tüm alakalı eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürür.

    Bir strateji örneği Workbox'a kaydedildiğinde workbox-routing.Route, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.

    Alternatif olarak, bu yöntem event.respondWith()'ye iletilerek bağımsız bir FetchEvent dinleyicide de kullanılabilir.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'ya benzer ancak Response'ye çözümlenen bir Promise döndürmek yerine, [response, done] vaatlerinden oluşan bir demet döndürür. Burada ilki (response), handle()'ın döndürdüğüne eşdeğerdir ve ikincisi, stratejiyi gerçekleştirme kapsamında event.waitUntil()'ye eklenen tüm vaatler tamamlandığında çözümlenecek bir vaattir.

    Stratejinin gerçekleştirdiği ek işlemlerin (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığı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

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      [response, done] demeti, yanıtın ne zaman çözümlendiğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilen sözlerdir.

NetworkFirst

Bir ağ öncelikli istek stratejisinin uygulanması.

Bu strateji, varsayılan olarak 200 durum koduna sahip yanıtların yanı sıra opak yanıtları da önbelleğe alır. Opak yanıtlar, yanıtın CORS'u desteklemediği merkezler arası isteklerdir.

Ağ isteği başarısız olursa ve önbellek eşleşmesi yoksa bu durum WorkboxError istisnasına neden olur.

Özellikler

  • oluşturucu

    geçersiz

    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

    geçersiz

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

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

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    İstek stratejisi gerçekleştirir ve tüm alakalı eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürür.

    Bir strateji örneği Workbox'a kaydedildiğinde workbox-routing.Route, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.

    Alternatif olarak, bu yöntem event.respondWith()'ye iletilerek bağımsız bir FetchEvent dinleyicide de kullanılabilir.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'ya benzer ancak Response'ye çözümlenen bir Promise döndürmek yerine, [response, done] vaatlerinden oluşan bir demet döndürür. Burada ilki (response), handle()'ın döndürdüğüne eşdeğerdir ve ikincisi, stratejiyi gerçekleştirme kapsamında event.waitUntil()'ye eklenen tüm vaatler tamamlandığında çözümlenecek bir vaattir.

    Stratejinin gerçekleştirdiği ek işlemlerin (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığı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

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      [response, done] demeti, yanıtın ne zaman çözümlendiğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilen sözlerdir.

NetworkFirstOptions

Özellikler

  • cacheName

    dize isteğe bağlı

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • networkTimeoutSeconds

    number isteğe bağlı

  • plugins

    WorkboxPlugin[] isteğe bağlı

NetworkOnly

Yalnızca ağ isteği stratejisinin uygulanması.

Bu sınıf, Workbox eklentilerinden yararlanmak istiyorsanız kullanışlıdır.

Ağ isteği başarısız olursa WorkboxError istisnası oluşturulur.

Özellikler

  • oluşturucu

    geçersiz

    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

    geçersiz

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

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

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    İstek stratejisi gerçekleştirir ve tüm alakalı eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürür.

    Bir strateji örneği Workbox'a kaydedildiğinde workbox-routing.Route, bu yöntem rota eşleştiğinde otomatik olarak çağrılır.

    Alternatif olarak, bu yöntem event.respondWith()'ye iletilerek bağımsız bir FetchEvent dinleyicide de kullanılabilir.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'ya benzer ancak Response'ye çözümlenen bir Promise döndürmek yerine, [response, done] vaatlerinden oluşan bir demet döndürür. Burada ilki (response), handle()'ın döndürdüğüne eşdeğerdir ve ikincisi, stratejiyi gerçekleştirme kapsamında event.waitUntil()'ye eklenen tüm vaatler tamamlandığında çözümlenecek bir vaattir.

    Stratejinin gerçekleştirdiği ek işlemlerin (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığı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

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      [response, done] demeti, yanıtın ne zaman çözümlendiğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilen sözlerdir.

NetworkOnlyOptions

Özellikler

  • fetchOptions

    RequestInit isteğe bağlı

  • networkTimeoutSeconds

    number isteğe bağlı

  • plugins

    WorkboxPlugin[] isteğe bağlı

StaleWhileRevalidate

Eski verileri yeniden doğrularken kullanma istek stratejisinin uygulanması.

Kaynaklar hem önbellekten hem de ağdan paralel olarak istenir. Strateji, varsa önbelleğe alınmış sürümle yanıt verir, aksi takdirde ağ yanıtını bekler. Önbellek, her başarılı istekte ağ yanıtıyla güncellenir.

Bu strateji, varsayılan olarak 200 durum koduna sahip yanıtların yanı sıra opak yanıtları da önbelleğe alır. Opak yanıtlar, yanıtın CORS'u desteklemediği merkezler arası isteklerdir.

Ağ isteği başarısız olursa ve önbellek eşleşmesi yoksa bu durum WorkboxError istisnasına neden olur.

Özellikler

  • oluşturucu

    geçersiz

    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

    geçersiz

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

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

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    İstek stratejisi gerçekleştirir ve tüm alakalı eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürür.

    Bir strateji örneği Workbox'a kaydedildiğinde workbox-routing.Route, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.

    Alternatif olarak, bu yöntem event.respondWith()'ye iletilerek bağımsız bir FetchEvent dinleyicide de kullanılabilir.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'ya benzer ancak Response'ye çözümlenen bir Promise döndürmek yerine, [response, done] vaatlerinden oluşan bir demet döndürür. Burada ilki (response), handle()'ın döndürdüğüne eşdeğerdir ve ikincisi, stratejiyi gerçekleştirme kapsamında event.waitUntil()'ye eklenen tüm vaatler tamamlandığında çözümlenecek bir vaattir.

    Stratejinin gerçekleştirdiği ek işlemlerin (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığı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

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      [response, done] demeti, yanıtın ne zaman çözümlendiğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilen sözlerdir.

Strategy

Diğer tüm strateji sınıflarının genişletmesi gereken soyut bir temel sınıf:

Özellikler

  • oluşturucu

    geçersiz

    Stratejinin yeni bir örneğini oluşturur ve belgelenmiş tüm seçenek özelliklerini herkese açık örnek özellikleri olarak ayarlar.

    Not: Özel bir strateji sınıfı, temel Strateji sınıfını genişletiyorsa ve bu özelliklerden fazlasına ihtiyaç duymuyorsa kendi oluşturucusunu 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

    geçersiz

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

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

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

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

    • returns

      Promise<Response>

  • _handle

    geçersiz

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

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    İstek stratejisi gerçekleştirir ve tüm alakalı eklenti geri çağırmalarını tetikleyerek Response ile çözümlenecek bir Promise döndürür.

    Bir strateji örneği Workbox'a kaydedildiğinde workbox-routing.Route, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.

    Alternatif olarak, bu yöntem event.respondWith()'ye iletilerek bağımsız bir FetchEvent dinleyicide de kullanılabilir.

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

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'ya benzer ancak Response'ye çözümlenen bir Promise döndürmek yerine, [response, done] vaatlerinden oluşan bir demet döndürür. Burada ilki (response), handle()'ın döndürdüğüne eşdeğerdir ve ikincisi, stratejiyi gerçekleştirme kapsamında event.waitUntil()'ye eklenen tüm vaatler tamamlandığında çözümlenecek bir vaattir.

    Stratejinin gerçekleştirdiği ek işlemlerin (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığı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

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      [response, done] demeti, yanıtın ne zaman çözümlendiğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilen sözlerdir.

StrategyHandler

Bir Strateji örneği her workbox-strategies.Strategy~handle veya workbox-strategies.Strategy~handleAll çağırdığında oluşturulan bir sınıf. Bu sınıf, tüm getirme ve önbelleğe alma işlemlerini eklenti geri çağırmaları etrafında sarmalar ve stratejinin ne zaman "tamamlandığını" (yani eklenen tüm event.waitUntil() vaatleri çözümlendiğinde) takip eder.

Özellikler

  • oluşturucu

    geçersiz

    Geçirilen strateji ve isteği işleyen etkinlik ile ilişkili yeni bir örnek oluşturur.

    Oluşturucu, bu isteği işleyen eklentilerin her birine iletilecek durumu da başlatır.

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

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • etkinlik

    ExtendableEvent

  • params

    herhangi bir isteğe bağlı

  • istek

    İstek

  • url

    URL isteğe bağlıdır.

  • cacheMatch

    geçersiz

    Strateji nesnesinde tanımlanan cacheName, matchOptions ve plugins kullanılarak önbellekteki bir istekle eşleşir (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:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

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

    (key: RequestInfo) => {...}

    • anahtar

      RequestInfo

      Önbellek anahtarı olarak kullanılacak istek veya URL.

    • returns

      Promise<Response>

      Eşleşen bir yanıt bulunursa.

  • cachePut

    geçersiz

    Strateji nesnesinde tanımlanan cacheName ve plugins kullanılarak önbelleğe bir istek/yanıt çifti yerleştirilir (ve geçerli tüm eklenti geri çağırma yöntemleri çağrılır).

    Bu yöntem kullanılırken aşağıdaki eklenti yaşam döngüsü yöntemleri çağrılır:

    • cacheKeyWillBeUsed()
    • 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.

    • gönderin

      Yanıt

      Önbelleğe alınacak yanıt.

    • returns

      Promise<boolean>

      false cacheWillUpdate yanıtın önbelleğe alınmamasına neden olduysa ve true aksi durumda.

  • kaldırmak

    geçersiz

    Stratejinin çalışmasını durdurur ve bekleyen tüm sözleri hemen yerine getirir.waitUntil()

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

    () => {...}

  • doneWaiting

    geçersiz

    workbox-strategies.StrategyHandler~waitUntil öğesine iletilen tüm sözler yerine getirildikten sonra çözümlenen bir söz döndürür.

    Not: doneWaiting() işlemi tamamlandıktan sonra yapılan tüm çalışmalar, bir etkinliğin waitUntil() yöntemine (bu işleyicinin waitUntil() yöntemine değil) manuel olarak iletilmelidir. Aksi takdirde, çalışmanız tamamlanmadan önce hizmet çalışanı iş parçacığı sonlandırılabilir.

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

    () => {...}

    • returns

      Promise<void>

  • getirmek

    geçersiz

    fetchOptions (gezinme dışı istekler için) ve Strategy nesnesinde tanımlanan plugins kullanarak belirli bir isteği getirir (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:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

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

    (input: RequestInfo) => {...}

    • giriş

      RequestInfo

      Getirilecek URL veya istek.

    • returns

      Promise<Response>

  • fetchAndCachePut

    geçersiz

    this.fetch() yöntemini çağırır ve (arka planda) this.fetch() tarafından oluşturulan yanıtta this.cachePut() yöntemini çalıştırır.

    this.cachePut() çağrısı this.waitUntil() işlevini otomatik olarak tetiklediğinden, etkinlikte waitUntil() işlevini manuel olarak çağırmanız gerekmez.

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

    (input: RequestInfo) => {...}

    • giriş

      RequestInfo

      Getirilip önbelleğe alınacak istek veya URL.

    • returns

      Promise<Response>

  • getCacheKey

    geçersiz

    cacheKeyWillBeUsed geri çağırması için eklenti listesini kontrol eder ve bulunan geri çağırmaları sırayla yürütür. Son eklenti tarafından döndürülen son Request nesne, önbellek okuma ve/veya yazma işlemleri için önbellek anahtarı olarak kabul edilir. cacheKeyWillBeUsed eklenti geri çağırmaları kaydedilmemişse iletilen istek değiştirilmeden döndürülür.

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

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • istek

      İstek

    • mod

      "read"
       | "write"

    • returns

      Promise<Request>

  • hasCallback

    geçersiz

    Stratejide, verilen geri çağırma işlevine sahip en az bir eklenti varsa true değerini döndürür.

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

    (name: C) => {...}

    • ad

      C

      Kontrol edilecek geri arama işlevinin adı.

    • returns

      boolean

  • iterateCallbacks

    geçersiz

    Geri aramayı kabul eder ve eşleşen eklenti geri aramalarının yinelenebilir bir öğesini döndürür.Burada her geri arama, mevcut işleyici durumuyla sarmalanır (ör. her geri aramayı çağırdığınızda, ilettiğiniz nesne parametresi eklentinin mevcut durumuyla birleştirilir).

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

    (name: C) => {...}

    • ad

      C

      Çalıştırılacak geri çağırma işlevinin adı

    • returns

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    geçersiz

    Belirtilen 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 belirtilen parametre nesnesini (mevcut eklenti durumuyla birleştirilmiş) geçirir.

    Not: Bu yöntem tüm eklentileri çalıştırdığından, bir geri çağırmanın dönüş değerinin bir sonraki geri çağırma çağrılmadan önce uygulanması gereken durumlarda uygun değildir. Bu durumu nasıl ele alacağınızı öğrenmek için workbox-strategies.StrategyHandler#iterateCallbacks aşağıya bakın.

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

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • ad

      C

      Her eklentide çalıştırılacak geri çağırma işlevinin adı.

    • param

      Omit<indexedAccess"state"
      >

      Her geri çağırma işlevi yürütülürken ilk (ve tek) parametre olarak geçirilecek nesne. Bu nesne, geri çağırma yürütülmeden önce mevcut eklenti durumuyla birleştirilir.

    • returns

      Promise<void>

  • waitUntil

    geçersiz

    İşlenen istekle ilişkili etkinliğin (genellikle bir FetchEvent) [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises bölümüne bir söz ekler.

    Not: Eklenen tüm sözler yerine getirildiğinde bildirim almak için await workbox-strategies.StrategyHandler~doneWaiting işlemini kullanabilirsiniz.

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

    (promise: Promise<T>) => {...}

    • promise

      Promise<T>

      İsteği tetikleyen etkinliğin ömrünü uzatma sözlerine ekleme sözü.

    • returns

      Promise<T>

StrategyOptions

Özellikler

  • cacheName

    dize isteğe bağlı

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[] isteğe bağlı