Service Worker önbelleğe alma ve HTTP önbelleğe alma

Hizmet çalışanı önbelleği ve HTTP önbellek katmanlarında tutarlı veya farklı geçerlilik bitiş mantığı kullanmanın avantajları ve dezavantajları.

Jonathan Chen
Jonathan Chen

Hizmet çalışanları ve PWA'lar modern web uygulamalarının standartları haline gelirken kaynak önbelleğe alma işlemi her zamankinden daha karmaşık hale geldi. Bu makalede, tarayıcı önbelleğe alma ile ilgili genel bilgiler verilmektedir. Bu bilgiler şunlardır:

  • Hizmet çalışanı önbelleğe alma ile HTTP önbelleğe alma arasındaki farklar ve kullanım alanları.
  • Farklı hizmet çalışanı önbelleğe alma süre sonu stratejilerinin normal HTTP önbelleğe alma stratejilerine kıyasla avantajları ve dezavantajları.

Önbelleğe alma akışına genel bakış

Genel olarak, bir tarayıcı bir kaynak istediğinde aşağıdaki önbelleğe alma sırasını izler:

  1. Hizmet çalışanı önbelleği: Hizmet çalışanı, kaynağın önbelleğinde olup olmadığını kontrol eder ve programlanmış önbelleğe alma stratejilerine göre kaynağın kendisini döndürüp döndürmeyeceğine karar verir. Bunun otomatik olarak gerçekleşmediğini unutmayın. Hizmet çalışanınızda bir getirme etkinliği işleyici oluşturmanız ve ağ isteklerini, ağ yerine hizmet çalışanının önbelleğinden sunulacak şekilde kesmeniz gerekir.
  2. HTTP önbelleği (tarayıcı önbelleği olarak da bilinir): Kaynak, HTTP önbelleğinde bulunuyorsa ve süresi henüz dolmamışsa tarayıcı, HTTP önbelleğindeki kaynağı otomatik olarak kullanır.
  3. Sunucu tarafı: Hizmet çalışanı önbelleğinde veya HTTP önbelleğinde hiçbir şey bulunamazsa tarayıcı, kaynağı istemek için ağa gider. Kaynak bir CDN'de önbelleğe alınmamışsa isteğin kaynak sunucuya kadar gitmesi gerekir.

Önbelleğe alma akışına genel bakış görseli.

Önbelleğe alma katmanları

Hizmet çalışanı önbelleğe alma işlemi

Hizmet çalışanı, ağ türü HTTP isteklerini yakalar ve tarayıcıya hangi kaynakların döndürülmesi gerektiğini belirlemek için önbelleğe alma stratejisi kullanır. Hizmet çalışanı önbelleği ve HTTP önbelleği aynı genel amaca hizmet eder ancak hizmet çalışanı önbelleği, tam olarak nelerin önbelleğe alınacağı ve önbelleğe alma işleminin nasıl yapılacağı üzerinde ayrıntılı kontrol gibi daha fazla önbelleğe alma özelliği sunar.

Hizmet çalışanı önbelleğini kontrol etme

Hizmet çalışanı, etkinlik işleyiciler (genellikle fetch etkinliği) ile HTTP isteklerini yakalar. Bu kod snippet'i, önce önbellek stratejisinin mantığını gösterir.

Hizmet çalışanlarının HTTP isteklerini nasıl yakaladığını gösteren bir diyagram.

Tekerleği yeniden icat etmekten kaçınmak için Workbox kullanmanız önemle tavsiye edilir. Örneğin, kaynak URL yollarını tek bir normal ifade kodu satırıyla kaydedebilirsiniz.

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);

Hizmet çalışanı önbelleğe alma stratejileri ve kullanım alanları

Aşağıdaki tabloda, yaygın hizmet çalışanı önbelleğe alma stratejileri ve her stratejinin ne zaman yararlı olduğu açıklanmaktadır.

Stratejiler Güncellik gerekçesi Kullanım alanları
Yalnızca ağ İçerik her zaman güncel olmalıdır.
  • Ödemeler ve ödeme işlemleri
  • Bakiye ekstreleri
Ağ önbelleğe geri dönüyor Yeni içeriği sunmak tercih edilir. Ancak ağ başarısız olursa veya kararsızsa biraz eski içerik sunmak kabul edilebilir.
  • Zamanında veri
  • Fiyatlar ve ücretler (sorumluluk reddi beyanları gerektirir)
  • Sipariş durumları
