çalışma kutusu-önbelleğe alınabilir-yanıtı

Öğeleri çalışma zamanında önbelleğe alırken, bir testin gerçekleşip gerçekleşmediğine ilişkin verilen yanıt "geçerli" ve kaydedilip yeniden kullanılabilir durumda olması gerekir.

workbox-cacheable-response modülü, bir yanıtın sayısal durum koduna, belirli bir değere sahip bir üst bilgisinin varlığına veya ikisinin bir kombinasyonuna göre önbelleğe alınıp alınmayacağını belirlemenin standart bir yolunu sağlar.

Durum Kodlarına Göre Önbelleğe Alma

Göz önünde bulundurulması gereken bir Çalışma kutusu stratejisi yapılandırabilirsiniz. önbelleğe alma için uygun olduğunu gösteren bir durum kodu kümesi ekleyerek CacheableResponsePlugin örneğini stratejinin plugins parametresine bağlayabilirsiniz:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) =>
    url.origin === 'https://third-party.example.com' &&
    url.pathname.startsWith('/images/'),
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Bu yapılandırma, Workbox'a https://third-party.example.com/images/ için istekler, tüm istekleri önbelleğe alır 0 veya 200 durum koduna sahip.

Başlıklara Dayalı Önbelleğe Alma

Eklentiyi oluştururken headers nesnesini ayarlayarak önbelleğe eklenme ölçütü olarak belirli başlık değerlerinin bulunup bulunmadığını kontrol etmek için bir Workbox stratejisi yapılandırabilirsiniz:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

/path/to/api/ içeren istek URL'lerinin yanıtları işlenirken, X-Is-Cacheable adlı başlığa göz atın (bu sayfa, arama terimi sunucu tarafından gönderilen yanıta karşılık gelmelidir. Bu başlık mevcutsa ve bu "true" değerine ayarlanırsa yanıt önbelleğe alınabilir.

Birden fazla üstbilgi belirtilirse üstbilgilerden yalnızca birinin ilişkili değerlerle eşleşmesi gerekir.

Başlıklara ve durum kodlarına göre önbelleğe alma

Hem durum hem de üstbilgi yapılandırmasını birlikte kullanabilirsiniz. Bir yanıtın önbelleğe alınabilir olarak kabul edilmesi için her iki koşulun da karşılanması gerekir. Diğer bir deyişle, yanıtta yapılandırılmış durum kodlarından biri ve sağlanan üstbilgilerden en az biri bulunmalıdır.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

registerRoute(
  ({url}) => url.pathname.startsWith('/path/to/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200, 404],
        headers: {
          'X-Is-Cacheable': 'true',
        },
      }),
    ],
  })
);

Varsayılanlar Nedir?

cacheableResponse.CacheableResponsePlugin yapılandırmadan Workbox'un yerleşik stratejilerinden birini kullanırsanız ağdan alınan bir yanıtın önbelleğe alınıp alınmayacağını belirlemek için aşağıdaki varsayılan ölçütler kullanılır:

  • staleWhileRevalidate ve networkFirst: 0 (ör. saydam olmayan yanıtlar) veya 200 durumuna sahip yanıtlar önbelleğe alınabilir olarak kabul edilir.
  • cacheFirst: 200 durumuna sahip yanıtlar önbelleğe alınabilir olarak kabul edilir.

Varsayılan olarak, önbelleği belirlemek için yanıt başlıkları kullanılmaz.

Varsayılan değerler neden farklı?

Varsayılan değerler, 0 durumuna sahip yanıtların (ör. saydam olmayan yanıtlar) önbelleğe alınıp alınmayacağına göre değişir. Saydam olmayan yanıtların "kara kutu" yapısı nedeniyle, hizmet çalışanının yanıtın geçerli olup olmadığını veya kaynak farklı olan sunucudan döndürülen bir hata yanıtını yansıtıp yansıtmadığını bilmesi mümkün değildir.

Önbelleğe alınan yanıtı güncellemeye yönelik bazı yöntemler içeren stratejiler için staleOtherReverification ve networkFirst gibi geçici hata yanıtı, bir sonraki seferde yalnızca önbellek güncellenirse, uygun, başarılı bir yanıtın kullanılmasını umarız.

Alınan ilk yanıtın önbelleğe alınması ve bu önbelleğe alınan yanıtın süresiz olarak yeniden kullanılmasıyla ilgili stratejilerde, geçici bir hatanın önbelleğe alınması ve yeniden kullanılmasının sonuçları daha ciddidir. Varsayılan olarak güvenli tarafta olmak için cacheFirst, 200 durum koduna sahip olmadığı sürece bir yanıtı kaydetmeyi reddeder.

İleri Seviye Kullanım

Workbox stratejisinin dışında aynı önbelleğe alma mantığını kullanmak isterseniz CacheableResponse sınıfını doğrudan kullanabilir.

import {CacheableResponse} from 'workbox-cacheable-response';

const cacheable = new CacheableResponse({
  statuses: [0, 200],
  headers: {
    'X-Is-Cacheable': 'true',
  },
});

const response = await fetch('/path/to/api');

if (cacheable.isResponseCacheable(response)) {
  const cache = await caches.open('api-cache');
  cache.put(response.url, response);
} else {
  // Do something when the response can't be cached.
}

Türler

CacheableResponse

Bu sınıf, bir Response'nin önbelleğe alınabilir olarak kabul edilmesi için hangi durum kodlarının ve/veya üstbilgilerin mevcut olması gerektiğini belirleyen kurallar oluşturmanıza olanak tanır.

Özellikler

  • oluşturucu

    geçersiz

    Yeni bir CacheableResponse örneği oluşturmak için en az config özelliklerinden birini seçin.

    Hem statuses hem de headers belirtilirse her iki koşul da Response öğesinin önbelleğe alınabilir kabul edilmesi için karşılanmalıdır.

    constructor işlevi aşağıdaki gibi görünür: 

    (config?: CacheableResponseOptions) => {...}

  • isResponseCacheable

    geçersiz

    Bu nesnenin yapılandırmasına göre, bir yanıtın önbelleğe alınabilir olup olmadığını kontrol eder.

    isResponseCacheable işlevi aşağıdaki gibi görünür: 

    (response: Response) => {...}

    • gönderin

      Yanıt

      Önbelleğe alınabilirlik durumu yapılmakta olan yanıt işaretlendi.

    • returns

      boolean

      Response önbelleğe alınabiliyorsa true ve false aksi takdirde.

CacheableResponseOptions

Özellikler

  • başlıklar

    nesne isteğe bağlı

  • durumlar

    number[] isteğe bağlı

CacheableResponsePlugin

cacheWillUpdate yaşam döngüsü geri çağırma yöntemini uygulayan bir sınıf. Bu sayede, Workbox'un yerleşik stratejileri aracılığıyla yapılan isteklere önbelleğe alınabilirlik kontrolleri eklemek daha kolay hale gelir.

Özellikler

  • oluşturucu

    geçersiz

    Yeni bir CacheableResponselardaki örnek oluşturmak için şu adreste sağlamanız gerekir: config özelliklerinden en az birini seçin.

    Hem statuses hem de headers belirtilmişse Response'nin önbelleğe alınabilir olarak kabul edilmesi için her iki koşulun da karşılanması gerekir.

    constructor işlevi aşağıdaki gibi görünür: 

    (config: CacheableResponseOptions) => {...}