Öğ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) veya200
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 deheaders
belirtilirse her iki koşul daResponse
öğ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) => {...}
-
yapılandırma
CacheableResponseOptions isteğe bağlı
-
returns
-
-
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ınabiliyorsatrue
vefalse
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 deheaders
belirtilmişseResponse
'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) => {...}
-
yapılandırma
-
returns
-