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

Hizmet çalışanı önbelleği ve HTTP önbelleği katmanlarında tutarlı veya farklı son kullanma 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 hale geldi. Bu makalede, tarayıcı önbelleğe alma ile ilgili genel bilgiler ele alınmaktadır. Bu bilgiler arasında şunlar yer alır:

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

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

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

1. Servis çalışanı önbelleği: Servis çalışanı, kaynağın önbelleğinde olup olmadığını kontrol eder ve programlanmış önbelleğe alma stratejilerine göre kaynağı döndürüp döndürmeyeceğine karar verir. Bu işlemin otomatik olarak gerçekleşmediğini unutmayın. İstekler ağ yerine hizmet işçisinin önbelleğinden sunulsun diye hizmet işçinizde bir getirme etkinliği işleyicisi oluşturmanız ve ağ isteklerini durdurmanız gerekir.
2. HTTP önbelleği (tarayıcı önbelleği olarak da bilinir): Kaynak HTTP önbelleği'nde bulunursa ve henüz süresi dolmadıysa tarayıcı, kaynağı otomatik olarak HTTP önbelleğinden 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ınmadıysa istek, kaynak sunucuya kadar gitmelidir.

Katmanları önbelleğe alma

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

Bir hizmet çalışanı, ağ türü HTTP isteklerine müdahale eder ve tarayıcıya hangi kaynakların döndürülmesi gerektiğini belirlemek için bir ö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ındığı ve önbelleğe alma işleminin nasıl yapıldığı üzerinde ayrıntılı kontrol gibi daha fazla önbelleğe alma özelliği sunar.

Service Worker önbelleğini kontrol etme

Hizmet çalışanları, etkinlik dinleyicileri (genellikle fetch etkinliği) ile HTTP isteklerini durdurur. Bu kod snippet'i, Önbellek öncelikli önbelleğe alma stratejisinin mantığını gösterir.

Tekerleği yeniden icat etmemek için Workbox'u kullanmanız önemle tavsiye edilir. Örneğin, kaynak URL yollarını tek bir normal ifade kodu satırı ile 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 özetlenmiştir.

Service Worker önbelleğe almanın diğer avantajları

Hizmet çalışanı önbelleğe alma, önbelleğe alma mantığının ayrıntılı kontrolüne ek olarak aşağıdakileri de 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. Diğer 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ğı garanti edilmez. Örneğin, bir kullanıcı tarayıcının ayarlar arayüzünden manuel olarak temizleyerek veya bir sayfada sabit yeniden yüklemeyi tetikleyerek önbelleği tamamen silebilir. Hizmet çalışanı önbelleği kullandığınızda, önbelleğe alınmış içeriğinizin önbelleğe alınmış kalması olasılığı çok daha yüksektir. Daha fazla bilgi için Kalıcı depolama başlıklı makaleyi inceleyin.
• İstikrarsız ağlar veya çevrimdışı deneyimler için daha fazla esneklik: HTTP önbelleğiyle yalnızca iki seçenek 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 azaltabilir ("yeniden doğrulama sırasında eski" stratejisiyle), tamamen çevrimdışı bir deneyim sunabilir ("Yalnızca önbelleğe alma" stratejisiyle) veya bu ikisinin ortasında bir şey (ör. sayfanın bazı bölümlerinin hizmet çalışanı önbelleğinden geldiği ve bazı bölümlerinin uygun olduğu durumlarda hariç tutulduğu özelleştirilmiş kullanıcı arayüzleri ("Yakalama işleyicisini ayarla" stratejisiyle)) sunabilirsiniz.

HTTP önbelleğe alma

Bir tarayıcı, bir web sayfasını ve ilgili kaynakları ilk kez yüklediğinde bu kaynakları HTTP önbelleğine 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 üst bilgileriyle HTTP önbelleği geçerlilik bitiş tarihini kontrol etme

