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

Service Worker önbelleği ve HTTP önbellek katmanlarında tutarlı veya farklı bir geçerlilik süresi mantığı kullanmanın avantajları ve dezavantajları.

Service Worker'lar ve PWA'lar modern web uygulamalarının standartları haline gelirken kaynakları önbelleğe alma hiç olmadığı kadar karmaşık hale geldi. Bu makalede tarayıcı önbelleğine alma, şunları içerir:

  • Service Worker önbelleğe alma ve HTTP önbelleğe alma işlemlerinin kullanım alanları ve bunların arasındaki farklar.
  • Normal hizmetlere kıyasla farklı Service Worker önbelleğe alma bitiş stratejilerinin avantajları ve dezavantajları HTTP önbelleğe alma stratejileri.

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

Üst düzeyde, tarayıcı bir kaynak istediğinde aşağıdaki önbelleğe alma sırasını izler:

  1. Hizmet çalışanı önbelleği: Hizmet çalışanı, kaynağın önbelleğinde olup olmadığını ve kaynağın kendisinin döndürülüp döndürülmeyeceğine, programlanmış önbelleğe alma stratejilerine göre karar verir. Not otomatik olarak gerçekleşmez. isteklerin hizmetten sunulması için hizmet çalışanı ve ağ isteklerine müdahale etme önbelleğine alınır.
  2. HTTP önbelleği (tarayıcı önbelleği olarak da bilinir): Kaynak, HTTP Önbellek ve geçerlilik süresi henüz sona ermediyse tarayıcı otomatik olarak HTTP önbelleğinden alınan kaynaktır.
  3. Sunucu tarafı: Hizmet çalışanı önbelleğinde veya HTTP önbelleğinde hiçbir şey bulunmazsa tarayıcı, kaynağı istemek için ağa gider. Kaynak bir CDN'de önbelleğe alınmamışsa isteği, kaynak sunucuya geri dönmelidir.

Önbelleğe alma akışı

Katmanları önbelleğe alma

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

Bir hizmet çalışanı, ağ türü HTTP isteklerine müdahale eder ve önbelleğe alma stratejisi belirlemek için "Sayfa Görüntüleme" etiketini kullanın. Hizmet çalışanı önbelleği ve HTTP önbellek aynı genel amaca hizmet eder, ancak hizmet çalışanı önbelleği daha fazla önbelleğe alma özelliği sunar. örneğin, tam olarak neyin önbelleğe alındığı ve önbelleğe alma işleminin nasıl yapıldığı konusunda ayrıntılı kontrol gibidir.

Service Worker önbelleğini kontrol etme

Bir hizmet çalışanı, event ile HTTP isteklerine müdahale eder. işleyiciler (genellikle fetch etkinliğidir). Bu kod snippet'i, bir Önbellek Öncelikli önbelleğe alma stratejisi olabilir.

Hizmet çalışanlarının HTTP isteklerine nasıl müdahale ettiğini gösteren diyagram

E-posta ve sosyal medya gibi işlemlerde sorun yaşamamak için Workbox'ın tekerleği yeniden keşfettim. Örneğin, şunları yapabilirsiniz: kaynak URL yollarını tek bir normal ifade kodu satırıyla kaydedin.

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('styles/.*\\.css'), callbackHandler);

Service Worker önbelleğe alma stratejileri ve kullanım alanları

Sonraki tabloda, yaygın hizmet çalışanı önbelleğe alma stratejileri ve her bir stratejinin ne zaman yararlı olduğu özetlenmiştir.

Stratejiler Güncel olma gerekçesi Kullanım alanları
Ağ yalnızca İçeriğin her zaman güncel olması gerekir.
  • Ödemeler ve ödeme işlemleri
  • Bakiye ekstreleri
Ağ önbelleğe alma Yeni içeriğin sunulması tercih edilir. Ancak ağ başarısız olursa veya kararsızsa biraz eski içerik yayınlamak için kabul edilebilir.
  • Zamanında gelen veriler
  • Fiyatlar ve ücretler (sorumluluk reddi beyanları gerektirir)
  • Sipariş durumları
Eski-yeniden-doğrulama Önbelleğe alınan içeriği hemen sunmakta bir sakınca yoktur, ancak güncellenmiş önbelleğe alınmış içerik duymuş olabilirsiniz.
  • Haber feed'leri
  • Ürün listeleme sayfaları
  • Mesajlar
