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ı.

Jonathan Chen

Hizmet çalışanları ve PWA'lar modern web uygulamalarının standartları haline gelirken kaynak önbelleğe alma hiç olmadığı kadar karmaşık hale geldi. Bu makalede, tarayıcı önbelleğe alma ile ilgili genel bilgiler ele alınmaktadır. Bu bilgiler arasında şunlar yer alır:

• Service Worker önbelleğe alma ve HTTP önbelleğe alma işlemlerinin kullanım alanları ve bunların arasındaki farklar.
• Normal HTTP önbelleğe alma stratejilerine kıyasla farklı hizmet çalışanı önbelleğe alma süresi sonu stratejilerinin avantajları ve dezavantajları.

Ö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. Bu işlemin otomatik olarak gerçekleşmediğini unutmayın. 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 önbelleği'nde bulunursa ve henüz süresi dolmadıysa tarayıcı, kaynağı otomatik olarak HTTP önbelleğinden kullanır.
3. Sunucu tarafı: Hizmet çalışanı önbelleğinde veya HTTP önbelleğinde hiçbir şey bulunamazsa 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.

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.

Hizmet çalışanı önbelleğini kontrol etme

Bir hizmet çalışanı, event ile HTTP isteklerine müdahale eder. işleyiciler (genellikle fetch etkinliği) olur. Bu kod snippet'inde, önce önbelleğe alma stratejisinin mantığı gösterilmektedir.

Tekerleği yeniden icat etmemek için Workbox'u kullanmanız önemle tavsiye edilir. Örneğin, kaynak URL yollarını tek bir normal ifade kodu satırı ile kaydedebilirsiniz.

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.

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

Hizmet çalışanı önbelleğe alma, önbelleğe alma mantığının ayrıntılı kontrolüne ek olarak aşağıdakileri de sağlar:

