Workbox ile çalışma zamanını önbelleğe alma

Çalışma zamanını önbelleğe alma, yanıtları "kullandıkça" bir önbelleğe kademeli olarak eklemek anlamına gelir. Çalışma zamanı önbelleğe alma işlemi, geçerli isteğin güvenilirliğine yardımcı olmaz ancak aynı URL için gelecekteki isteklerin daha güvenilir hale getirilmesine yardımcı olabilir.

Tarayıcının HTTP önbelleği, çalışma zamanı önbelleğe alma örneğidir. Yalnızca belirli bir URL için yapılan istekten sonra doldurulur. Ancak Service Worker'lar sayesinde, tek başına HTTP önbelleğinin sunabileceğinden daha fazlasını sunan çalışma zamanı önbelleğe alma işlemi uygulayabilirsiniz.

Stratejik olmak

Önceden önbelleğe alma (her zaman bir önbellekten önceden tanımlanmış dosya kümesi sunmaya çalışır) yerine, çalışma zamanı önbelleğe alma, ağ ve önbellek erişimini çeşitli şekillerde birleştirebilir. Her kombinasyon genellikle bir önbelleğe alma stratejisi olarak adlandırılır. Temel önbelleğe alma stratejileri şunlardır:

  • Ağ öncelikli
  • Önbellek öncelikli
  • Eski-yeniden doğrula

Ağ öncelikli

Bu yaklaşımda, hizmet çalışanınız ilk olarak ağdan bir yanıt almayı dener. Ağ isteği başarılı olursa harika! Yanıt, web uygulamanıza döndürülür ve Cache Storage API'si kullanılarak yanıtın bir kopyası saklanır. Yeni bir giriş oluşturulabilir veya aynı URL için önceki bir giriş güncellenebilir.

Sayfadan Service Worker'a ve Service Worker'dan ağa giden isteği gösteren şema. Ağ isteği başarısız olur ve istek önbelleğe gider.

Ağ isteği tamamen başarısız olursa veya yanıt döndürmesi çok uzun sürerse bunun yerine önbellekteki en son yanıt döndürülür.

Önbellek öncelikli

Önbellek öncelikli strateji, etkili bir şekilde ağ öncelikli yaklaşımın tersidir. Bu yaklaşımda, hizmet çalışanınız bir isteğe müdahale ettiğinde, önbelleğe alınmış bir yanıt olup olmadığını görmek için önce Cache Storage API'yi kullanır. Varsa bu yanıt web uygulamasına döndürülür.

Bununla birlikte, bir önbellek hatası varsa Service Worker ağa giderek yanıtı buradan almaya çalışır. Ağ isteğinin başarılı olduğu varsayıldığında istek web uygulamanıza döndürülür ve bir kopyası önbelleğe kaydedilir. Önbelleğe alınan bu kopya, aynı URL'ler için tekrar istekte bulunulduğunda ağı atlamak için kullanılır.

Sayfadan Service Worker'a ve Service Worker'dan önbelleğe doğru giden isteği gösteren şema. Önbellek isteği başarısız olur ve istek ağa gider.

Eski-yeniden doğrula

Eski esnada yeniden doğrulama, karma bir çalışma yöntemidir. Bunu kullandığında hizmet çalışanınız önbelleğe alınmış bir yanıt olup olmadığını hemen kontrol eder ve bulunursa yanıtı web uygulamanıza geri gönderir.

Bu esnada, önbellek eşleşmesi olup olmadığına bakılmaksızın, hizmet çalışanınız "yeni" bir yanıt almak için bir ağ isteğini de tetikler. Bu yanıt, daha önce önbelleğe alınan yanıtları güncellemek için kullanılır. İlk önbellek kontrolünde hata olduysa ağ yanıtının bir kopyası da web uygulamanıza geri gönderilir.

Sayfadan Service Worker'a ve Service Worker'dan önbelleğe doğru giden isteği gösteren şema. Önbellek hemen bir yanıt döndürür ve gelecekteki istekler için ağdan bir güncelleme getirir.