Önce önbelleğe alın, ağa geri dönün İçerik kritik değildir ve performans artışı sağlamak amacıyla önbellekten sunulabilir, ancak hizmet çalışanının zaman zaman güncellemeleri kontrol etmesi gerekir.
  • Uygulama kabukları
  • Yaygın kaynaklar
Yalnızca önbellek İçerik nadiren değişir.
  • Statik içerik

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

Önbelleğe alma mantığının ayrıntılı kontrolüne ek olarak Service Worker önbelleğe alma özelliği aşağıdakileri de sağlar:

  • Kaynakınız için daha fazla bellek ve depolama alanı: Tarayıcı, HTTP önbelleğini ayırır kaynakları kaynak bazında görebilirsiniz. Başka Birden çok alt alan adınız varsa, bu alt alan adlarının tümü aynı HTTP önbelleğini paylaşır. Hayır, kaynağınızın/alan adınızın içeriğinin uzun süre HTTP önbelleğinde kalmasını garantilemek. Örneğin, Örneğin, kullanıcı tarayıcının ayarlar arayüzünden manuel olarak önbelleği tamamen silebilir veya bir sayfanın sabit yeniden yüklenmesini tetiklemektedir. Service Worker önbelleğiyle çok daha yüksek . Bkz. Kalıcı depolama alanı ile ilgili daha fazla bilgi edinin.
  • Kesintili ağlar veya çevrimdışı deneyimlerle daha fazla esneklik: HTTP önbelleği sayesinde yalnızca ikili seçeneği mevcuttur: kaynağın önbelleğe alınmış olup olmaması fark etmez. Hizmet çalışanı önbelleğe alma ile küçük “kesintiler”i hafifletebilirsiniz çok daha kolay hale getirebileceğimizi gösterdiğimiz için, eksiksiz bir çevrimdışı deneyim ("Yalnızca önbellek" stratejisiyle) sunabilir, Örneğin, sayfanın bazı bölümleri Service Worker önbelleğinden gelen özelleştirilmiş kullanıcı arayüzleri ve bazı bölümler hariç tutulur ("Yakalama işleyiciyi ayarla" stratejisiyle).

HTTP önbelleğe alma

Tarayıcı, bir web sayfasını ve ilgili kaynakları ilk kez yüklediğinde bu kaynakları HTTP önbelleği. HTTP önbelleği, genellikle, HTTP çerezleri hariç, son kullanıcı tarafından açıkça devre dışı bırakılmış olabilir.

HTTP önbelleğine alma, bir kaynağın ne zaman önbelleğe alınacağını ve bunun gerekir.

HTTP yanıt başlıklarıyla HTTP önbellek geçerlilik süresini kontrol etme

Sunucu, bir kaynak için tarayıcı isteğine yanıt verdiğinde aşağıdaki işlemler için HTTP yanıt başlıklarını kullanır: tarayıcıya kaynağı ne kadar süreyle önbelleğe alması gerektiğini söyler. Yanıt başlıkları: web'inizi yapılandırma başlıklı makaleye göz atın. sunucu bölümüne bakın.

HTTP önbelleğe alma stratejileri ve kullanım alanları

HTTP önbelleğe alma işlemi yalnızca süreye dayalı (TTL) kaynak geçerlilik süresi mantığı. Görüntüleyin Hangi yanıt başlığı değerlerini kullanmalısınız? ve Özet bölümlerini inceleyin.

Önbellek süre sonu mantığınızı tasarlama

Bu bölümde, Service Worker'da tutarlı geçerlilik bitiş mantığı kullanmanın avantajları ve dezavantajları açıklanmaktadır. ve HTTP önbellek katmanlarının yanı sıra ayrı süre sonu mantığının avantajları ve dezavantajları, katman olarak görünür.

Aşağıdaki görüntüde, hizmet çalışanı önbelleğine alma ve HTTP önbelleğe alma işleminin, oluşturabilirsiniz:

Tüm önbellek katmanları için tutarlı geçerlilik bitiş mantığı

Avantajları ve dezavantajları göstermek için 3 senaryoya bakacağız: uzun vadeli, orta vadeli ve çok önemlidir.

