Bir sitede bir görev gerçekleştirmek genellikle birkaç adımı içerir. Örneğin, bir e-ticaret sitesinde bir ürün satın almak, bir ürünü aramayı, sonuç listesinden bir ürünü seçmeyi, ürünü sepete eklemeyi ve ödeme yaparak işlemi tamamlamayı içerebilir.
Teknik açıdan, farklı sayfalar arasında gezinmek, bir navigasyon talebi. Genel bir kural olarak, siz yapma uzun ömürlü kullanmak istiyorum Cache-Control gezinme isteği için HTML yanıtını önbelleğe almak için başlıklar. Normalde ağ aracılığıyla tatmin edilmeleri gerekir. Cache-Control: no-cache, sonraki ağ istekleri zinciriyle birlikte HTML’nin (makul ölçüde) yeni olmasını sağlamak için. Kullanıcı yeni bir sayfaya her gittiğinde ağa karşı gitmek zorunda olmak ne yazık ki her gezinmenin yavaş olabileceği anlamına gelir – en azından bu, yavaş olmayacağı anlamına gelir güvenilir hızlı.
Bu istekleri hızlandırmak için, kullanıcının ne yapacağını önceden tahmin edebiliyorsanız, bu sayfaları ve varlıkları önceden talep edebilir ve kullanıcı bu bağlantılara tıklayana kadar kısa bir süre önbellekte tutabilirsiniz. Bu tekniğe önceden getirme denir ve genellikle ekleyerek uygulanır. <link rel="prefetch"> önceden getirilecek kaynağı gösteren sayfalara etiketler.
Bu kılavuzda, hizmet çalışanları geleneksel önceden getirme tekniklerinin bir tamamlayıcısı olarak kullanılabilir.
Üretim vakaları #
MercadoLibre Latin Amerika’nın en büyük e-ticaret sitesidir. Navigasyonları hızlandırmak için dinamik olarak enjekte ederler <link rel="prefetch"> akışın bazı bölümlerindeki etiketler. Örneğin, listeleme sayfalarında, kullanıcı listeyi en alta kaydırdığı anda bir sonraki sonuç sayfasını getirir:
Önceden getirilen dosyalar “En Düşük” öncelikte istenir ve HTTP önbelleğinde veya bellek önbelleği (kaynağın önbelleğe alınabilir olup olmamasına bağlı olarak), tarayıcılara göre değişen bir süre boyunca. Örneğin Chrome 85’ten itibaren bu değer 5 dakikadır. Kaynaklar yaklaşık beş dakika tutulur, ardından normal Cache-Control kaynak için kurallar geçerlidir.
Hizmet çalışanı önbelleğe almayı kullanmak, önceden getirme kaynaklarının ömrünü beş dakikalık pencerenin ötesine uzatmanıza yardımcı olabilir.
Örneğin, İtalyan spor portalı Virgilio Spor ana sayfalarındaki en popüler gönderileri önceden getirmek için hizmet çalışanlarını kullanır. Ayrıca Ağ Bilgileri API’sı 2G bağlantısındaki kullanıcılar için önceden getirmeyi önlemek için.
Bunun bir sonucu olarak, Virgilio Sport’un 3 haftayı aşkın gözlemi, makalelere gezinme için yükleme sürelerinin iyileştiğine tanık oldu. %78ve makale gösterimlerinin sayısı artar %45.
Workbox ile önbelleğe almayı uygulama #
Aşağıdaki bölümde, hizmet çalışanına tamamlayıcı olarak kullanılabilecek farklı önbelleğe alma tekniklerinin nasıl uygulanacağını göstermek için Workbox’ı kullanacağız. <link rel="prefetch">hatta bu görevi tamamen servis çalışanına devrederek onun yerine geçebilir.
1. Statik sayfaları ve sayfa alt kaynaklarını önceden önbelleğe alın #
Ön önbelleğe alma, hizmet çalışanının yükleme sırasında dosyaları önbelleğe kaydetme yeteneğidir.
Aşağıdaki durumlarda önbelleğe alma, önceden getirme ile benzer bir amaca ulaşmak için kullanılır: gezinmeleri daha hızlı hale getirmek.
Statik sayfaları önbelleğe alma #
Derleme zamanında oluşturulan sayfalar için (örn. about.html, contact.html) veya tamamen statik sitelerde, sitenin belgeleri önbellek listesine eklenebilir, böylece kullanıcı bunlara her eriştiğinde önbellekte zaten bulunurlar:
workbox.precaching.precacheAndRoute([
{url: '/about.html', revision: 'abcd1234'},
// ... other entries ...
]);
Önbelleğe alma sayfası alt kaynakları #
Sitenin farklı bölümlerinin kullanabileceği (örn. JavaScript, CSS vb.) statik varlıkların önceden önbelleğe alınması, genel bir en iyi uygulamadır ve önceden getirme senaryolarında ekstra destek sağlayabilir.
Bir e-ticaret sitesinde gezinmeyi hızlandırmak için kullanabileceğiniz <link rel="prefetch"> Bir listeleme sayfasının ilk birkaç ürünü için ürün detay sayfalarını önceden getirmek için listeleme sayfalarındaki etiketler. Ürün sayfası alt kaynaklarını önceden önbelleğe aldıysanız, bu, gezinmeyi daha da hızlı hale getirebilir.
Bunu uygulamak için:
- Ekle
<link rel="prefetch">sayfaya etiketleyin:
link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- Hizmet çalışanındaki önbellek listesine sayfa alt kaynaklarını ekleyin:
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
// ... other entries ...
]);
2. Önceden getirme kaynaklarının ömrünü uzatın #
Daha önce de belirtildiği gibi, <link rel="prefetch"> kaynakları HTTP önbelleğinde sınırlı bir süre için getirir ve tutar; bu noktadan sonra Cache-Control bir kaynak için kurallar geçerlidir. Chrome 85’ten itibaren bu değer 5 dakikadır.
Hizmet çalışanları, bu kaynakları çevrimdışı kullanım için kullanılabilir hale getirmenin ek faydasını sağlarken, önceden getirme sayfalarının ömrünü uzatmanıza olanak tanır.
Bir önceki örnekte, şu ifade tamamlanabilir: <link rel="prefetch"> Workbox çalışma zamanı önbelleğe alma stratejisiyle bir ürün sayfasını önceden getirmek için kullanılır.
Bunu uygulamak için:
- Ekle
<link rel="prefetch">sayfaya etiketleyin:
link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- Bu tür istekler için hizmet çalışanında bir çalışma zamanı önbelleğe alma stratejisi uygulayın:
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
});
Bu durumda, bir kullanmayı tercih ettik. yeniden doğrularken bayatlama stratejisi. Bu stratejide, sayfalar hem önbellekten hem de ağdan paralel olarak talep edilebilir. Yanıt, varsa önbellekten, yoksa ağdan gelir. Önbellek, her başarılı istekte ağ yanıtıyla her zaman güncel tutulur.
3. Önceden getirmeyi hizmet çalışanına devredin #
Çoğu durumda en iyi yaklaşım kullanmaktır <link rel="prefetch">. etiket bir kaynak ipucu önceden getirmeyi olabildiğince verimli hale getirmek için tasarlanmıştır.
Ancak bazı durumlarda, bu görevi tamamen servis çalışanına devretmek daha iyi olabilir. Örneğin: istemci tarafında oluşturulmuş bir ürün listeleme sayfasındaki ilk birkaç ürünü önceden getirmek için birkaç ürün enjekte etmek gerekebilir <link rel="prefetch"> bir API yanıtına dayalı olarak sayfada dinamik olarak etiketler. Bu, sayfanın ana ileti dizisinde anlık olarak zaman harcayabilir ve uygulamayı daha zor hale getirebilir.
Bu gibi durumlarda, önceden getirme görevini tamamen hizmet çalışanına devretmek için bir “sayfadan hizmet çalışanına iletişim stratejisi” kullanın. Bu tür bir iletişim kullanılarak elde edilebilir işçi.postMessage():
bu Workbox Pencere paketi yapılan çağrının birçok detayını soyutlayarak bu tür iletişimi basitleştirir.
Workbox Window ile önceden getirme şu şekilde uygulanabilir:
- Sayfada: hizmet çalışanını mesaj türünü ve önceden getirilecek URL’lerin listesini ileterek arayın:
const wb = new Workbox('/sw.js');
wb.register();const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
- Hizmet çalışanında: bir mesaj vermek için bir mesaj işleyici uygulayın.
fetch()her URL’nin önceden getirilmesi için istek:
addEventListener('message', (event) => {
if (event.data.type === 'PREFETCH_URLS') {
// Fetch URLs and store them in the cache
}
});