çalışma kutusu-stratejileri

Hizmet çalışanları ilk kez kullanıma sunulduğunda, yaygın olarak kullanılan bir dizi önbelleğe alma stratejisi ortaya çıktı. Önbelleğe alma stratejisi, bir hizmet çalışanının 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ğlar. Böylece, bunları hizmet işleyicinize kolayca uygulayabilirsiniz.

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

Stratejileri kullanma

Aşağıdaki örneklerde, Workbox önbelleğe alma stratejilerinin workbox-routing ile nasıl kullanılacağı gösterilmektedir. Her stratejiyle birlikte tanımlayabileceğiniz bazı seçenekler vardır. Bu seçenekler bu dokümanın "Stratejileri Yapılandırma" bölümünde ele alınmıştı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.

Stale-While-Revalidate

Diyagram Yeniden Doğrulanırken Eski

stale-while-revalidate kalıbı, varsa önbelleğe alınmış bir yanıtla isteğe en kısa sürede yanıt vermenize olanak tanır. Önbelleğe alınmamışsa ağ isteğine geri döner. Ardından ağ isteği, önbelleği güncellemek için kullanılır. Eski yanıtı yeniden doğrulama işleminin bazı uygulamalarının aksine bu strateji, önbelleğe alınan yanıtın yaşından bağımsız olarak her zaman yeniden doğrulama isteği gönderir.

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 Önbelleğe Al (Önbellek Ağa Geri Dönüyor)

İlk Şemayı Önbelleğe Alma

Çevrimdışı web uygulamaları büyük ölçüde önbelleğe dayanır ancak kritik olmayan ve kademeli olarak önbelleğe alınabilen öğeler için önce önbelleğe alma en iyi seçenektir.

Ö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, sonraki istek doğrudan önbellekten yayınlanacak şekilde ö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 Dönüyor)

Ağ Öncelikli Diyagram

Sık güncellenen istekler için ağ öncelikli strateji 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 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ğ Diyagramı

Belirli isteklerin ağdan karşılanması gerekiyorsa kullanmanız gereken strateji yalnızca ağ stratejisidir.

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ınan Şema

Yalnızca önbelleğe 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 şunları yapılandırmanıza olanak tanır:

  • Stratejide kullanılacak önbelleğin adı.
  • Stratejide kullanılacak önbelleğe alma süresi sonu kısıtlamaları.
  • Bir istek getirilip önbelleğe alındığında yaşam döngüsü yöntemleri çağrılacak bir dizi eklenti.

Bir strateji tarafından kullanılan önbelleği değiştirme

Bir önbellek adı sağlayarak kullanılan önbellek stratejisini değiştirebilirsiniz. Bu, hata ayıklama işlemine yardımcı olmak için öğelerinizi ayırmak istiyorsanız kullanışlıdır.

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 birlikte kullanılabilecek bir dizi eklentiyle birlikte gelir.

Bu eklentilerden herhangi birini (veya özel bir eklentiyi) kullanmak için plugins seçeneğine örnekler göndermeniz 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ıza ek olarak kendi özel stratejilerinizi oluşturmanıza da olanak tanır. Bu işlem, workbox-strategies'dan Strategy temel sınıfını 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ılabilen iki istek stratejisi vardır:

  • handle(): Bir istek stratejisi gerçekleştirin ve tüm ilgili eklenti geri çağırmalarını çağırarak Response ile çözülecek bir Promise döndürün.
  • handleAll(): handle()'a benzer ancak iki Promise nesnesi döndürür. İlki, handle()'ün döndürdüğü değere eşdeğerdir ve ikincisi, strateji içinde event.waitUntil()'a eklenen vaatler tamamlandığında çözülür.

Her iki istek stratejisi de iki parametreyle çağrılır:

  • request: Stratejinin yanıt döndüreceği Request.
  • handler: Geçerli strateji için otomatik olarak oluşturulan bir StrategyHandler örneği.

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 kullanılabilecek çeşitli getirme ve önbelleğe alma 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()'u çağırır ve fetch() tarafından oluşturulan yanıtta arka planda cachePut()'yi çalıştırır.
  • hasCallback: Giriş olarak bir geri çağırma alır ve stratejide belirtilen geri çağırma içeren 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 parametre nesnesini (mevcut eklenti durumuyla birleştirilmiş) iletir.
  • iterateCallbacks: Bir geri çağırma işlevi kabul eder ve her geri çağırma işlevinin geçerli işleyici durumuyla sarmalandığı eşleşen eklenti geri çağırma işlevlerinin bir iterlenebilir öğesini döndürür (yani her geri çağırma işlevini çağırdığınızda ilettiğiniz nesne parametresi, eklentinin mevcut durumuyla birleştirilir).
  • waitUntil: İşlenen istekle (genellikle bir FetchEvent) ilişkili etkinliğin ömür boyu uzatılacak vaatlerine bir vaat ekler.
  • doneWaiting: waitUntil() parametresine iletilen tüm vaatler çözüldüğünde çözülen bir vaat döndürür.
  • destroy: Stratejinin çalışmasını durdurur ve bekleyen tüm waitUntil() taahhütlerini hemen çözer.