Stale-while-revalidate Önbelleğe alınmış içeriği hemen sunmak sorun teşkil etmez ancak gelecekte güncellenmiş önbelleğe alınmış içerik kullanılmalıdır.
  • Haber feed'leri
  • Ürün listeleme sayfaları
  • Mesajlar
Önce önbellek, sonra ağ İçerik kritik değildir ve performans kazancı için önbellekten sunulabilir ancak hizmet çalışanı zaman zaman güncellemeleri kontrol etmelidir.
  • Uygulama kabukları
  • Ortak kaynaklar
Yalnızca önbellek İçerik nadiren değişir.
  • Statik içerik

Hizmet çalışanı önbelleğe alma işleminin diğer avantajları

Hizmet çalışanı önbelleğe alma, önbelleğe alma mantığının ayrıntılı kontrolüne ek olarak şunları da sağlar:

  • Kaynağınız için daha fazla bellek ve depolama alanı: Tarayıcı, HTTP önbellek kaynaklarını kaynak bazında ayırır. Başka bir deyişle, birden fazla alt alan adınız varsa bunların tümü aynı HTTP önbelleğini paylaşır. Kaynağınızın/alanınızın içeriğinin HTTP önbelleğinde uzun süre kalacağının garantisi yoktur. Örneğin, kullanıcı bir tarayıcının ayarlar kullanıcı arayüzünden manuel olarak temizleyerek veya bir sayfada tam yeniden yüklemeyi tetikleyerek önbelleği temizleyebilir. Hizmet çalışanı önbelleğiyle, önbelleğe alınan içeriğinizin önbellekte kalma olasılığı çok daha yüksektir. Daha fazla bilgi edinmek için Kalıcı depolama alanı bölümüne bakın.
  • Kesintili ağlar veya çevrimdışı deneyimlerde daha fazla esneklik: HTTP önbelleğiyle yalnızca ikili bir seçiminiz vardır: Kaynak önbelleğe alınır veya alınmaz. Hizmet çalışanı önbelleğe alma özelliğiyle küçük "aksaklıkları" çok daha kolay bir şekilde azaltabilir ("stale-while-revalidate" stratejisiyle), eksiksiz bir çevrimdışı deneyim ("Yalnızca önbellek" stratejisiyle) veya hatta sayfanın bazı bölümlerinin hizmet çalışanı önbelleğinden geldiği ve bazı bölümlerinin hariç tutulduğu özelleştirilmiş kullanıcı arayüzleri gibi ("Set catch handler" stratejisiyle) uygun olan yerlerde ikisinin arasında bir şey sunabilirsiniz.

HTTP önbelleğe alma

Tarayıcı, bir web sayfasını ve ilgili kaynakları ilk kez yüklediğinde bu kaynakları HTTP önbelleğinde depolar. HTTP önbelleği, son kullanıcı tarafından açıkça devre dışı bırakılmadığı sürece genellikle tarayıcılar tarafından otomatik olarak etkinleştirilir.

HTTP önbelleğe alma özelliğini kullanmak, bir kaynağın ne zaman ve ne kadar süreyle önbelleğe alınacağını belirlemek için sunucuya güvenmek anlamına gelir.

HTTP yanıt başlıklarıyla HTTP önbelleğinin geçerlilik bitiş tarihini kontrol etme

Bir sunucu, tarayıcının kaynak isteğine yanıt verdiğinde, tarayıcıya kaynağı ne kadar süreyle önbelleğe alması gerektiğini bildirmek için HTTP yanıt başlıklarını kullanır. Daha fazla bilgi için Yanıt başlıkları: Web sunucunuzu yapılandırma bölümüne bakın.

HTTP önbelleğe alma stratejileri ve kullanım alanları

HTTP önbelleğe alma, yalnızca zamana dayalı (TTL) kaynak geçerlilik süresi mantığıyla ilgilendiği için hizmet çalışanı önbelleğe alma işleminden çok daha basittir. HTTP önbelleğe alma stratejileri hakkında daha fazla bilgi edinmek için Hangi yanıt başlığı değerlerini kullanmalısınız? ve HTTP Önbelleği ile gereksiz ağ isteklerini önleme (Özet) başlıklı makaleleri inceleyin.