Neden Workbox'ı kullanmalısınız?

Bu önbelleğe alma stratejileri, normalde kendi hizmet çalışanınızda tekrar tekrar yazmanız gereken tarifler anlamına gelir. Workbox, bu kurallara başvurmak yerine, bunları strateji kitaplığının bir parçası olarak paket halinde sunar ve Service Worker'ınıza katılmanız için hazırdır.

Workbox, önbelleğe alınan girişleri otomatik olarak kullanımdan kaldırmanızı veya önceden önbelleğe alınmış bir girişte güncellemeler gerçekleştiğinde web uygulamanızı bilgilendirmenizi sağlayan sürüm oluşturma desteği de sunar.

Öğelerinizden hangisi, hangi stratejilerle önbelleğe alınmalıdır?

Çalışma zamanını önbelleğe alma, önbelleğe alma işleminin bir tamamlayıcısı olarak görülebilir. Öğelerinizin tümü zaten önceden önbelleğe alınıyorsa işlem tamamlanmış demektir. Çalışma zamanında önbelleğe alınması gereken hiçbir şey yoktur. Bununla birlikte, nispeten karmaşık web uygulamaları için her şeyi önbelleğe almayacak olmanız muhtemeldir.

Daha büyük medya dosyaları, CDN gibi bir üçüncü taraf ana makineden sunulan öğeler veya API yanıtları, etkili bir şekilde önceden önbelleğe alınamayan öğe türlerine yalnızca birkaç örnektir. Bu kategoriye giren istekleri belirlemek için Geliştirici Araçları'ndaki Ağ panelini kullanın ve her biri için hangi güncellik ve güvenilirlik dengesinin uygun olduğunu düşünün.

Yenilikten ziyade güvenilirliği önceliklendirmek için eski ile yeniden doğrulama özelliğini kullanın

Eski bir yeniden doğrulama stratejisi, neredeyse anında önbelleğe alınan bir yanıt döndürdüğünden (önbellek ilk istek aracılığıyla doldurulduktan sonra), bu stratejiyi kullanırken güvenilir bir hızlı performans elde edersiniz. Bu durum, ağdan alınmış olan verilere kıyasla eski olabilecek yanıt verilerini geri alma karşılığında ortaya çıkar. Bu strateji, eski bir değer olsa bile bir şeyi hemen göstermenin önemli olduğunu bildiğinizde, kullanıcı profili resimleri veya bir görünümü doldurmak için kullanılan ilk API yanıtları gibi öğeler için en iyi sonucu verir.

Güvenilirlikten önce güncelliğe öncelik vermek için ağ öncelikli kullanın

Bir bakıma, ağa öncelik veren bir strateji kullanmak, ağa karşı savaşınızda yenilginizi kabullenmek anlamına gelir. Bu öncelik verilir, ancak bu durum güvenilirlikle ilgili belirsizlikleri beraberinde getirir. Belirli öğe türlerinde, eski bilgileri geri almak yerine yeni bir yanıt görmek tercih edilir. Örneğin, sık güncellenen bir makalenin metni için API isteğinde bulunurken güncelliği tercih edebilirsiniz.

Service Worker'ın içinde ağ öncelikli bir strateji kullanarak doğrudan ağa karşı hareket etmek yerine eski bir yanıt olsa bile bir şeye geri dönebilme avantajına sahip olursunuz. Güvenilir olmayacaksınız, ancak en azından çevrimdışıyken güvenilir olacaksınız.

Sürümlü URL'ler için önbelleği kullanma

Önbellek öncelikli stratejide bir giriş önbelleğe alındıktan sonra hiçbir zaman güncellenmez. Bu nedenle, bu anahtar kelimeyi yalnızca değişme olasılığı düşük olan öğelerle kullandığınızdan emin olun. Bu, özellikle sürüm oluşturma bilgilerini içeren URL'lerde en iyi sonucu verir. Bu, Cache-Control: max-age=31536000 yanıt başlığıyla sunulması gereken URL'lerle aynıdır.