Eklentileri kullanma

Workbox'ı kullanırken, getirilen veya önbelleğe alınan bir isteği ve yanıtı değiştirmek isteyebilirsiniz. Çalışma kutusu eklentileri, minimum düzeyde ekstra standart metin ile hizmet çalışanınıza ek davranışlar eklemenize olanak tanır. Bunlar paketlenip kendi projelerinizde yeniden kullanılabilir veya başkalarının da kullanması için herkese açık şekilde yayınlanabilir.

Workbox, bizim için hazır birçok eklenti sağlar. Siz de işin mutfağındaysanız, uygulamanızın gereksinimlerine uygun özel eklentiler yazabilirsiniz.

Kullanılabilir Workbox eklentileri

Workbox, hizmet çalışanınızda kullanmanız için aşağıdaki resmi eklentileri sunar:

Çalışma kutusu eklentileri (yukarıda listelenen eklentilerden biri veya özel bir eklenti olabilir), stratejinin plugins özelliğine eklentinin bir örneği eklenerek Workbox stratejisiyle birlikte 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

Bir 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 mevcut istek ve/veya yanıtla ilgili bilgileri iletir ve eklentinize işlem yapması için gereken bağlamı sağlar. Aşağıdaki geri çağırma işlevleri desteklenir:

  • cacheWillUpdate: Önbelleği güncellemek için Response kullanılmadan önce çağrılır. Bu yöntemde yanıt önbelleğe eklenmeden önce değiştirilebilir veya önbelleği tamamen güncellememek için null değerini döndürebilirsiniz.
  • cacheDidUpdate: Önbelleğe yeni bir giriş eklendiğinde veya mevcut bir giriş güncellendiğinde çağrılır. Önbellek güncellemesinden sonra bir işlem yapmak istediğinizde bu yöntemi kullanan eklentiler faydalı olabilir.
  • cacheKeyWillBeUsed: İstek önbellek anahtarı olarak kullanılmadan önce çağrılır. Bu durum hem önbellek aramaları (mode 'read' olduğunda) hem de önbellek yazma işlemleri (mode 'write' olduğunda) için gerçekleşir. Bu geri çağırma, önbelleklere erişmek için URL'leri kullanmadan önce URL'leri geçersiz kılmanız veya normalleştirmeniz gerektiğinde kullanışlıdır.
  • cachedResponseWillBeUsed: Önbellekten gelen bir yanıt kullanılmadan hemen önce çağrılır ve ilgili yanıtı incelemenize olanak tanır. Bu noktada farklı bir yanıt veya null değerini döndürebilirsiniz.
  • requestWillFetch: Ağa gitmek üzere olan bir istek için çağrılır. Request ağa bağlanmadan hemen önce değiştirmeniz gerektiğinde kullanışlıdır.
  • fetchDidFail: Büyük olasılıkla ağ bağlantısı olmaması nedeniyle bir ağ isteği başarısız olduğunda çağrılır ve tarayıcının ağ bağlantısı olmasına rağmen hata aldığında (örneğin, 404 Not Found) etkinleşmez.
  • fetchDidSucceed: HTTP yanıt kodundan bağımsız olarak, bir ağ isteği başarılı olduğunda çağrılır.
  • handlerWillStart: Herhangi bir işleyici mantığı çalışmaya başlamadan önce çağrılır. Bu, ilk işleyici durumunu ayarlamanız gerektiğinde yararlı olur. Örneğin, işleyicinin yanıt oluşturmasının ne kadar sürdüğünü bilmek istiyorsanız bu geri çağırmanın başlangıç zamanını not edebilirsiniz.
  • 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 gerekiyorsa yararlı olur.
  • handlerDidRespond: Stratejinin handle() yöntemi bir yanıt döndürdükten sonra çağrılır. Bu noktada (örneğin, diğer eklentiler tarafından yapılan değişikliklerden sonra) son yanıt ayrıntılarının kaydedilmesi yararlı olabilir.
  • handlerDidComplete: Stratejinin çağrılmasından sonra etkinliğe eklenen tüm ömür boyu taahhütler yerine getirildikten sonra çağrıldı. Bu yöntem, önbellek isabet durumu, önbellek gecikmesi, ağ gecikmesi ve diğer yararlı bilgileri hesaplamak için işleyici tamamlanana kadar beklemesi gereken veriler hakkında rapor hazırlamanız gerektiğinde yararlı olur.
  • handlerDidError: İşleyici herhangi bir kaynaktan geçerli bir yanıt sağlayamazsa çağrılır. Bu, doğrudan başarısız olmaya alternatif olarak bir tür yedek yanıt sağlamak için en uygun zamandır.

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

Bir eklenti yukarıdaki geri çağırmaların tümünü kullandıysa ortaya çıkan kod şu 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 mevcut event nesnesi, getirme veya önbellek işlemini tetikleyen orijinal etkinliktir. Bazen orijinal bir etkinlik olmaz. Bu nedenle, kodunuza referansta bulunmadan önce etkinliğin mevcut olup olmadığını kontrol etmelidir.

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

Üçüncü taraf eklentiler

Geliştirdiğiniz eklentinin projeniz dışında kullanıldığını düşünüyorsanız bunu modül olarak yayınlamanızı öneririz. Aşağıda, topluluk tarafından sağlanan Workbox eklentilerinin kısa bir listesi verilmiştir:

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

Son olarak, oluşturmak istediğiniz bir Workbox eklentisi oluşturduysanız, yayınlarken workbox-plugin anahtar kelimesini ekleyin. Desteklenirseniz @WorkboxJS Twitter hesabından bizimle iletişime geçebilirsiniz.