ç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

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)

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

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ğ

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 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.

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

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.

Not: Her işlem tarafından kabul edilen tüm parametreleri görmek için StrategyHandler'nin kaynak uygulamasını inceleyin.

Ö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) => {...}

  • seçenekler

    StrategyOptions isteğe bağlı

  • returns

    CacheFirst

• 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) => {...}

  • handler

    StrategyHandler

  • istek

    İstek

  • etkinlik

    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) => {...}

  • seçenekler

    StrategyOptions isteğe bağlı

  • returns

    CacheOnly

• 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) => {...}

  • handler

    StrategyHandler

  • istek

    İstek

  • etkinlik

    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) => {...}

  • seçenekler

    NetworkFirstOptions isteğe bağlı

  • returns

    NetworkFirst

• 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) => {...}

  • handler

    StrategyHandler

  • istek

    İstek

  • etkinlik

    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) => {...}

  • seçenekler

    NetworkOnlyOptions isteğe bağlı

  • returns

    NetworkOnly

• 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) => {...}

  • handler

    StrategyHandler

  • istek

    İstek

  • etkinlik

    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) => {...}

  • seçenekler

    StrategyOptions isteğe bağlı

  • returns

    StaleWhileRevalidate

• 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) => {...}

  • handler

    StrategyHandler

  • istek

    İstek

  • etkinlik

    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) => {...}

  • seçenekler

    StrategyOptions isteğe bağlı

  • returns

    Strateji

• 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) => {...}

  • handler

    StrategyHandler

  • istek

    İstek

  • etkinlik

    ExtendableEvent

  • returns

    Promise<Response>

• _handle

  geçersiz

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

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

  • istek

    İstek

  • 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) => {...}

  • strateji

    Strateji

  • seçenekler

    HandlerCallbackOptions

  • returns

    StrategyHandler

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