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 bitimi mantığı kullanmanın avantajları ve dezavantajları.

Jonathan Chen

Hizmet çalışanları ve PWA'lar modern web uygulamalarının standartları haline gelirken kaynak önbelleğe alma hiç olmadığı kadar karmaşık bir hale geldi. Bu makalede, tarayıcı önbelleği ile ilgili genel bilgiler verilmektedir. Makalede şu konular ele alınmaktadır:

• Service worker önbelleğe alma ve HTTP önbelleğe alma arasındaki farklar ve kullanım alanları.
• Farklı servis çalışanı önbelleğe alma son kullanma tarihi stratejilerinin normal HTTP önbelleğe alma stratejilerine kıyasla avantajları ve dezavantajları.

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

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

1. Service worker önbelleği: Service worker, 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. Bu işlemin otomatik olarak gerçekleşmediğini unutmayın. Hizmet çalışanı içinde bir getirme etkinlik işleyicisi oluşturmanız ve isteklerin ağ yerine hizmet çalışanının önbelleğinden sunulması için ağ isteklerini engellemeniz gerekir.
2. HTTP önbelleği (tarayıcı önbelleği olarak da bilinir): Kaynak HTTP önbelleğinde bulunuyorsa ve henüz süresi 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 geri gitmesi gerekir.

Önbelleğe alma katmanları

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

Bir hizmet çalışanı, ağ türündeki 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 neyin önbelleğe alındığı ve önbelleğe almanın nasıl yapıldığı üzerinde ayrıntılı kontrol gibi daha fazla önbelleğe alma özelliği sunar.

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

Bir hizmet çalışanı, event listeners (genellikle fetch etkinliği) ile HTTP isteklerini yakalar. Bu kod snippet'i, önce önbellek önbelleğe alma stratejisinin mantığını gösterir.

Tekrar tekrar aynı işi yapmamak 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);

Service worker önbelleğe alma stratejileri ve kullanım alanları

Aşağıdaki tabloda, yaygın service worker önbelleğe alma stratejileri ve her stratejinin ne zaman kullanışlı olduğu özetlenmiştir.

Service worker önbelleğe almanın ek avantajları

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

• Kaynağınız için daha fazla bellek ve depolama alanı: Tarayıcı, HTTP önbelleği kaynaklarını kaynak başına 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. Kaynak/alan adınızdaki içeriğin HTTP önbelleğinde uzun süre kalacağı garanti edilmez. Örneğin, kullanıcılar tarayıcının ayarlar kullanıcı arayüzünden manuel olarak temizleyerek veya sayfada zorunlu yeniden yüklemeyi tetikleyerek önbelleği temizleyebilir. Service worker önbelleği sayesinde, önbelleğe alınmış içeriğinizin önbellekte kalma olasılığı çok daha yüksektir. Daha fazla bilgi edinmek için Kalıcı depolama başlıklı makaleye bakın.
• Aralıklı ağlar veya çevrimdışı deneyimlerle daha fazla esneklik: HTTP önbelleğiyle yalnızca ikili bir seçeneğiniz vardır: Kaynak ya önbelleğe alınır ya da alınmaz. Service worker önbelleğe alma özelliği sayesinde, küçük "aksaklıkları" çok daha kolay bir şekilde azaltabilir ("eskiyi yeniden doğrula" stratejisiyle), eksiksiz bir çevrimdışı deneyim sunabilir ("yalnızca önbellek" stratejisiyle) veya hatta ikisinin arasında bir şey yapabilirsiniz. Örneğin, sayfanın bazı bölümleri service worker önbelleğinden gelen ve bazı bölümleri hariç tutulan özelleştirilmiş kullanıcı arayüzleri oluşturabilirsiniz ("yakalama işleyiciyi ayarla" stratejisiyle).

HTTP önbelleğe alma

Bir tarayıcı, web sayfasını ve ilgili kaynakları ilk kez yüklediğinde bu kaynakları HTTP önbelleğinde saklar. 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, 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 söylemek için HTTP yanıt üstbilgilerini kullanır. Daha fazla bilgi edinmek için Yanıt üstbilgileri: web sunucunuzu yapılandırma başlıklı makaleye göz atın.

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

HTTP önbelleğe alma, yalnızca zamana dayalı (TTL) kaynak geçerlilik bitimi mantığıyla ilgilendiğinden 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 Özet başlıklı makalelere bakın.

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

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

