Çalışma zamanı sırasında kaynakları önbelleğe alma

Web uygulamanızdaki bazı öğeler nadiren kullanılmış, çok büyük olabilir veya kullanıcının cihazına (duyarlı resimler gibi) ya da diline göre değişiklik gösterebilir. Bunlar, önbelleğe almanın bir kalıp dışı olabildiği durumlardır ve bunun yerine çalışma zamanı önbelleğe alma yöntemini kullanmanız gerekir.

Workbox'ta, rotaları eşleştirmek için workbox-routing modülünü kullanarak öğelerin çalışma zamanını önbelleğe alma işlemini ve workbox-strategies modülü ile bunlar için önbelleğe alma stratejilerini işleyebilirsiniz.

Önbelleğe alma stratejileri

Yerleşik önbelleğe alma stratejilerinden biriyle öğeler için çoğu rotayı işleyebilirsiniz. Bunlar, bu belgelerin önceki bölümlerinde ayrıntılı olarak ele alınmıştır ancak aşağıda özetlenen bazı bilgiler verilmiştir:

  • Stale About ReValid, istek için kullanılabiliyorsa önbellekteki yanıtı kullanır ve önbelleği ağdan gelen bir yanıtla günceller. Dolayısıyla, öğe önbelleğe alınmamışsa ağın yanıtını bekler ve kullanır. Kendisine dayanan önbellek girişlerini düzenli olarak güncellediği için bu, oldukça güvenli bir stratejidir. Olumsuz tarafı ise her zaman arka planda ağdan öğe istemesidir.
  • Network First, önce ağdan yanıt almaya çalışır. Bir yanıt alınırsa, bu yanıtı tarayıcıya iletir ve bir önbelleğe kaydeder. Ağ isteği başarısız olursa önbelleğe alınan son yanıt kullanılır ve öğeye çevrimdışı erişim etkinleştirilir.
  • Önce Önbellek, önbelleği öncelikle bir yanıt için kontrol eder ve varsa kullanır. İstek önbellekte değilse ağ kullanılır ve geçerli tüm 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.

workbox-routing tarafından sunulan yöntemleri kullanarak belirli istekler için bu stratejileri uygulayabilirsiniz.

Rota eşleştirme ile önbelleğe alma stratejilerini uygulama

workbox-routing, rotaları eşleştirmek ve bir önbelleğe alma stratejisiyle işlemek için bir registerRoute yöntemi sunar. registerRoute, iki bağımsız değişkeni kabul eden Route nesnesini kabul eder:

  1. Rota eşleştirme ölçütlerini belirtmek için kullanılan bir dize, normal ifade veya eşleşme geri çağırması.
  2. Rotanın işleyicisi. Genellikle workbox-strategies tarafından sağlanan stratejidir.

Request nesnesini, istek URL'si dizesini, getirme etkinliğini ve isteğin aynı kaynak istek olup olmadığına dair bir boole değerini içeren bir bağlam nesnesi sağladığından, rotaları eşleştirmek için eşleştirme geri çağırmaları tercih edilir.

Ardından işleyici, eşleşen rotayı işler. Aşağıdaki örnekte, gelen aynı kaynaktan gelen görüntü istekleriyle eşleşen, önce önbelleği ve ağ stratejisine geri dönmek üzere yeni bir rota oluşturulmuştur.

// 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 fazla önbellek kullanma

Çalışma kutusu, gruplandırılmış stratejilerde sunulan 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 ağ stratejisinden yararlanır. Her öğenin rotası, cacheName özelliğini ekleyerek 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);