Senaryolar Uzun süreli önbelleğe alma Orta vadeli önbelleğe alma Kısa süreli önbelleğe alma
Hizmet çalışanı önbelleğe alma stratejisi Önbellek, ağa geri dönüyor Yeniden doğrulama sırasında eski tarihli Ağ önbelleğe geri dönüyor
Hizmet çalışanı önbellek TTL'si 30 gün 1 gün 10 dk.
HTTP önbellek maksimum yaş 30 gün 1 gün 10 dk.

Senaryo: Uzun vadeli önbelleğe alma (Önbellek, ağa geri dönme)

  • Önbelleğe alınan bir kaynak geçerli olduğunda (<= 30 gün): Hizmet çalışanı önbelleğe alınanı döndürür kaynağınızı hemen göstermeniz gerekir.
  • Önbelleğe alınan bir kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışanı kaynağı getirebileceksiniz. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası yoktur, bu nedenle sunucu tarafına geçer.

Dezavantaj: Bu senaryoda, HTTP önbelleğe alma işlemi daha az değer sağlar. Çünkü tarayıcı her zaman , hizmet çalışanında önbelleğin süresi dolduğunda isteği sunucu tarafına iletir.

Senaryo: Orta vadeli önbelleğe alma (Stale-when-re huzurlu)

  • Önbelleğe alınan bir kaynak geçerli olduğunda (<= 1 gün): Hizmet çalışanı önbelleğe alınanı döndürür kaynağı hemen alır ve kaynağı getirmek için ağa gider. Tarayıcıda dosyanın bir kopyası var kaynakta bulunması için bu kopyayı hizmet çalışanına geri döndürecektir.
  • Önbelleğe alınan bir kaynağın süresi dolduğunda (> 1 gün): Hizmet çalışanı önbelleğe alınanı döndürür kaynağı hemen alır ve kaynağı getirmek için ağa gider. Tarayıcının HTTP önbelleğine alır, böylece kaynağı almak için sunucu tarafına geçer.

Dezavantajı: Hizmet çalışanı, HTTP önbelleğini geçersiz kılmak için ek önbellek bozma kullanarak "yeniden doğrulama" özelliğinden en iyi şekilde adımına geçelim.

Senaryo: Kısa süreli önbelleğe alma (Ağ önbelleğe yedeklenir)

  • Önbelleğe alınan bir kaynak geçerli olduğunda (<= 10 dakika): Hizmet çalışanı ağa gider tıklayın. Tarayıcının HTTP önbelleğinde kaynağın bir kopyası vardır, dolayısıyla kaynak iletebilir.
  • Önbelleğe alınan bir kaynağın süresi dolduğunda (> 10 dakika): Hizmet çalışanı önbelleğe alınanı döndürür kaynağı hemen alır ve kaynağı getirmek için ağa gider. Tarayıcının HTTP önbelleğine alır, böylece kaynağı almak için sunucu tarafına geçer.

Dezavantajı: Orta vadeli önbelleğe alma senaryosuna benzer şekilde, Service Worker için HTTP önbelleğinden en son kaynağı getirmek üzere geçersiz kılmak için önbellek bozma mantığı olarak tanımlar.

Tüm senaryolarda hizmet çalışanı

Tüm senaryolarda, hizmet çalışanı önbelleği, ağ şu durumlarda önbelleğe alınan kaynakları döndürmeye devam edebilir: İstikrarsızdır. Diğer yandan, ağ kararsız veya hizmet dışı olduğunda HTTP önbelleği güvenilir değildir.

Hizmet çalışanı önbelleğinde ve HTTP katmanlarında farklı önbellek süre sonu mantığı

Artıları ve eksileri göstermek için uzun, orta ve kısa vadeye tekrar değineceğiz. senaryoları ele alacağız.

Senaryolar Uzun süreli önbelleğe alma Orta vadeli önbelleğe alma Kısa süreli önbelleğe alma
Hizmet çalışanı önbelleğe alma stratejisi Önbellek, ağa geri dönüyor Yeniden doğrulama sırasında eski tarihli Ağ önbelleğe geri dönüyor
Hizmet çalışanı önbellek TTL'si 90 gün 30 gün 1 gün
HTTP önbellek maksimum yaş 30 gün 1 gün 10 dk.

