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

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:

1. Rota eşleştirme ölçütlerini belirtmek için bir dize, normal ifade veya eşleşme geri çağırması.
2. 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);

Not: Request nesnesinin request.destination özelliği, dosya uzantılarına göre öğeler için eşleştirme istekleriyle ilgili zorlukları ortadan kaldırdığından belirli içerik türlerine yönelik istekleri eşleştirmenin mükemmel bir yoludur.

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 panelindeki Önbellek depolama alanı görüntüleyicisi. Farklı öğe türlerine ilişkin yanıtlar ayrı önbelleklerde depolanır.

Ö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);

Önemli nokta: ExpirationPlugin yalnızca, yapılandırılmış cacheName

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.

Not: CORS'un nasıl çalıştığına dair mükemmel bir etkileşimli açıklayıcı için Jake Archibald'ın CORS'da nasıl kazanılır? kılavuzunu okuyun.

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.

Not: Bu Stack Overflow Soru-Cevap bölümünde opak yanıtlar hakkında daha fazla bilgi edinebilirsiniz.

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);

Uyarı: Hatırlatma: Opak yanıtları önbellek öncelikli veya yalnızca önbellek stratejisiyle işlemek istediğinizden kesinlikle emin olun. Bu durum, kalıcı olarak bozulan bir deneyime neden olabilir. Bu da sorunu çözmek amacıyla önbelleklerinizi temizlemenizi veya kaynaklar arası istekler için ağ öncelikli strateji kullanan güncellenmiş bir hizmet çalışanı dağıtmanızı gerektirir.

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.