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:
- 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.
- 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.
- 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.
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.
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. |
|
| 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. |
|
| 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. |
|
| Ö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. |
|
| Yalnızca önbellek | İçerik nadiren değişir. |
|
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ığı tarafından desteklenmektedir.
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.