Senaryo: Uzun vadeli önbelleğe alma (Önbellek, ağa geri dönme)

  • Hizmet çalışanı önbelleğinde önbelleğe alınmış bir kaynak geçerli olduğunda (<= 90 gün): Hizmet çalışan, önbelleğe alınan kaynağı hemen döndürür.
  • Hizmet çalışanı önbelleğinde önbelleğe alınan bir kaynağın süresi dolduğunda (> 90 gün): Hizmet kaynağı getirmek için ağa gider. Tarayıcıda önbelleğine alır, böylece sunucu tarafına geçer.

Artıları ve eksileri:

  • Avantajı: Hizmet çalışanı önbelleğe alınmış kaynakları döndürdüğünde kullanıcılar anında yanıt deneyimi yaşar hemen teslim edebilirsiniz.
  • Pro: Service Worker, önbelleğinin ne zaman kullanılacağı ve ne zaman kullanılacağı (kaynakların yeni sürümlerini istemek için).
  • Dezavantajı: İyi tanımlanmış bir Service Worker önbelleğe alma stratejisi gereklidir.

Senaryo: Orta vadeli önbelleğe alma (Stale-when-re huzurlu)

  • Hizmet çalışanı önbelleğinde, önbelleğe alınmış bir kaynak geçerli olduğunda (<= 30 gün): Hizmet çalışan, önbelleğe alınan kaynağı hemen döndürür.
  • Hizmet çalışanı önbelleğinde önbelleğe alınan bir kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışan, kaynak için ağa gider. Tarayıcıda kaynağın bir kopyası mevcut değil: Böylece sunucu tarafına geçer.

Artıları ve eksileri:

  • Avantajı: Hizmet çalışanı önbelleğe alınmış kaynakları döndürdüğünde kullanıcılar anında yanıt deneyimi yaşar hemen teslim edebilirsiniz.
  • Pro: Hizmet çalışanı, belirli bir URL için sonraki istekte ağdan yeni yanıt alır. Bu, "arka planda" gerçekleşen yeniden doğrulama işlemidir.
  • Dezavantajı: İyi tanımlanmış bir Service Worker önbelleğe alma stratejisi gereklidir.

Senaryo: Kısa süreli önbelleğe alma (Ağ önbelleğe yedeklenir)

  • Hizmet çalışanı önbelleğinde önbelleğe alınmış bir kaynak geçerli olduğunda (<= 1 gün): Hizmet çalışan, kaynak için ağa gider. Tarayıcı, HTTP'deki kaynağı döndürür önbelleğe alabilirsiniz. Ağ kapalıysa hizmet çalışanı kaynağı hizmet çalışanı önbelleği
  • Hizmet çalışanı önbelleğinde önbelleğe alınan bir kaynağın süresi dolduğunda (> 1 gün): Hizmet kaynağı getirmek için ağa gider. Tarayıcı, kaynakları ağı.

Artıları ve eksileri:

  • Profesyonel: Ağ kararsız veya hizmet dışı olduğunda hizmet çalışanı önbelleğe alınmış olarak döndürür kaynaklara hemen ulaşabilirsiniz.
  • Dezavantajı: Hizmet çalışanı, HTTP Önbelleğini geçersiz kılmak için ek önbellek bozma gerektirir. "Önce ağ" yapın kabul edersiniz.

Sonuç

Önbelleğe alma senaryolarının kombinasyonunun karmaşıklığı düşünüldüğünde, tek bir kural tasarlamak mümkün değildir ele alacağız. Ancak önceki bölümlerde elde edilen bulgulara göre aşağıdaki önerilerden yararlanabilirsiniz:

  • Hizmet çalışanı önbelleğe alma mantığının, HTTP önbelleğe alma süresinin bitişiyle tutarlı olması gerekmez mantığıyla başlayalım. Mümkünse hizmet çalışanına izin vermek için hizmet çalışanında daha uzun süre sonu mantığı kullanın. sahip olacaksınız.
  • HTTP önbelleğine alma da önemli bir rol oynar ancak belirsiz ya da çökmüştür.
  • Service Worker'ınızın önbelleğe almasını sağlamak için her kaynakla ilgili önbelleğe alma stratejilerinizi tekrar gözden geçirin stratejisi, değerini HTTP önbelleğiyle çakışmadan sağlar.

Daha fazla bilgi