Hizmet çalışanları ve Cache Storage API

Jeff Posnick

Ağ güvenilirliğiyle mücadele etmek zorundasınız. Tarayıcının HTTP önbelleği ilk savunma hattınızdır, ancak öğrendiğiniz gibi sadece daha önce ziyaret ettiğiniz sürüm oluşturulmuş URL'leri yüklerken gerçekten etkilidir. HTTP önbelleği tek başına yeterli değildir.

Neyse ki bu değişimleri lehinize çevirmenize yardımcı olacak iki yeni araç mevcut: Service Worker ve Cache Storage API. Bu iki kavram birlikte çok sık kullanıldığından, ikisi hakkında da aynı anda bilgi edinmeniz gerekir.

Hizmet çalışanları

Service Worker tarayıcıda yerleşiktir ve oluşturmaktan sorumlu olduğunuz bir miktar ekstra JavaScript kodu tarafından kontrol edilir. Bunu, gerçek web uygulamanızı oluşturan diğer dosyalarla birlikte dağıtırsınız.

Service Worker'ın bazı özel güçleri vardır. Diğer görevlerinin yanı sıra, sabırlı bir şekilde web uygulamanızın giden bir istekte bulunmasını bekler ve sonra buna müdahale ederek eyleme geçer. Service Worker'ın, müdahale edilen bu istekle ne yapacağına siz karar verirsiniz.

Bazı istekler için yapılacak en iyi şey, tıpkı hiç hizmet çalışanı olmasaydı olacak gibi, isteğin ağda devam etmesine izin vermektir.

Ancak diğer istekler için tarayıcının HTTP önbelleğinden daha esnek olan bir şeyden yararlanabilir ve ağla ilgili endişe duymadan güvenilir bir şekilde hızlı yanıt döndürebilirsiniz. Bunun için diğer bulmaca parçası olan Cache Storage API'yi kullanmanız gerekiyor.

Cache Storage API'si

Tarayıcı Desteği

  • 43
  • 16
  • 41
  • 11.1

Kaynak

Cache Storage API, geliştiricilere önbelleğin içeriği üzerinde tam kontrol sağlayarak yepyeni olasılıklar sunar. Cache Storage API, HTTP üst bilgilerinin ve tarayıcının yerleşik heuristics bir kombinasyonunu kullanmak yerine önbelleğe alma için kod odaklı bir yaklaşım sunar. Cache Storage API'si özellikle hizmet çalışanınızın JavaScript'inden çağrıldığında yararlıdır.

Bir dakika... Şu anda düşünülecek başka bir önbellek var mı?

Muhtemelen kendinize "HTTP üst bilgilerimi yine de 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ı biliyor olsanız bile, web sunucunuzdaki Cache-Control başlıklarını yapılandırmanız önerilir. Genellikle, eski sürüm URL'ler için Cache-Control: no-cache ve/veya karmalar gibi sürüm oluşturma bilgileri içeren URL'ler için Cache-Control: max-age=31536000 ayarını yapabilirsiniz.

Cache Storage API önbelleğini doldururken, tarayıcı varsayılan olarak HTTP önbelleğindeki mevcut girişleri kontrol eder ve bulunursa bunları kullanır. Sürümlü URL'leri Cache Storage API önbelleğine ekliyorsanız tarayıcı ek bir ağ isteğinden kaçınır. Bunun tersine, eski haline getirilmiş bir URL için uzun ömürlü bir önbellek ömrü belirtmek gibi yanlış yapılandırılmış Cache-Control üst bilgileri kullanıyorsanız söz konusu eski içeriği Cache Storage API'ye ekleyerek işleri daha da kötüleştirebilirsiniz. Cache Storage API'yi etkili bir şekilde kullanmanın ön koşulu, HTTP önbellek davranışının sıralanmasıdır.

Bu yeni API ile artık neler yapılabileceğine göre cevap şudur: Çok fazla. Yalnızca HTTP önbelleğiyle zor veya imkansız olacak bazı yaygın kullanım alanları arasında şunlar yer alır:

  • Önbelleğe alınan içerik için "eski-yeniden doğrulama" olarak bilinen "arka planda yenileme" yaklaşımını kullanın.
  • Önbelleğe alınacak maksimum öğe sayısı için bir sınır uygulayın ve bu sınıra ulaşıldığında öğeleri kaldırmak için özel bir süre sonu politikası uygulayın.
  • Herhangi bir değişiklik olup olmadığını görmek için önceden önbelleğe alınmış ve yeni ağ yanıtlarını karşılaştırın ve kullanıcının veriler gerçekten güncellendiğinde kullanıcının içeriği güncellemesini (örneğin, bir düğmeyle) sağlayın.

Daha fazla bilgi edinmek için The Cache API: A quick guide (Önbellek API'si: hızlı rehber) sayfasına göz atın.

API somunları ve cıvataları

API'nin tasarımıyla ilgili unutulmaması gereken bazı noktalar vardır:

  • Request nesneleri, bu önbelleklerde okuma ve yazma sırasında benzersiz anahtar olarak kullanılır. Kolaylık olması açısından, gerçek bir Request nesnesi yerine 'https://example.com/index.html' gibi bir URL dizesini anahtar olarak aktarabilirsiniz. API bunu sizin için otomatik olarak işler.
  • Bu önbelleklerde değer olarak Response nesneleri kullanılır.
  • Belirli bir Response öğesindeki Cache-Control üst bilgisi, veriler önbelleğe alınırken etkili bir şekilde yoksayılır. Otomatik, yerleşik son kullanma veya yenilik kontrolleri yoktur ve bir öğeyi önbellekte depoladığınızda öğe, kodunuz açıkça kaldırana kadar varlığını sürdürür. (Önbellek bakımını sizin yerinize basitleştirecek kitaplıklar mevcuttur. Bunlar, dizinin ilerleyen bölümlerinde ele alınacaktır.)
  • LocalStorage gibi eski eşzamanlı API'lerin aksine, tüm Cache Storage API işlemleri eşzamansızdır.

Kısa bir sapma: Vaatler ve eşzamansız/bekliyor

Service Worker'lar ve Cache Storage API, eşzamansız programlama kavramları kullanır. Özellikle, eşzamansız işlemlerin gelecekteki sonuçlarını temsil etme vaatlerine büyük ölçüde güvenirler. Başlamadan önce vaatler ve ilgili async/await söz dizimi hakkında bilgi edinmeniz gerekir.

Bu kodu henüz dağıtmayın

Hem hizmet çalışanları hem de Cache Storage API önemli bir temel sağlar ve hem hizmet çalışanları hem de Cache Storage API'leri, bir dizi uç durum ve "ihtiyaç" ile fiilen daha düşük seviye yapı taşlarıdır. Bu API'lerin zor kısımlarını düzeltmeye yardımcı olabilecek ve üretime hazır bir hizmet çalışanı oluşturmak için ihtiyacınız olan her şeyi sağlayabilecek üst düzey araçlar vardır. Bir sonraki kılavuzda bu tür bir araç ele alınmaktadır: Workbox.