Web uygulamanızdaki bazı öğeler nadiren kullanılıyor, çok büyük olabilir veya kullanıcının cihazına (duyarlı resimler gibi) ya da diline göre farklılık gösterebilir. Bunlar, önbelleğe almanın bir kalıbın ters olduğu durumlardır ve bunun yerine çalışma zamanı önbelleğe alma özelliğini kullanmanız gerekir.
Workbox'ta, rotaları eşleştirmek için workbox-routing
modülünü kullanarak öğeler için çalışma zamanı önbelleğe alma işlemini yapabilir ve workbox-strategies
modülü ile bu öğeler için önbelleğe alma stratejilerini yönetebilirsiniz.
Önbelleğe alma stratejileri
Öğelerin çoğu rotasını, yerleşik önbelleğe alma stratejilerinden biriyle işleyebilirsiniz. Bunlar, bu dokümanın önceki bölümlerinde ayrıntılı olarak ele alınmıştır, ancak özetlemeye değer birkaç örneği aşağıda bulabilirsiniz:
- Eski Halde Yeniden Doğrulama, varsa bir istek için önbelleğe alınan bir yanıt kullanır ve arka planda önbelleği ağdan gelen bir yanıtla günceller. Bu nedenle, öğe önbelleğe alınmamışsa ağın yanıtını bekler ve bunu kullanır. Bu oldukça güvenli bir stratejidir, çünkü buna dayanan önbellek girişlerini düzenli olarak günceller. Kötü tarafı ise her zaman arka planda ağdan bir öğe istemesidir.
- Önce Ağ, önce ağdan yanıt almaya çalışır. Yanıt alınırsa, tarayıcıya bu yanıtı iletir ve bir önbelleğe kaydeder. Ağ isteği başarısız olursa önbelleğe alınmış son yanıt kullanılır ve öğeye çevrimdışı erişim etkinleştirilir.
- Önce Önbellek, önce önbelleği kontrol eder ve varsa yanıtı kullanır. İstek önbellekte değilse ağ kullanılır ve geçerli yanıtlar tarayıcıya iletilmeden önce önbelleğe eklenir.
- Yalnızca Ağ, yanıtı ağdan gelmeye zorlar.
- Yalnızca Önbellek, yanıtı önbellekten gelmeye zorlar.
Bu stratejileri, workbox-routing
tarafından sunulan yöntemleri kullanarak belirli isteklere uygulayabilirsiniz.
Rota eşleştirme ile önbelleğe alma stratejileri uygulama
workbox-routing
, rotaları eşleştirmek ve bunları bir önbelleğe alma stratejisiyle işlemek için bir registerRoute
yöntemi sunar. registerRoute
, iki bağımsız değişkeni kabul eden bir Route
nesnesini kabul eder:
- Rota eşleştirme ölçütlerini belirtmek için bir dize, normal ifade veya eşleşme geri çağırması.
- Rotanın işleyicisi (genellikle
workbox-strategies
tarafından sağlanan bir strateji).
Request
nesnesini, istek URL'si dizesini, getirme etkinliğini ve isteğin aynı kaynak isteği olup olmadığına dair bir boole değeri sağladıkları için eşleştirme geri çağırmalarının rotaları eşleştirmesi tercih edilir.
Daha sonra işleyici, eşleşen rotayı işler. Aşağıdaki örnekte, gelen aynı kaynak görüntü istekleriyle eşleşen yeni bir rota oluşturulmuştur. Önce önbellek, ağ stratejisine yedek olarak uygulanır.
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
return sameOrigin && request.destination === 'image'
}, new CacheFirst());
// Register the new route
registerRoute(imageRoute);
Birden çok önbellek kullanma
Çalışma kutusu, gruplandırılmış stratejilerde bulunan cacheName
seçeneğini kullanarak önbelleğe alınan yanıtları ayrı Cache
örneklerinde gruplandırmanıza olanak tanır.
Aşağıdaki örnekte, resimler eski bir yeniden doğrulama stratejisi kullanırken CSS ve JavaScript öğeleri, önbellek öncelikli bir yedek ağ stratejisi kullanır. Her bir öğenin rotası, cacheName
özelliği eklenerek yanıtları ayrı önbelleklere yerleştirir.
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
// Handle images:
const imageRoute = new Route(({ request }) => {
return request.destination === 'image'
}, new StaleWhileRevalidate({
cacheName: 'images'
}));
// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
return request.destination === 'script';
}, new CacheFirst({
cacheName: 'scripts'
}));
// Handle styles:
const stylesRoute = new Route(({ request }) => {
return request.destination === 'style';
}, new CacheFirst({
cacheName: 'styles'
}));
// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);
![Chrome Geliştirici Araçları'nın uygulama sekmesindeki Önbellek örnekleri listesinin ekran görüntüsü. Gösterilen üç farklı önbellek vardır: biri "scripts", diğeri "styles" ve sonuncusu "images" olarak adlandırılmıştır.](https://developer.chrome.com/static/docs/workbox/caching-resources-during-runtime/image/a-screenshot-a-list-cac-bdd2858b485be.png?authuser=6&hl=tr)
Önbellek girişleri için bir süre sonu belirleme
Service Worker önbelleklerini yönetirken depolama alanı kotalarını göz önünde bulundurun. ExpirationPlugin
, önbellek bakımını basitleştirir ve workbox-expiration
tarafından kullanıma sunulur. Bunu kullanmak için bir önbelleğe alma stratejisinin yapılandırmasında belirtin:
// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
// Evict image cache entries older thirty days:
const imageRoute = new Route(({ request }) => {
return request.destination === 'image';
}, new CacheFirst({
cacheName: 'images',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 30,
})
]
}));
// Evict the least-used script cache entries when
// the cache has more than 50 entries:
const scriptsRoute = new Route(({ request }) => {
return request.destination === 'script';
}, new CacheFirst({
cacheName: 'scripts',
plugins: [
new ExpirationPlugin({
maxEntries: 50,
})
]
}));
// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
içeren bir stratejinin kullanıldığı kayıtlı rotalarla kullanılabilir
Depolama alanı kotalarına uyum sağlamak karmaşık olabilir. Depolama alanında baskı yaşayan veya depolama alanını en verimli şekilde kullanmak isteyen kullanıcıları değerlendirmek iyi bir uygulamadır. Workbox'ın ExpirationPlugin
çiftleri bu hedefe ulaşmaya yardımcı olabilir.
Kaynaklar arasıyla ilgili dikkat edilmesi gereken noktalar
Hizmet çalışanınız ile kaynaklar arası öğeler arasındaki etkileşim, aynı kaynak öğelerine kıyasla çok farklıdır. Merkezler Arası Kaynak Paylaşımı (CORS) karmaşık bir süreçtir ve bu karmaşıklık, Service Worker'da kaynaklar arası kaynakları yönetme şeklinizi de etkiler.
Donuk yanıtlar
no-cors
modunda çapraz kaynak isteğinde bulunurken yanıt, Service Worker önbelleğinde depolanabilir, hatta doğrudan tarayıcı tarafından kullanılabilir. Ancak yanıt gövdesinin kendisi JavaScript aracılığıyla okunamaz. Bu, opak yanıt olarak bilinir.
Opak yanıtlar, kaynaklar arası öğelerin incelenmesini önlemeyi amaçlayan bir güvenlik önlemidir. Kaynaklar arası öğeler için istekte bulunmaya devam edebilir, hatta bunları önbelleğe alabilirsiniz. Yanıt gövdesini okuyamaz, hatta durum kodunu okuyamazsınız.
CORS modunu etkinleştirmeyi unutmayın
Yanıtları okumanıza olanak tanıyan geniş kapsamlı CORS başlıkları ayarlayan kaynaklar arası öğeler yükleseniz bile, kaynaklar arası yanıt gövdesi opak olabilir. Örneğin, aşağıdaki HTML, hangi CORS üstbilgilerinin ayarlandığına bakılmaksızın opak yanıtlara yol açacak no-cors
isteklerini tetikler:
<link rel="stylesheet" href="https://example.com/path/to/style.css">
<img src="https://example.com/path/to/image.png">
Opak olmayan bir yanıt verecek bir cors
isteğini açık bir şekilde tetiklemek için HTML'nize crossorigin
özelliğini ekleyerek CORS modunu açıkça etkinleştirmeniz gerekir:
<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">
Hizmet çalışanınızdaki rotaların, çalışma zamanında yüklenen alt kaynaklarını önbelleğe aldığı zamanları unutmamak önemlidir.
Çalışma kutusu, opak yanıtları önbelleğe alamaz
Varsayılan olarak Workbox, opak yanıtları önbelleğe alma konusunda temkinli bir yaklaşım izler. Opak yanıtlar için yanıt kodunu incelemek imkansız olduğundan, bir hata yanıtının önbelleğe alınması, önbellek öncelikli veya yalnızca önbellek stratejileri kullanılırsa kalıcı olarak bozuk bir deneyime neden olabilir.
Workbox'ta opak bir yanıtı önbelleğe almanız gerekiyorsa bunu işlemek için ağ öncelikli veya eski (eski) stratejilerini kullanmanız gerekir. Evet, bu durum öğenin her seferinde ağdan istenmeye devam edeceği anlamına gelir. Ancak, başarısız yanıtların devam etmesini ve sonunda kullanılabilir yanıtlarla değiştirilmesini sağlar.
Başka bir önbelleğe alma stratejisi kullanırsanız ve opak bir yanıt döndürülürse Workbox, geliştirme modundayken yanıtın önbelleğe alınmadığı konusunda sizi uyarır.
Opak yanıtların önbelleğe alınmasını zorunlu kıl
Önbellek öncelikli veya yalnızca önbellek stratejisini kullanarak opak bir yanıtı önbelleğe almak istediğinizden kesinlikle eminseniz Workbox'ı workbox-cacheable-response
modülü ile bunu yapmaya zorlayabilirsiniz:
import {Route, registerRoute} from 'workbox-routing';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
const cdnRoute = new Route(({url}) => {
return url === 'https://cdn.google.com/example-script.min.js';
}, new CacheFirst({
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200]
})
]
}))
registerRoute(cdnRoute);
Opak Yanıtlar ve navigator.storage
API
Alanlar arası bilgilerin sızdırılmasını önlemek amacıyla, depolama alanı kota sınırlarını hesaplamak için kullanılan opak bir yanıtın boyutuna önemli ölçüde dolgu eklenir. Bu durum, navigator.storage
API'nin depolama alanı kotalarını nasıl raporlayacağını etkiler.
Bu dolgu tarayıcıya göre değişir, ancak Chrome için önbelleğe alınan herhangi bir opak yanıtın toplam depolama alanına katkıda bulunduğu minimum boyut yaklaşık 7 megabayttır. Depolama alanı kotalarını normalde beklediğinizden çok daha kısa sürede aşabileceğiniz için kaç opak yanıtı önbelleğe almak istediğinizi belirlerken bunu aklınızda bulundurmalısınız.