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 daha önce ziyaret ettiğiniz sürümlü URL'leri yüklerken gerçekten etkili olduğunu öğrendiniz. HTTP önbelleği tek başına yeterli değildir.

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

Hizmet çalışanları

Hizmet çalışanı tarayıcıya yerleştirilmiştir ve oluşturmaktan sorumlu olduğunuz biraz fazladan 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 işçilerinin bazı özel güçleri vardır. Diğer görevleri arasında, web uygulamanızın giden bir istek göndermesini sabırla beklemek ve ardından isteği durdurarak harekete geçmek vardır. Hizmet çalışanının, bu yakalanan isteği nasıl kullanacağı size bağlıdır.

Bazı isteklerde, en iyi yöntem, hiç hizmet çalışanı olmamış gibi isteğin ağa devam etmesine izin vermek olabilir.

Diğer istekler için ise tarayıcının HTTP önbelleğinden daha esnek bir çözümden yararlanabilir ve ağ hakkında endişelenmenize gerek kalmadan güvenilir bir şekilde hızlı bir yanıt döndürebilirsiniz. Bu, bulmacanın diğer parçasını yani Cache Storage API'yi kullanmayı gerektirir.

Cache Storage API

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

Bekle… şu anda dikkate alınması gereken başka bir önbellek var mı?

Muhtemelen "HTTP üstbilgilerimi yapılandırmaya devam etmem gerekiyor mu?" ve "Bu yeni önbelleği kullanarak HTTP önbelleğiyle mümkün olmayan neleri yapabilirim?" gibi sorular soruyorsunuzdur. Endişelenmeyin, bunlar normal tepkilerdir.

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

Tarayıcı, Cache Storage API önbelleğini doldururken HTTP önbelleğindeki varsayılan olarak mevcut girişleri kontrol eder ve bulunursa bunları kullanır. Cache Storage API önbelleğine sürüm numaralı 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 üstbilgileri kullanıyorsanız (ör. sürümlenmemiş bir URL için uzun ömürlü bir önbellek ömrü belirtmek) bu eski içeriği Cache Storage API'ye ekleyerek işleri daha da kötüleştirebilirsiniz. HTTP önbellek davranışınızın sıralanması, Cache Storage API'yi etkili bir şekilde kullanmanın ön koşuludur.

Bu yeni API ile artık neler yapabileceğinize gelince, cevabımız: ç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ı kullanın. Bu yaklaşım, yeniden doğrulama sırasında eski olarak bilinir.
• Önbelleğe alınacak maksimum öğe sayısına bir sınır uygulayın ve bu sınıra ulaşıldığında öğeleri kaldırmak için özel bir geçerlilik süresi 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 veriler gerçekten güncellendiğinde kullanıcının içeriği güncellemesini (ör. bir düğmeyle) sağlayın.

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

API'ler hakkında temel bilgiler

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

• Bu önbellekleri okurken ve bu önbelleğe yazarken benzersiz anahtarlar olarak Request nesneleri kullanılır. Kolaylık sağlamak için gerçek bir Request nesnesi yerine 'https://example.com/index.html' gibi bir URL dizesi anahtar olarak iletebilirsiniz. API, bu işlemi sizin için otomatik olarak gerçekleştirir.
• Bu önbelleğe alınan değerler olarak Response nesneleri kullanılır.
• Belirli bir Response üzerindeki Cache-Control başlığı, veriler önbelleğe alınırken etkili bir şekilde yok sayılır. Otomatik, yerleşik bir geçerlilik bitiş tarihi veya tazelik kontrolü yoktur. Bir öğeyi önbelleğe kaydettikten sonra, kodunuz açıkça kaldırana kadar bu öğe saklanır. (Önbelleği sizin adınıza yönetmeyi kolaylaştıran kitaplıklar vardır. Bu konular bu serinin ilerleyen bölümlerinde ele alınacaktır.)
• LocalStorage gibi eski, senkron API'lerin aksine, tüm Cache Storage API işlemleri asenkrondur.

Kısa bir ara: promises ve async/await

Hizmet çalışanları ve Cache Storage API, asynchronize programlama kavramlarını kullanır. Özellikle, asenkron işlemlerin gelecekteki sonucunu temsil etmek için büyük ölçüde umutlara güvenirler. Başlamadan önce promise'ler ve ilgili async/await söz dizimi hakkında bilgi edinin.

Bu kodu henüz dağıtmayın

Önemli bir temel sağlarlar ve olduğu gibi kullanılabilirler ancak hem hizmet çalışanları hem de Cache Storage API, bir dizi uç durum ve "sık karşılaşılan sorun" içeren, etkili bir şekilde alt düzey yapı taşlarıdır. Bu API'lerin zor kısımlarını kolaylaştırmaya yardımcı olabilecek ve üretime hazır bir hizmet çalışanı oluşturmak için ihtiyacınız olan her şeyi sunabilecek bazı üst düzey araçlar vardır. Bir sonraki kılavuzda bu tür araçlardan biri olan Workbox ele alınmaktadır.