Bir sunucu, kaynakla ilgili tarayıcı isteğine yanıt verirken tarayıcıya kaynağı ne kadar süreyle önbelleğe alması gerektiğini bildirmek 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 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 Özet bölümlerine bakın.

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

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

Aşağıdaki Glitch, hizmet çalışanı önbelleğe alma ve HTTP önbelleğe almanın farklı senaryolarda nasıl çalıştığını gösterir:

Tüm önbellek katmanları için tutarlı son kullanma mantığı

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

Senaryo: Uzun süreli önbelleğe alma (Önbelleğe alma, 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ınan bir kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışanı, kaynağı almak için ağa gider. Tarayıcının HTTP önbelleği, kaynağın bir kopyasını içermediğinden kaynak için sunucu tarafına gider.

Dezavantajı: 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 işlemi daha az değer sağlar.

Senaryo: Orta vadeli önbelleğe alma (yeniden doğrulama sırasında eski)

• Ö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ı, kaynağın bir kopyasını HTTP önbelleğine alır ve 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ı, HTTP önbelleğinde kaynağın bir kopyasına sahip olmadığından 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 bozma işlemi gerektirir.

Senaryo: Kısa süreli önbelleğe alma (Ağ, önbelleğe geri döner)

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

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

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ızsa veya kapalıysa HTTP önbelleği güvenilir değildir.

Hizmet çalışanı önbelleğinde ve HTTP katmanlarında farklı önbellek geçerlilik süresi mantığı

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

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

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleği içinde geçerli olduğunda (<= 90 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür.
• Hizmet çalışanı önbelleğindeki bir önbelleğe alınmış 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ği, kaynağın bir kopyasını içermediğinden istek sunucu tarafına yönlendirilir.

Artıları ve eksileri:

• Avantaj: Hizmet çalışanı, önbelleğe alınmış kaynakları hemen döndürdüğü için kullanıcılar anında yanıt alır.
• Avantaj: 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 gereklidir.

Senaryo: Orta vadeli önbelleğe alma (Stale-while-reCONFIRM)

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleği iç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ğindeki bir önbelleğe alınmış kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışanı, kaynak için ağa gider. Tarayıcının HTTP önbelleği, kaynağın bir kopyasını içermediğinden istek sunucu tarafına gönderilir.

Artıları ve eksileri:

• Avantaj: Hizmet çalışanı, önbelleğe alınmış kaynakları hemen döndürdüğü için 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 istekte ağdan yeni bir yanıt kullanılması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 geri döner)

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleği içinde geçerli olduğunda (<= 1 gün): Hizmet çalışanı, kaynak için ağa gider. Kaynak, HTTP önbelleğinden mevcutsa tarayıcı tarafından döndürülür. Ağ çalışmıyorsa hizmet çalışanı, kaynağı Service Worker önbelleğinden döndürür
• Hizmet çalışanı önbelleğindeki bir önbelleğe alınmış 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ğu için kaynakları ağ üzerinden getirir.

Artıları ve eksileri:

• Avantaj: Ağ kararsız olduğunda veya kapalı olduğunda 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 "ağ öncelikli" istekler göndermek için ek önbelleği 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ümlerde yer alan bulgular ışığında, önbellek stratejilerinizi tasarlarken dikkate almanız gereken birkaç öneri vardır:

• Hizmet çalışanı önbelleğe alma mantığının, HTTP önbelleğe alma süresi sonu mantığıyla tutarlı olması gerekmez. Mümkünse hizmet çalışanına daha fazla kontrol sağlamak için Service Worker'da daha uzun bir süre sonu mantığı kullanın.
• HTTP önbelleğe alma hâlâ önemli bir rol oynasa da ağ kararsız veya kapalı olduğunda 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
• Hizmet işçilerinin gerçek dünyadaki performans etkisini ölçme
• Cache-Control ve Expires
• Önbelleğe Alma Açıklaması: Önbellekleri İnceleme, Temizleme ve Devre Dışı Bırakma