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

Öğeleri çalışma zamanında önbelleğe alırken, belirli bir yanıtın "geçerli" olup olmadığı ve kaydedilip yeniden kullanılmaya uygun olup olmadığı konusunda her duruma uyan tek bir kural yoktur.

workbox-cacheable-response modülü, bir yanıtın sayısal durum koduna, belirli bir değere sahip bir başlığa veya bu ikisinin bir kombinasyonuna göre önbelleğe alınması gerekip gerekmediğini belirlemenin standart bir yolunu sunar.

Durum Kodlarına Dayalı Önbelleğe Alma

Bir stratejinin plugins parametresine CacheableResponsePlugin örneği ekleyerek bir çalışma kutusu stratejisini bir dizi durum kodunu önbelleğe almaya uygun olarak kabul edecek şekilde yapılandırabilirsiniz:

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, isteklerin yanıtlarını https://third-party.example.com/images/ doğrultusunda işlerken tüm istekleri 0 veya 200 durum koduyla önbelleğe aldığını bildirir.

Üstbilgilere Dayalı Önbelleğe Alma

Eklentiyi oluştururken headers nesnesini ayarlayarak önbelleğe eklenmek için ölçüt olarak belirli başlık değerlerinin olup olmadığını kontrol etmek üzere bir Çalışma Kutusu 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ını işlerken X-Is-Cacheable adlı başlığa (sunucu tarafından yanıta eklenecek) bakın. Bu üstbilgi mevcutsa ve "true" değerine ayarlanmışsa yanıt önbelleğe alınabilir.

Birden fazla başlık belirtilirse başlıklardan yalnızca birinin ilişkili değerlerle eşleşmesi gerekir.

Üstbilgilere ve Durum Kodlarına Dayalı Önbelleğe Alma

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

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?

Workbox'ın yerleşik stratejilerinden birini, açık bir şekilde cacheableResponse.CacheableResponsePlugin yapılandırması olmadan 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:

• staleUsingReValidate ve networkFirst: 0 (ör. opak yanıtlar) veya 200 durumuna sahip yanıtlar önbelleğe alınabilir olarak değerlendirilir.
• cacheFirst: 200 durumundaki yanıtlar önbelleğe alınabilir olarak kabul edilir.

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

Neden Farklı Varsayılanlar var?

Varsayılanlar, 0 durumuna sahip yanıtların (ör. opak yanıtlar) önbelleğe alınıp alınmayacağına göre değişiklik gösterir. Opak yanıtların "kara kutu" yapısı nedeniyle, hizmet çalışanı yanıtın geçerli olup olmadığını veya kaynaklar arası sunucudan döndürülen bir hata yanıtını yansıtıp yansıtmadığını anlayamaz.

Önbelleğe alınan yanıtı güncellemeyle ilgili staleSomeReValidate ve networkFirst gibi bazı yöntemleri içeren stratejilerde geçici bir hata yanıtının önbelleğe alınması riski, önbelleğin bir sonraki güncellendiğinde uygun, başarılı bir yanıt kullanılması düşünülerek azaltılır.

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

Gelişmiş Kullanım

Aynı önbelleğe alma mantığını Çalışma Kutusu stratejisi dışında kullanmak istiyorsanız doğrudan CacheableResponse sınıfını kullanabilirsiniz.

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