Özel Önbellek Ağı Yarışı Stratejisi

Aşağıdaki örnek, Workbox'un sağlamadığı Çevrimdışı Tarif Defteri'ndeki cache-network-race'i temel alır 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 stratejiyle istek çalıştırmak için strateji sınıflarını kullanabilirsiniz.

Örneğin, yeniden doğrulama sırasında eski stratejiyi 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 önbelleğe alma istek stratejisinin uygulanması.

Önbelleğe alma öncelikli strateji, uzun süreler boyunca önbelleğe alınabildiğinden /styles/example.a8f5f1.css gibi düzeltilen öğeler için kullanışlıdır.

Ağ isteği başarısız olursa ve önbellekte eşleşme olmazsa WorkboxError istisnası atılır.

Özellikler

  • constructor

    geçersiz

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

    Not: Özel strateji sınıfı temel Strategy 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

    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

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

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

    Alternatif olarak bu yöntem, event.respondWith()'a iletilerek bağımsız bir FetchEvent dinleyicisinde 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'e benzer ancak yalnızca Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Stratejinin gerçekleştirdiği ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini 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>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

CacheOnly

Yalnızca önbelleğe dayalı bir istek stratejisinin uygulanması.

Bu sınıf, Workbox eklentilerinden yararlanmak istiyorsanız faydalıdır.

Önbellekte eşleşme yoksa WorkboxError istisnası atılır.

Özellikler

  • constructor

    geçersiz

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

    Not: Özel strateji sınıfı temel Strategy 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

    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

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

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

    Alternatif olarak bu yöntem, event.respondWith()'a aktarılarak bağımsız bir FetchEvent dinleyicisinde 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'e benzer ancak yalnızca Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Stratejinin gerçekleştirdiği ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini 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>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

NetworkFirst

Ağ öncelikli istek stratejisinin uygulanması.

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

Ağ isteği başarısız olursa ve önbellekte eşleşme olmazsa WorkboxError istisnası atılır.

Özellikler

  • constructor

    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

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

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

    Alternatif olarak bu yöntem, event.respondWith()'a aktarılarak bağımsız bir FetchEvent dinleyicisinde 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'e benzer ancak yalnızca Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Stratejinin gerçekleştirdiği ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini 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>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

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ğ istek stratejisinin uygulanması.

Bu sınıf, Workbox eklentilerinden yararlanmak istiyorsanız faydalıdır.

Ağ isteği başarısız olursa WorkboxError istisnası atılır.

Özellikler

  • constructor

    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

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

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

    Alternatif olarak bu yöntem, event.respondWith()'a aktarılarak bağımsız bir FetchEvent dinleyicisinde 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'e benzer ancak yalnızca Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Stratejinin gerçekleştirdiği ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini 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>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

NetworkOnlyOptions

Özellikler

  • fetchOptions

    RequestInit isteğe bağlı

  • networkTimeoutSeconds

    number isteğe bağlı

  • plugins

    WorkboxPlugin[] isteğe bağlı

StaleWhileRevalidate

Yeniden doğrulama sırasında eski 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ı istekle ağ yanıtıyla güncellenir.

Bu strateji varsayılan olarak 200 durum kodu içeren yanıtların yanı sıra saydam olmayan yanıtları da önbelleğe alır. Saydam olmayan yanıtlar, yanıtın CORS'u desteklemediği merkezler arası isteklerdir.

Ağ isteği başarısız olursa ve önbellekte eşleşme olmazsa WorkboxError istisnası atılır.

Özellikler

  • constructor

    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

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

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

    Alternatif olarak bu yöntem, event.respondWith()'a iletilerek bağımsız bir FetchEvent dinleyicisinde 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'e benzer ancak yalnızca Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Stratejinin gerçekleştirdiği ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini 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>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

Strategy

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

Özellikler

  • constructor

    geçersiz

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

    Not: Özel strateji sınıfı temel Strategy 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

    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

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

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

    Alternatif olarak bu yöntem, event.respondWith()'a aktarılarak bağımsız bir FetchEvent dinleyicisinde 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'e benzer ancak yalnızca Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Stratejinin gerçekleştirdiği ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini 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>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