Önbellek geçerlilik bitiş mantığınızı tasarlama

Bu bölümde, hizmet çalışanı önbelleği ve HTTP önbellek katmanlarında tutarlı bir geçerlilik süresi mantığı kullanmanın avantajları ve dezavantajları ile bu katmanlarda ayrı geçerlilik süresi mantığı kullanmanın avantajları ve dezavantajları açıklanmaktadır.

Tüm önbellek katmanları için tutarlı geçerlilik süresi mantığı

Avantajları ve dezavantajları göstermek için 3 senaryoya bakacağız: uzun vadeli, orta vadeli ve kısa vadeli.

Senaryolar Uzun süreli önbelleğe alma Orta vadeli önbelleğe alma Kısa süreli önbelleğe alma
Hizmet çalışanı önbelleğe alma stratejisi Önbellek, ağa geri dönülüyor Stale-while-revalidate Ağ, önbelleğe geri dönüyor
Hizmet çalışanı önbelleği TTL'si 30 gün 1 gün 10 dk.
HTTP önbelleği maksimum yaşı 30 gün 1 gün 10 dk.

Senaryo: Uzun süreli önbelleğe alma (önbellek, ağa geri dönme)

  • Önbelleğe alınan bir kaynak geçerli olduğunda (<= 30 gün): Hizmet çalışanı, ağa gitmeden önbelleğe alınan kaynağı hemen döndürür.
  • Önbelleğe alınmış bir kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışanı, kaynağı getirmek için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası yoktur. Bu nedenle, kaynak için sunucu tarafına gider.

Dezavantaj: Bu senaryoda, hizmet çalışanındaki önbelleğin süresi dolduğunda tarayıcı isteği her zaman sunucu tarafına ileteceğinden HTTP önbelleğe alma daha az değer sağlar.

