Eklentileri kullanma

Workbox'u kullanırken, istek ve yanıtlar getirilirken veya önbelleğe alınırken bunlar üzerinde işlem yapmak isteyebilirsiniz. Workbox eklentileri, minimum düzeyde ek şablon kullanarak hizmet çalışanınıza ek davranışlar eklemenize olanak tanır. Bu modelleri paketleyip kendi projelerinizde yeniden kullanabilir veya diğer kullanıcıların da kullanabilmesi için herkese açık olarak yayınlayabilirsiniz.

Workbox, bizim için kullanıma hazır çeşitli eklentiler sağlar. Ayrıca, ustaca bir eklentiyseniz, uygulamanızın gereksinimlerine göre özel eklentiler yazabilirsiniz.

Kullanılabilir Workbox eklentileri

Workbox, hizmet çalışanınızda kullanılmak üzere aşağıdaki resmi eklentileri sunar:

Workbox eklentileri (yukarıda listelenen eklentilerden biri veya özel bir eklenti olabilir) stratejinin plugins mülküne eklenerek Workbox stratejisiyle kullanılır:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);

Özel eklenti yöntemleri

Workbox eklentisinin bir veya daha fazla geri çağırma işlevi uygulaması gerekir. Bir stratejiye eklenti eklediğinizde geri çağırma işlevleri doğru zamanda otomatik olarak çalıştırılır. Strateji, geri çağırma işlevinize geçerli istek ve/veya yanıtla ilgili bilgileri iletir. Böylece, eklentinize işlem yapması için gereken bağlamı sağlar. Aşağıdaki geri çağırma işlevleri desteklenir:

  • cacheWillUpdate: Bir önbelleği güncellemek için Response çağrılmadan önce çağrılır. Bu yöntemde, yanıt önbelleğe eklenmeden önce değiştirilebilir veya önbelleğin tamamen güncellenmesini önlemek için null döndürülebilir.
  • cacheDidUpdate: Bir önbelleğe yeni bir giriş eklendiğinde veya mevcut bir giriş güncellendiğinde çağrılır. Bu yöntemi kullanan eklentiler, önbellek güncellemesinden sonra bir işlem gerçekleştirmek istediğinizde yararlı olabilir.
  • cacheKeyWillBeUsed: Bir istek önbelleğe alma anahtarı olarak kullanılmadan önce çağrılır. Bu durum hem önbellek aramaları (mode 'read' olduğunda) hem de önbellek yazmalarında (mode 'write' olduğunda) gerçekleşir. Bu geri çağırma, önbelleklere erişmek için URL'leri kullanmadan önce geçersiz kılmanız veya normalleştirmeniz gerektiğinde kullanışlıdır.
  • cachedResponseWillBeUsed: Bu işlev, önbellekten alınan bir yanıt kullanılmadan hemen önce çağrılır ve bu yanıtı incelemenize olanak tanır. Bu noktada farklı bir yanıt döndürebilir veya null döndürebilirsiniz.
  • requestWillFetch: Ağa bir istek gönderileceği zaman çağrılır. Request, ağa gönderilmeden hemen önce değiştirmeniz gerektiğinde kullanışlıdır.
  • fetchDidFail: Bir ağ isteği başarısız olduğunda (muhtemelen ağ bağlantısı olmadığı için) çağrılır ve tarayıcıda ağ bağlantısı olsa bile bir hata (örneğin, 404 Not Found) alındığında tetiklenmez.
  • fetchDidSucceed: HTTP yanıt kodundan bağımsız olarak, bir ağ isteği başarılı olduğunda her zaman çağrılır.
  • handlerWillStart: Herhangi bir işleyici mantığı çalışmaya başlamadan önce çağrılır. İlk işleyici durumunu ayarlamanız gerekiyorsa bu yararlı olur. Örneğin, işleyicinin yanıt oluşturmasının ne kadar sürdüğünü öğrenmek isterseniz bu geri çağırma çağrısında başlangıç zamanını not alabilirsiniz.
  • handlerWillRespond: Stratejinin handle() yöntemi bir yanıt döndürmeden önce çağrılır. Bu, bir yanıtı RouteHandler veya başka bir özel mantığa döndürmeden önce değiştirmeniz gerektiğinde yararlı olur.
  • handlerDidRespond: Stratejinin handle() yöntemi bir yanıt döndürdükten sonra çağrılır. Bu durumda, nihai yanıt ayrıntılarının kaydedilmesi faydalı olabilir (örneğin, diğer eklentiler tarafından yapılan değişikliklerden sonra).
  • handlerDidComplete: Stratejinin çağrılmasından sonra etkinliğe eklenen tüm ömürlük teklifleri yerleştikten sonra çağrılır. Bu, önbellek isabeti durumu, önbellek gecikmesi, ağ gecikmesi ve diğer yararlı bilgiler gibi şeyleri hesaplamak için işleyicinin tamamlanmasını beklemesi gereken verileri bildirmeniz gerektiğinde yararlıdır.
  • handlerDidError: İşleyici herhangi bir kaynaktan geçerli bir yanıt sağlayamazsa çağrılır. Bu, doğrudan başarısız olmanın alternatifi olarak bir tür yedek yanıt sağlamanın en uygun zamanıdır.