• Kaynağınız için daha fazla bellek ve depolama alanı: Tarayıcı, HTTP önbelleği kaynaklarını kaynak başına ayırır. Diğer bir deyişle, birden fazla alt alan adınız varsa bunları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, bir kullanıcı tarayıcı ayarlarının kullanıcı arayüzünden manuel olarak temizleme yaparak veya bir sayfayı sert şekilde yeniden yükleyerek önbelleği temizleyebilir. Service Worker önbelleğiyle çok daha yüksek . Daha fazla bilgi için Kalıcı depolama başlıklı makaleyi inceleyin.
• İstikrarsız ağlar veya çevrimdışı deneyimler için daha fazla esneklik: HTTP önbelleğiyle yalnızca iki seçenek vardır: Kaynak önbelleğe alınır veya alınmaz. 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 hizmet çalışanı önbelleğinden gelen kısımları içeren özelleştirilmiş kullanıcı arayüzleri bazı bölümler hariç tutulur ("Yaklama 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ğe alma özelliğini kullanmak, bir kaynağın ne zaman ve ne kadar süreyle önbelleğe alınacağını belirlemek için sunucuya güvenmek anlamına gelir.

HTTP yanıt üst bilgileriyle HTTP önbelleği geçerlilik bitiş tarihini kontrol etme

Bir sunucu, kaynakla ilgili tarayıcı isteğine yanıt verirken tarayıcıya kaynağı ne kadar süreyle önbelleğe alması gerektiğini bildirmek için HTTP yanıt üstbilgilerini kullanır. Daha fazla bilgi edinmek için Yanıt üstbilgileri: Web sunucunuzu yapılandırma başlıklı makaleye göz atın.

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

HTTP önbelleğe alma, yalnızca zamana dayalı (TTL) kaynak geçerlilik süresi mantığıyla ilgilendiği için hizmet çalışanı önbelleğe alma işleminden çok daha basittir. Görüntüleyin Hangi yanıt başlığı değerlerini kullanmalısınız? ve Özet bölümlerini inceleyin.

Önbellek geçerlilik bitiş tarihi mantığınızı tasarlama

Bu bölümde, Service Worker'da tutarlı süre sonu 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 uzun vadeli, orta vadeli ve kısa vadeli olmak üzere 3 senaryoya göz atacağız.

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

• Önbelleğe alınmış 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ğı getirmiyor. Tarayıcının HTTP önbelleği, kaynağın bir kopyasını içermediğinden kaynak için sunucu tarafına gider.

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 (yeniden doğrulama sırasında eski)

• Ö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ı, kaynağın bir kopyasını HTTP önbelleğine alır ve bu kopyayı hizmet çalışanına döndürür.
• Ö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ı, "yeniden doğrulama" adımından en iyi şekilde yararlanmak için HTTP önbelleğini geçersiz kılmak üzere ek önbellek bozma işlemi gerektirir.

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

• Önbelleğe alınmış bir kaynak geçerli olduğunda (<= 10 dakika): Hizmet çalışanı, kaynağı almak için ağa gider. Tarayıcı, kaynağın bir kopyasını HTTP önbelleğine alır ve bu nedenle sunucu tarafına gitmeden kaynağı hizmet çalışanına döndürür.
• Ö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, ağ kararsız olduğunda hizmet çalışanı önbelleği önbelleğe alınmış kaynakları döndürmeye devam edebilir. Öte yandan, ağ kararsız veya kapalı olduğunda HTTP önbelleği güvenilir değildir.

Servis çalışanı önbelleği ve HTTP katmanlarında farklı önbellek geçerlilik bitiş tarihi mantığı

Avantajları ve dezavantajları göstermek için uzun, orta ve kısa vadeye tekrar bakacağız. senaryoları ele alacağız.

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

• Hizmet çalışanı önbelleğinde, önbelleğe alınan 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ğindeki bir önbelleğe alınmış kaynağın süresi dolduğunda (> 90 gün): Hizmet çalışanı, kaynağı almak 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ı hemen döndürdüğü için kullanıcılar anında yanıt alır.
• 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: Ara depolama (yeniden doğrulama sırasında eski)

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleği içinde geçerli olduğunda (<= 30 gün): Hizmet çalışanı, önbelleğe alınmış kaynağı hemen döndürür.
• Hizmet çalışanı önbelleğindeki bir önbelleğe alınmış kaynağın süresi dolduğunda (> 30 gün): Hizmet çalışanı, kaynak için ağa gider. Tarayıcının HTTP önbelleği, kaynağın bir kopyasını içermediğinden istek sunucu tarafına gönderilir.

Artıları ve eksileri:

• Avantaj: Hizmet çalışanı, önbelleğe alınmış kaynakları hemen döndürdüğü için kullanıcılar anında yanıt alır.
• Avantaj: Hizmet çalışanı, "arka planda" gerçekleşen yeniden doğrulama sayesinde, belirli bir URL için sonraki isteğin ağdan yeni bir yanıt kullanmasını sağlayabilir.
• Dezavantajı: İyi tanımlanmış bir Service Worker önbelleğe alma stratejisi gereklidir.

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

• Önbelleğe alınmış bir kaynak, hizmet çalışanı önbelleği içinde geçerli olduğunda (<= 1 gün): Hizmet çalışanı, kaynak için ağa gider. Tarayıcı, varsa kaynağı HTTP önbelleğinden döndürür. Ağ çalışmıyorsa hizmet çalışanı kaynağı hizmet çalışanı önbelleği
• Hizmet çalışanı önbelleğindeki bir önbelleğe alınmış kaynağın süresi dolduğunda (> 1 gün): Hizmet çalışanı, kaynağı almak için ağa gider. Tarayıcı, kaynakları ağı.

Artıları ve eksileri:

• Avantaj: Ağ kararsız olduğunda veya kapalı olduğunda hizmet çalışanı, önbelleğe alınmış kaynakları hemen döndürür.
• Dezavantajı: Hizmet çalışanı, HTTP Önbelleğini geçersiz kılmak için ek önbellek bozmaya ihtiyaç duyar ve "Önce ağ" yapın kabul edersiniz.

Sonuç

Önbelleğe alma senaryolarının kombinasyonunun karmaşıklığı göz önüne alındığında, tüm durumları kapsayan tek bir kural tasarlamak mümkün değildir. Ancak önceki bölümlerdeki bulgulara göre, önbellek stratejilerinizi tasarlarken göz önünde bulundurabileceğiniz birkaç öneri vardır:

• Hizmet çalışanı önbelleğe alma mantığının, HTTP önbelleğe alma süresi sonu mantığıyla tutarlı olması gerekmez. Mümkünse hizmet çalışanına daha fazla kontrol vermek için hizmet çalışanında daha uzun bir geçerlilik bitiş tarihi mantığı kullanın.
• HTTP önbelleğe alma da önemli bir rol oynar ancak İstikrarsız veya kapalı olabilir.
• Hizmet çalışanı önbelleğe alma stratejinizin HTTP önbelleğiyle çakışmadan değerini sağladığından emin olmak için her kaynak için önbelleğe alma stratejilerinizi tekrar gözden geçirin.

Daha fazla bilgi

• Ağ güvenilirliği
• HTTP Önbelleği ile gereksiz ağ isteklerini önleme
• HTTP önbelleği codelab'i
• Hizmet işçilerinin gerçek dünyadaki performans etkisini ölçme
• Cache-Control ve Expires
• Önbelleğe Almayla İlgili Bilinmeyenler: Önbellekleri İnceleme, Temizleme ve Devre Dışı Bırakma