Senaryo: Orta vadeli önbelleğe alma (stale-while-revalidate)

  • Önbelleğe alınmış bir kaynak geçerli olduğunda (<= 1 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür ve kaynağı almak için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası bulunduğundan bu kopyayı hizmet çalışanına döndürür.
  • Önbelleğe alınmış bir kaynağın süresi dolduğunda (> 1 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür ve kaynağı almak için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası yoktur. Bu nedenle, kaynağı almak için sunucu tarafına gider.

Dezavantaj: Hizmet çalışanı, "yeniden doğrulama" adımından en iyi şekilde yararlanmak için HTTP önbelleğini geçersiz kılmak üzere ek önbellek bozma işlemi gerektirir.

Senaryo: Kısa süreli önbelleğe alma (ağ, önbelleğe geri dönüyor)

  • Önbelleğe alınmış bir kaynak geçerli olduğunda (<= 10 dakika): Hizmet çalışanı, kaynağı almak için ağa gider. Tarayıcı, HTTP önbelleğinde kaynağın bir kopyasına sahip olduğundan sunucu tarafına gitmeden bu kopyayı hizmet çalışanına döndürür.
  • Önbelleğe alınmış bir kaynağın süresi dolduğunda (> 10 dakika): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür ve kaynağı almak için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası yoktur. Bu nedenle, kaynağı almak için sunucu tarafına gider.

Dezavantajı: Orta vadeli önbelleğe alma senaryosuna benzer şekilde, hizmet çalışanının sunucu tarafındaki en son kaynağı getirmek için HTTP önbelleğini geçersiz kılacak ek önbellek bozma mantığına ihtiyacı vardır.

Tüm senaryolarda hizmet çalışanı

Tüm senaryolarda, ağ kararsız olduğunda hizmet çalışanı önbelleği, önbelleğe alınmış kaynakları döndürmeye devam edebilir. Öte yandan, ağ kararsız veya kapalı olduğunda HTTP önbelleği güvenilir değildir.

Hizmet çalışanı önbelleği ve HTTP katmanlarında farklı önbellek geçerlilik bitiş mantığı

Artıları ve eksileri göstermek için yine uzun vadeli, orta vadeli ve kısa vadeli senaryolara bakacağız.

Senaryolar Uzun süreli önbelleğe alma Orta vadeli önbelleğe alma Kısa süreli önbelleğe alma
Hizmet çalışanı önbelleğe alma stratejisi Önbellek, ağa geri dönülüyor Stale-while-revalidate Ağ, önbelleğe geri dönüyor
Hizmet çalışanı önbelleği TTL'si 90 gün 30 gün 1 gün
HTTP önbelleği maksimum yaşı 30 gün 1 gün 10 dk.

Senaryo: Uzun süreli önbelleğe alma (önbellek, ağa geri dönme)

  • Önbelleğe alınan bir kaynak, hizmet çalışanı önbelleğinde geçerli olduğunda (<= 90 gün): Hizmet çalışanı, önbelleğe alınan kaynağı hemen döndürür.
  • Hizmet çalışanı önbelleğinde önbelleğe alınmış bir kaynağın süresi dolduğunda (> 90 gün): Hizmet çalışanı, kaynağı almak için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası olmadığından sunucu tarafına gider.

Artıları ve eksileri:

  • Artısı: Hizmet çalışanı önbelleğe alınmış kaynakları hemen döndürdüğü için kullanıcılar anında yanıt alır.
  • Artısı: Hizmet çalışanı, önbelleğini ne zaman kullanacağı ve kaynakların yeni sürümlerini ne zaman isteyeceği konusunda daha ayrıntılı kontrole sahiptir.
  • Dezavantajı: İyi tanımlanmış bir hizmet çalışanı önbelleğe alma stratejisi gerekir.

Senaryo: Orta vadeli önbelleğe alma (stale-while-revalidate)

  • Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleğinde geçerli olduğunda (<= 30 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür.
  • Hizmet çalışanı önbelleğinde önbelleğe alınmış bir kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışanı, kaynak için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası olmadığından sunucu tarafına gider.

Artıları ve eksileri:

  • Artısı: Hizmet çalışanı önbelleğe alınmış kaynakları hemen döndürdüğü için kullanıcılar anında yanıt alır.
  • Artı: Hizmet çalışanı, "arka planda" gerçekleşen yeniden doğrulama sayesinde belirli bir URL için sonraki isteğin ağdan yeni bir yanıt kullanmasını sağlayabilir.
  • Dezavantajı: İyi tanımlanmış bir hizmet çalışanı önbelleğe alma stratejisi gerekir.

Senaryo: Kısa süreli önbelleğe alma (ağ, önbelleğe geri dönüyor)

  • Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleğinde geçerli olduğunda (<= 1 gün): Hizmet çalışanı, kaynak için ağa gider. Tarayıcı, kaynağı HTTP önbelleğinde varsa oradan döndürür. Ağ çalışmıyorsa hizmet çalışanı, kaynağı hizmet çalışanı önbelleğinden döndürür.
  • Hizmet çalışanı önbelleğinde önbelleğe alınmış bir kaynağın süresi dolduğunda (> 1 gün): Hizmet çalışanı, kaynağı almak için ağa gider. Tarayıcı, HTTP önbelleğindeki önbelleğe alınmış sürümün süresi dolduğundan kaynakları ağ üzerinden getirir.

Artıları ve eksileri:

  • Avantaj: Ağ kararsız olduğunda veya çalışmadığında hizmet çalışanı, önbelleğe alınmış kaynakları hemen döndürür.
  • Dezavantaj: Hizmet çalışanı, HTTP önbelleğini geçersiz kılmak ve "önce ağ" istekleri yapmak için ek önbellek bozma işlemi gerektirir.

Sonuç

Önbelleğe alma senaryolarının kombinasyonunun karmaşıklığı göz önüne alındığında, tüm durumları kapsayan tek bir kural tasarlamak mümkün değildir. Ancak önceki bölümlerdeki bulgulara dayanarak, önbellek stratejilerinizi tasarlarken göz önünde bulundurmanız gereken birkaç öneri vardır:

  • Hizmet çalışanı önbelleğe alma mantığının, HTTP önbelleğe alma süresi dolma mantığıyla tutarlı olması gerekmez. Mümkünse hizmet çalışanına daha fazla kontrol vermek için hizmet çalışanında daha uzun geçerlilik süresi mantığı kullanın.
  • HTTP önbelleğe alma hâlâ önemli bir rol oynar ancak ağ kararsız veya kapalıyken güvenilir değildir.
  • Hizmet çalışanı önbelleğe alma stratejinizin HTTP önbelleğiyle çakışmadan değerini sağladığından emin olmak için her kaynakla ilgili önbelleğe alma stratejilerinizi yeniden gözden geçirin.

Daha fazla bilgi