Tüm önbellek katmanları için tutarlı geçerlilik bitişi mantığı

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

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

• Önbelleğe alınmış bir kaynak geçerliyse (<= 30 gün): Hizmet çalışanı, ağa gitmeden önbelleğe alınmış kaynağı hemen döndürür.
• Önbelleğe alınmış bir kaynağın süresi dolduğunda (> 30 gün): Service worker, 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.

Eksi: Bu senaryoda, hizmet çalışanında ö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çerliyse (<= 1 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür ve kaynağı getirmek için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası olduğundan bu kopyayı hizmet çalışanına döndürür.
• Önbelleğe alınmış bir kaynak süresi dolduğunda (> 1 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür ve kaynağı getirmek için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası yoktur. Bu nedenle, kaynağı getirmek 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 temizleme 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ğı getirmek için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası olduğundan sunucu tarafına gitmeden hizmet çalışanına bu kopyayı döndürür.
• Önbelleğe alınmış bir kaynak süresi dolduğunda (> 10 dakika): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür ve kaynağı getirmek için ağa gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası yoktur. Bu nedenle, kaynağı getirmek için sunucu tarafına gider.

Dezavantaj: Orta vadeli önbelleğe alma senaryosuna benzer şekilde, hizmet çalışanı, sunucu tarafındaki en son kaynağı getirmek için HTTP önbelleğini geçersiz kılmak üzere ek önbellek temizleme mantığı gerektirir.

Tüm senaryolarda servis ç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 olduğunda veya bağlantı kesildiğinde HTTP önbelleği güvenilir değildir.

Service worker önbelleği ve HTTP katmanlarında farklı önbellek geçerlilik bitişi mantığı

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

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

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleğinde geçerliyse (<= 90 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür.
• Bir önbelleğe alınmış kaynak, hizmet çalışanı önbelleğinde süresi dolduğunda (> 90 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, sunucu tarafına gider.

Artıları ve eksileri:

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

Senaryo: Dönem ortasında önbelleğe alma (Stale-while-revalidate)

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleğinde geçerliyse (<= 30 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür.
• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleğinde 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ı yoktur. Bu nedenle, sunucu tarafına gider.

Artıları ve eksileri:

• Avantaj: Kullanıcılar, hizmet çalışanı önbelleğe alınmış kaynakları hemen döndürdüğü için anında yanıt alır.
• Avantaj: Hizmet çalışanı, "arka planda" gerçekleşen yeniden doğrulama sayesinde belirli bir URL'ye yönelik sonraki isteğin ağdan yeni bir yanıt kullanmasını sağlayabilir.
• Dezavantaj: İyi tanımlanmış bir service worker ö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çerliyse (<= 1 gün): Hizmet çalışanı, kaynak için ağa gider. Tarayıcı, HTTP önbelleğinde varsa kaynağı 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ğı getirmek için ağa gider. Tarayıcı, HTTP önbelleğindeki önbelleğe alınmış sürümün süresi dolduğu için kaynakları ağ üzerinden getirir.

Artıları ve eksileri:

• Avantaj: Ağ kararsız olduğunda veya çöktüğünde hizmet çalışanı, önbelleğe alınmış kaynakları hemen döndürür.
• Eksi: Hizmet çalışanı, HTTP önbelleğini geçersiz kılmak ve "önce ağ" istekleri yapmak için ek önbellek temizleme 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 göre, önbellek stratejilerinizi tasarlarken göz önünde bulundurmanız gereken birkaç öneri var:

• Service worker önbelleğe alma mantığının, HTTP önbelleğe alma geçerlilik süresi mantığıyla tutarlı olması gerekmez. Mümkünse hizmet çalışanına daha fazla kontrol olanağı tanımak için hizmet çalışanında daha uzun geçerlilik süresi mantığı kullanın.
• HTTP önbelleğe alma hâlâ önemli bir rol oynasa da ağ kararsız olduğunda veya çöktüğünde 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

• Ağ güvenilirliği
• HTTP önbelleği ile gereksiz ağ isteklerini önleme
• HTTP önbelleği Codelab'i
• Service worker'ların gerçek dünyadaki performans etkisini ölçme
• Cache-Control ve Expires
• Önbelleğe Alma Gizemini Çözme: Önbellekleri İnceleme, Temizleme ve Devre Dışı Bırakma