Hizmet çalışanları ve Cache Storage API

Jeff Posnick

Ağ güvenilirliği için mücadele ediyorsunuz. Tarayıcının HTTP önbelleği, ilk savunma hattınızdır ancak öğrendiğiniz gibi, yalnızca daha önce ziyaret ettiğiniz sürümlü URL'leri yüklerken etkilidir. HTTP önbelleği tek başına yeterli değildir.

Neyse ki durumu lehinize çevirmenize yardımcı olacak iki yeni araç var: hizmet çalışanları ve Cache Storage API. Bu iki kavram genellikle birlikte kullanıldığından, ikisini aynı anda öğrenmek faydalı olacaktır.

Hizmet çalışanları

Hizmet çalışanı, tarayıcıya yerleşiktir ve oluşturmaktan sorumlu olduğunuz biraz ek JavaScript kodu tarafından kontrol edilir. Bu dosyayı, gerçek web uygulamanızı oluşturan diğer dosyalarla birlikte dağıtırsınız.

Hizmet çalışanlarının bazı özel yetkileri vardır. Diğer görevlerin yanı sıra, web uygulamanızın giden bir istek yapmasını sabırla bekler ve ardından bu isteği yakalayarak harekete geçer. Hizmet çalışanının bu yakalanan istekle ne yapacağı size bağlıdır.

Bazı istekler için en iyi yöntem, hizmet çalışanının hiç olmadığı durumlarda olduğu gibi isteğin ağa devam etmesine izin vermektir.

Ancak diğer istekler için tarayıcının HTTP önbelleğinden daha esnek bir yöntemden yararlanabilir ve ağ konusunda endişelenmenize gerek kalmadan güvenilir bir şekilde hızlı yanıt döndürebilirsiniz. Bu, yapbozun diğer parçası olan Cache Storage API'yi kullanmayı gerektirir.

Cache Storage API

Browser Support

  • Chrome: 43.
  • Edge: 16.
  • Firefox: 41.
  • Safari: 11.1.

Source

Cache Storage API, geliştiricilere önbelleğin içeriği üzerinde tam kontrol sağlayarak yepyeni olanaklar sunar. Cache Storage API, HTTP üstbilgileri ile tarayıcının yerleşik sezgisel yöntemlerinin bir kombinasyonunu kullanmak yerine önbelleğe alma için kod tabanlı bir yaklaşım sunar. Cache Storage API, özellikle hizmet çalışanınızın JavaScript'inden çağrıldığında kullanışlıdır.

Bir dakika… Şimdi düşünmemiz gereken başka bir önbellek daha mı var?

Muhtemelen "HTTP üstbilgilerimi yapılandırmam gerekiyor mu?" ve "HTTP önbelleğiyle mümkün olmayan bu yeni önbellekle ne yapabilirim?" gibi sorular soruyorsunuz. Endişelenmeyin, bunlar doğal tepkilerdir.

Cache Storage API'yi kullandığınızı bilseniz bile web sunucunuzda Cache-Control başlıklarını yapılandırmanız önerilir. Genellikle sürüm bilgisi içermeyen URL'ler için Cache-Control: no-cache, karma gibi sürüm bilgisi içeren URL'ler için ise Cache-Control: max-age=31536000 ayarını kullanabilirsiniz.

Tarayıcı, Cache Storage API önbelleğini doldururken varsayılan olarak HTTP önbelleğindeki mevcut girişleri kontrol eder ve bulunursa bunları kullanır. Cache Storage API önbelleğine sürümlü URL'ler ekliyorsanız tarayıcı, ek bir ağ isteğinden kaçınır. Bunun diğer tarafı, yanlış yapılandırılmış Cache-Control başlıkları kullanıyorsanız (ör. sürümsüz bir URL için uzun süreli önbellek ömrü belirtmek) bu eski içeriği Cache Storage API'ye ekleyerek durumu daha da kötüleştirebilirsiniz. HTTP önbellek davranışınızı düzenlemek, Cache Storage API'yi etkili bir şekilde kullanmanın ön koşuludur.

Bu yeni API ile artık neler yapılabileceğine gelince, cevap: çok şey. Yalnızca HTTP önbelleğiyle zor veya imkansız olan bazı yaygın kullanım alanları şunlardır:

  • Önbelleğe alınmış içerik için "arka planda yenileme" yaklaşımını (stale-while-revalidate olarak bilinir) kullanın.
  • Önbelleğe alınacak maksimum öğe sayısına bir sınır koyun ve bu sınıra ulaşıldığında öğeleri kaldırmak için özel bir geçerlilik süresi politikası uygulayın.
  • Önceden önbelleğe alınmış ve yeni ağ yanıtlarını karşılaştırarak herhangi bir değişiklik olup olmadığını kontrol edin ve veriler gerçekten güncellendiğinde kullanıcının içeriği güncellemesine (örneğin, bir düğmeyle) olanak tanıyın.

Daha fazla bilgi için Cache API: Hızlı kılavuz başlıklı makaleyi inceleyin.

API'nin temel özellikleri

API'nin tasarımıyla ilgili olarak göz önünde bulundurulması gereken bazı noktalar vardır:

  • Request nesneleri, bu önbelleklerden okuma ve önbelleklere yazma işlemlerinde benzersiz anahtarlar olarak kullanılır. Kolaylık olması açısından, gerçek bir Request nesnesi yerine anahtar olarak 'https://example.com/index.html' gibi bir URL dizesi iletebilirsiniz. API, bu işlemi sizin için otomatik olarak gerçekleştirir.
  • Bu önbelleklerde değer olarak Response nesneleri kullanılır.
  • Veriler önbelleğe alınırken belirli bir Response üzerindeki Cache-Control başlığı etkili bir şekilde yok sayılır. Otomatik, yerleşik geçerlilik süresi veya güncellik kontrolleri yoktur ve önbelleğe bir öğe depoladığınızda, kodunuz tarafından açıkça kaldırılana kadar kalır. (Önbellek bakımını sizin adınıza basitleştiren kitaplıklar vardır. Bu konulara serinin ilerleyen bölümlerinde değineceğiz.)
  • LocalStorage gibi eski, eşzamanlı API'lerin aksine, tüm Cache Storage API işlemleri eşzamansızdır.

Kısa bir ara: Promise'ler ve async/await

Hizmet çalışanları ve Cache Storage API, eşzamansız programlama kavramlarını kullanır. Özellikle, eş zamansız işlemlerin gelecekteki sonucunu temsil etmek için büyük ölçüde Promise'lere dayanırlar. Başlamadan önce promise'lar ve ilgili async/await söz dizimi hakkında bilgi edinmeniz gerekir.

Bu kodu henüz dağıtmayın

Önemli bir temel sağlasalar ve olduğu gibi kullanılabilseler de hem hizmet çalışanları hem de Cache Storage API, bir dizi uç durum ve "püf noktası" içeren, daha düşük düzeyli yapı taşlarıdır. Bu API'lerin zor kısımlarını kolaylaştıran ve üretime hazır bir hizmet çalışanını oluşturmak için ihtiyacınız olan her şeyi sağlayan daha üst düzey araçlar vardır. Bir sonraki kılavuzda bu araçlardan biri olan Workbox ele alınmaktadır.