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