Bu geri çağırma işlemlerinin tümü async olduğundan, bir önbellek veya getirme etkinliği söz konusu geri çağırma için ilgili noktaya ulaştığında await kullanılması gerekir.

Bir eklenti yukarıdaki geri çağırmaların tümünü kullanıyorsa ortaya çıkan kod şu şekilde olur:

const myPlugin = {
  cacheWillUpdate: async ({request, response, event, state}) => {
    // Return `response`, a different `Response` object, or `null`.
    return response;
  },
  cacheDidUpdate: async ({
    cacheName,
    request,
    oldResponse,
    newResponse,
    event,
    state,
  }) => {
    // No return expected
    // Note: `newResponse.bodyUsed` is `true` when this is called,
    // meaning the body has already been read. If you need access to
    // the body of the fresh response, use a technique like:
    // const freshResponse = await caches.match(request, {cacheName});
  },
  cacheKeyWillBeUsed: async ({request, mode, params, event, state}) => {
    // `request` is the `Request` object that would otherwise be used as the cache key.
    // `mode` is either 'read' or 'write'.
    // Return either a string, or a `Request` whose `url` property will be used as the cache key.
    // Returning the original `request` will make this a no-op.
    return request;
  },
  cachedResponseWillBeUsed: async ({
    cacheName,
    request,
    matchOptions,
    cachedResponse,
    event,
    state,
  }) => {
    // Return `cachedResponse`, a different `Response` object, or null.
    return cachedResponse;
  },
  requestWillFetch: async ({request, event, state}) => {
    // Return `request` or a different `Request` object.
    return request;
  },
  fetchDidFail: async ({originalRequest, request, error, event, state}) => {
    // No return expected.
    // Note: `originalRequest` is the browser's request, `request` is the
    // request after being passed through plugins with
    // `requestWillFetch` callbacks, and `error` is the exception that caused
    // the underlying `fetch()` to fail.
  },
  fetchDidSucceed: async ({request, response, event, state}) => {
    // Return `response` to use the network response as-is,
    // or alternatively create and return a new `Response` object.
    return response;
  },
  handlerWillStart: async ({request, event, state}) => {
    // No return expected.
    // Can set initial handler state here.
  },
  handlerWillRespond: async ({request, response, event, state}) => {
    // Return `response` or a different `Response` object.
    return response;
  },
  handlerDidRespond: async ({request, response, event, state}) => {
    // No return expected.
    // Can record final response details here.
  },
  handlerDidComplete: async ({request, response, error, event, state}) => {
    // No return expected.
    // Can report any data here.
  },
  handlerDidError: async ({request, event, error, state}) => {
    // Return a `Response` to use as a fallback, or `null`.
    return fallbackResponse;
  },
};

Yukarıda listelenen geri çağırmalarda kullanılabilen event nesnesi, getirme veya önbelleğe alma işlemini tetikleyen orijinal etkinliktir. Bazen orijinal bir etkinlik olmayabilir. Bu nedenle, kodunuz bu etkinliğe referans vermeden önce etkinliğin mevcut olup olmadığını kontrol etmelidir.

Tüm eklenti geri çağırmalarına, belirli bir eklentiye ve çağırdığı stratejiye özel bir state nesnesi de iletilir. Bu, bir geri çağırmanın, aynı eklentide başka bir geri çağırmanın yaptığına bağlı olarak koşullu olarak bir görevi gerçekleştirebileceği eklentiler yazabilmeniz anlamına gelir (örneğin, requestWillFetch() ile fetchDidSucceed() veya fetchDidFail() çalıştırma arasındaki farkı hesaplama).

Üçüncü taraf eklentileri

Bir eklenti geliştirirseniz ve bu eklentinin projenizin dışında kullanılacağını düşünüyorsanız eklentiyi modül olarak yayınlamanızı öneririz. Topluluk tarafından sağlanan Workbox eklentilerinin kısa bir listesini aşağıda bulabilirsiniz:

npm'nin deposunda arama yaparak topluluk tarafından sağlanan daha fazla Workbox eklentisi bulabilirsiniz.

Son olarak, paylaşmak istediğiniz bir Workbox eklentisi oluşturduysanız, yayınlarken workbox-plugin anahtar kelimesini ekleyin. Bu konuda yardıma ihtiyacınız olursa Twitter'da @WorkboxJS hesabından bize ulaşabilirsiniz.