StrategyHandler

Bir Strategy örneği her çağrıldığında oluşturulan bir sınıf. Bu sınıf, tüm getirme ve önbelleğe alma işlemlerini eklenti geri çağırma işlevleri etrafında sarar ve stratejinin ne zaman "tamamlandığını" (yani eklenen tüm event.waitUntil() vaatlerinin çözüldüğü) izler.workbox-strategies.Strategy~handleworkbox-strategies.Strategy~handleAll

Özellikler

  • constructor

    geçersiz

    İletilen strateji ve etkinlikle ilişkili, isteği işleyen yeni bir örnek oluşturur.

    Oluşturucu, bu isteği işleyen her eklentiye 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ı

  • cacheMatch

    geçersiz

    Strateji nesnesinde tanımlanan cacheName, matchOptions ve plugins öğelerini kullanarak önbellekten gelen bir isteği eşleştirir (ve geçerli tüm eklenti geri çağırma yöntemlerini çağırır).

    Bu yöntem kullanıldığında 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 varsa.

  • cachePut

    geçersiz

    Strateji nesnesinde tanımlanan cacheName ve plugins öğelerini 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:

    • 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ınan yanıt.

    • returns

      Promise<boolean>

      Yanıtın önbelleğe alınmamasına cacheWillUpdate neden olduysa false, aksi takdirde true değerini döndürür.

  • kaldırmak

    geçersiz

    Stratejinin çalışmasını durdurur ve bekleyen tüm waitUntil() vaatleri hemen çözer.

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

    () => {...}

  • doneWaiting

    geçersiz

    workbox-strategies.StrategyHandler~waitUntil ile iletilen tüm vaatler yerine getirildikten sonra çözülen bir vaat döndürür.

    Not: doneWaiting() yerleştikten sonra yapılan tüm işlemler, bir etkinliğin waitUntil() yöntemine manuel olarak aktarılmalıdır (bu işleyicinin waitUntil() yöntemine değil). Aksi takdirde, hizmet çalışanı iş parçacığı işiniz tamamlanmadan önce sonlandırılabilir.

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

    () => {...}

    • returns

      Promise<void>

  • getirmek

    geçersiz

    Strategy nesnesinde tanımlanan fetchOptions (gezinme dışı istekler için) ve plugins öğelerini 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()'ü çağırır ve (arka planda) this.fetch() tarafından oluşturulan yanıtta this.cachePut()'u çalıştırır.

    this.cachePut() çağrısı, this.waitUntil()'u otomatik olarak çağırır. Bu nedenle, etkinlikte waitUntil()'yi 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

      Promise<Response>

  • getCacheKey

    geçersiz

    cacheKeyWillBeUsed geri çağırması için eklenti listesini kontrol eder ve bulunan geri çağırmalardan herhangi birini sırayla yürütür. Son eklenti tarafından döndürülen nihai Request nesnesi, önbelleğe okuma ve/veya yazma işlemleri için önbelleğe anahtarı olarak değerlendirilir. Hiçbir cacheKeyWillBeUsed eklenti geri çağırma işlevi kaydedilmediyse 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 belirtilen 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 çağırma işlevinin adı.

    • returns

      boolean

  • iterateCallbacks

    geçersiz

    Bir geri çağırma işlevi kabul eder ve her geri çağırma işlevinin mevcut işleyici durumuyla sarmalandığı eşleşen eklenti geri çağırma işlevlerinin bir iterlenebilir öğesini döndürür (yani her geri çağırma işlevini ç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ğırma işlevlerini sırayla çalıştırır ve tek bağımsız değişken olarak belirtilen parametre nesnesini (mevcut eklenti durumuyla birleştirilir) iletir.

    Not: Bu yöntem tüm eklentileri çalıştırdığından, bir geri çağırma işlevinin sonraki geri çağırma işlevi çağrılmadan önce uygulanması gereken durumlar için uygun değildir. Bu destek kaydını 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üldüğünde ilk (ve tek) parametre olarak iletilecek nesne. Bu nesne, geri çağırma işlevi yürütülmeden önce mevcut eklenti durumuyla birleştirilir.

    • returns

      Promise<void>

  • waitUntil

    geçersiz

    İşlenen istekle ilişkili etkinlik etkinliğinin [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises özelliğine bir söz ekler (genellikle bir FetchEvent).

    Not: Eklenen tüm sözlerin ne zaman ödeneceğini öğrenmek için workbox-strategies.StrategyHandler~doneWaiting bekleyebilirsiniz.

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

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

    • söz

      Promise<T>

      İsteği tetikleyen etkinliğin süresi uzatılmış vaatlerine eklenecek bir vaat.

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