Service Worker önbelleği ve HTTP önbellek katmanlarında tutarlı veya farklı bir süre sonu mantığı kullanmanın avantajları ve dezavantajları.
Service Worker'lar ve PWA'lar modern web uygulamalarının standartları haline gelirken kaynakları önbelleğe alma süreci hiç olmadığı kadar karmaşık hale geldi. Bu makalede, aşağıdakiler de dahil, tarayıcı önbelleğine alma işleminin genel görünümü ele alınmaktadır:
- Service Worker önbelleğine alma ile HTTP önbelleğe almanın kullanım alanları ve arasındaki farklar.
- Normal HTTP önbelleğe alma stratejilerine kıyasla farklı hizmet çalışanı önbelleğe alma süre sonu stratejilerinin avantajları ve dezavantajları.
Önbelleğe alma akışına genel bakış
Genel olarak, tarayıcılar kaynak isteğinde bulunduğunda aşağıdaki önbelleğe alma sırasını izler:
- Service Worker ö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ğini belirler. Bunun otomatik olarak gerçekleşmediğini unutmayın. İsteklerin ağ yerine hizmet çalışanı önbelleğinden sunulması için hizmet çalışanınızda bir getirme etkinlik işleyicisi oluşturmanız ve ağ isteklerine müdahale etmeniz gerekir.
- HTTP önbelleği (tarayıcı önbelleği olarak da bilinir): Kaynak HTTP Önbelleği'nde bulunduysa ve henüz süresi dolmadıysa tarayıcı otomatik olarak HTTP önbelleğindeki kaynağı kullanır.
- 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 CDN'de önbelleğe alınmamışsa isteğin tamamen kaynak sunucuya geri gitmesi gerekir.
Katmanları önbelleğe alma
Hizmet çalışanı önbelleğe alma
Service Worker, ağ türü HTTP isteklerine müdahale eder ve tarayıcıya hangi kaynakların döndürülmesi gerektiğini belirlemek için önbelleğe alma stratejisi kullanır. Service Worker önbelleği ile HTTP önbelleği aynı genel amaca hizmet eder ancak Service Worker önbelleği, tam olarak neyin önbelleğe alındığı ve önbelleğe alma işleminin nasıl yapıldığı üzerinde daha ayrıntılı kontrol gibi daha fazla önbelleğe alma özelliği sunar.
Service Worker önbelleğini kontrol etme
Service Worker, HTTP isteklerine etkinlik işleyiciler (genellikle fetch etkinliği) ile müdahale eder. Bu kod snippet'i, Önbellek Önceliği önbelleğe alma stratejisinin mantığını göstermektedir.
Tekerleğin yeniden icat edilmesini önlemek 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ı
Sonraki tabloda, yaygın olarak kullanılan Service Worker önbelleğe alma stratejileri ve her bir stratejinin ne zaman yararlı olduğu özetlenmiştir.
| Stratejiler | Güncellik gerekçesi | Kullanım alanları |
|---|---|---|
| Yalnızca ağ | İçeriğin her zaman güncel olması gerekir. |
|
| Ağın önbelleğe alınması | Yeni içeriğin sunulması tercih edilir. Bununla birlikte, ağ başarısız olursa veya kararsızsa, biraz eski içerik yayınlamak kabul edilebilir. |
|
| Eski hale getirme sırasında yeniden doğrulama | Önbelleğe alınan içeriği hemen sunabilirsiniz ancak güncellenen önbelleğe alınmış içerik gelecekte kullanılmalıdır. |
|
| Önce önbelleğe alın, ağa geri dönün | İçerik kritik değildir ve performans artışları için önbellekten sunulabilir ancak hizmet çalışanının zaman zaman güncellemeleri kontrol etmesi gerekir. |
|
| Yalnızca önbellek | İçerik nadiren değişir. |
|
Service Worker önbelleğe almanın ek avantajları
Service Worker önbelleğe alma, önbelleğe alma mantığının ayrıntılı denetimine 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 çok alt alanınız varsa hepsi 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 sabit yeniden yüklemeyi tetikleyerek önbelleği temizleyebilir. Service Worker önbelleğiyle, önbelleğe alınan içeriğinizin önbelleğe alınma olasılığı çok daha yüksektir. Daha fazla bilgi edinmek için Kalıcı depolama bölümüne bakın.
- Kesintili ağlar veya çevrimdışı deneyimler ile daha fazla esneklik: HTTP önbelleğinde yalnızca ikili bir seçeneğe sahip olursunuz: kaynak önbelleğe alınır veya alınmaz. Service Worker'ı önbelleğe alma sayesinde küçük "kesintileri" çok daha kolay bir şekilde azaltabilirsiniz ("eski yeniden doğrulama" stratejisiyle), eksiksiz bir çevrimdışı deneyim ("Yalnızca önbellek" stratejisiyle) ve hatta uygun durumlarda sayfanın bazı kısımlarının hizmet çalışanı önbelleğinden geldiği ve bazı bölümlerinin çıkarıldığı ("yakalayıcıyı ayarla" stratejisiyle) özelleştirilmiş kullanıcı arayüzleri gibi bir seçenek bile sağlayabilirsiniz.
HTTP önbelleğe alma
Bir 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 almanın kullanılması, 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ği süre sonunu kontrol etme
Sunucu, bir kaynak için tarayıcı 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 edinmek 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 işlemi, yalnızca zamana dayalı (TTL) kaynak kullanım süresi mantığıyla çalıştığı için HTTP önbelleğe alma, 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 bölümlerine bakın.
Önbelleğinizin süre sonu mantığını tasarlama
Bu bölümde, Service Worker önbelleği ve HTTP önbellek katmanlarında tutarlı bir süre sonu mantığı kullanmanın avantajları ve dezavantajlarının yanı sıra, bu katmanlarda ayrı süre sonu mantığı kullanmanın avantajları ve dezavantajları açıklanmaktadır.
Aşağıdaki Arıza, hizmet çalışanı önbelleğe almanın ve HTTP önbelleğe almanın farklı senaryolarda nasıl çalıştığını gösterir:
Tüm önbellek katmanları için tutarlı bir süre sonu mantığı
Artıları ve eksileri göstermek için 3 senaryoya göz atacağı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 | Eski-yeniden doğrula | Ağ önbelleğe alı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önülüyor)
- Önbelleğe alınan bir kaynak geçerli olduğunda (<= 30 gün): Service Worker önbelleğe alınmış kaynağı ağa gitmeden hemen döndürür.
- Önbelleğe alınan 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ı olmadığından kaynak, sunucu tarafına gider.
Dezavantajı: Bu senaryoda, HTTP önbelleğe alma işlemi daha az değer sağlar. Bunun nedeni, Service Worker'da önbelleğin süresi dolduğunda tarayıcı isteği her zaman sunucu tarafına ileteceğidir.
Senaryo: Orta vadeli önbelleğe alma (Yeniden doğrulama sırasında eski)
- Önbelleğe alınan bir kaynak geçerli olduğunda (<= 1 gün): Service Worker önbelleğe alınan kaynağı hemen döndürür ve kaynağı getirmek için ağa gider. Tarayıcı, HTTP önbelleğinde kaynağın bir kopyasını bulundurur ve bu kopyayı Service Worker'a döndürür.
- Önbelleğe alınan bir kaynağın süresi dolduğunda (> 1 gün): Service Worker önbelleğe alınan kaynağı hemen geri getirir 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ı: Service Worker, "yeniden doğrulama" adımından en iyi şekilde yararlanabilmek için HTTP önbelleğini geçersiz kılmak üzere ek önbellek bozma gerektirir.
Senaryo: Kısa süreli önbelleğe alma (Ağ önbelleğe alma)
- Önbelleğe alınan bir kaynak geçerli olduğunda (<= 10 dakika): Hizmet çalışanı, kaynağı getirmek için ağa gider. Tarayıcının bir kopyası HTTP önbelleğinde bulunur. Böylece, bu kopyayı sunucu tarafına gitmeden Service Worker'a döndürür.
- Önbelleğe alınan bir kaynağın süresi dolduğunda (> 10 dakika): Service Worker önbelleğe alınan 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 Service Worker, en güncel kaynağı sunucu tarafından getirmek amacıyla HTTP önbelleğini geçersiz kılmak için ek önbellek bozan mantığa ihtiyaç duyar.
Tüm senaryolarda hizmet çalışanı
Tüm senaryolarda, hizmet çalışanı önbelleği ağ kararsız olduğunda önbelleğe alınan kaynakları yine de döndürebilir. Diğer yandan, HTTP önbelleği ağ kararsızsa veya çalışmıyorken güvenilir değildir.
Hizmet çalışanı önbelleğinde ve HTTP katmanlarında farklı önbellek süre sonu mantığı
Artılarını ve eksilerini göstermek için yine uzun, orta ve kısa vadeli senaryolara göz atacağı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 | Eski-yeniden doğrula | Ağ önbelleğe alı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önülüyor)
- Önbelleğe alınmış 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.
- Önbelleğe alınan bir kaynağın hizmet çalışanı önbelleğinde süresi dolduğunda (> 90 gün): Hizmet çalışanı, kaynağı getirmek için ağa gider. Tarayıcı, HTTP önbelleğinde kaynağın bir kopyasına sahip olmadığından sunucu tarafına gider.
Artıları ve eksileri:
- Avantajı: Service Worker, önbelleğe alınan kaynakları hemen döndürdüğünde kullanıcılar anında yanıt alır.
- Avantajı: Service Worker, önbelleğinin ne zaman kullanılacağı ve kaynakların yeni sürümlerinin ne zaman isteneceği konusunda daha hassas bir denetime sahiptir.
- Dezavantaj: İyi tanımlanmış bir hizmet çalışanı önbelleğe alma stratejisi gereklidir.
Senaryo: Orta vadeli önbelleğe alma (Yeniden doğrulama sırasında eski)
- Önbelleğe alınan bir kaynak hizmet çalışanı önbelleğinde geçerli olduğunda (<= 30 gün): Hizmet çalışanı, önbelleğe alınan kaynağı hemen döndürür.
- Önbelleğe alınan bir kaynağın hizmet çalışanı önbelleğinde süresi dolduğunda (> 30 gün): Hizmet çalışanı, kaynağın ağına gider. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası olmadığından bu kaynak, sunucu tarafına gider.
Artıları ve eksileri:
- Avantajı: Service Worker, önbelleğe alınan kaynakları hemen döndürdüğünde kullanıcılar anında yanıt alır.
- Avantajı: Hizmet çalışanı, "arka planda" gerçekleşen yeniden doğrulama sayesinde belirli bir URL için sonraki isteğin ağdan güncel bir yanıt kullanmasını sağlayabilir.
- Dezavantaj: İyi tanımlanmış bir hizmet çalışanı önbelleğe alma stratejisi gereklidir.
Senaryo: Kısa süreli önbelleğe alma (Ağ önbelleğe alma)
- Önbelleğe alınan bir kaynak hizmet çalışanı önbelleğinde geçerli olduğunda (<= 1 gün): Hizmet çalışanı, kaynağın ağına gider. Varsa, tarayıcı kaynağı HTTP önbelleğinden döndürür. Ağ kapalıysa Service Worker, kaynağı Service Worker önbelleğinden
- Önbelleğe alınan bir kaynağın hizmet çalışanı önbelleğinde 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ğunda kaynakları ağ üzerinden getirir.
Artıları ve eksileri:
- Avantajı: Ağ kararsız veya çalışmıyor olduğunda Service Worker, önbelleğe alınan kaynakları hemen döndürür.
- Dezavantajı: Hizmet çalışanı, HTTP Önbelleğini geçersiz kılmak ve "Önce ağ" isteğinde bulunmak için ek önbellek bozma gerektirir.
Sonuç
Önbelleğe alma senaryolarının kombinasyonunun karmaşıklığı göz önünde bulundurulduğunda, tüm durumları kapsayan tek bir kural tasarlamak mümkün değildir. Ancak önceki bölümlerde yer alan bulgulara dayalı olarak, önbellek stratejilerinizi tasarlarken bakabileceğiniz birkaç öneri bulunmaktadır:
- Service Worker önbelleğe alma mantığının, HTTP önbelleğe alma süre sonu mantığıyla tutarlı olması gerekmez. Mümkünse Service Worker'a daha fazla denetim vermek için Service Worker'da daha uzun süre sonu mantığı kullanın.
- HTTP önbelleğe alma önemli bir rol oynamaya devam etse de ağ kararsız veya kapalı olduğunda güvenilir değildir.
- Service Worker önbelleğe alma stratejinizin, HTTP önbelleğiyle çakışmadan değer sağladığından emin olmak için her kaynakla ilgili önbelleğe alma stratejilerinizi yeniden gözden geçirin.