Progresif Web Uygulamalarının en önemli özellikleri güvenilir olmalarıdır. Öğeleri hızlı bir şekilde yükleyebilmeleri, kullanıcıların etkileşimde kalmasını sağlama ve kötü ağ koşulları altında bile anında geri bildirim sağlama imkanı sunar. Peki bu nasıl mümkün oluyor? Service Worker fetch etkinliği sayesinde.
Getirme etkinliği
fetch etkinliği, hem aynı kaynak hem de kaynaklar arası istekler için PWA tarafından hizmet çalışanı kapsamındaki her ağ isteğine müdahale etmemizi sağlar. Gezinme ve öğe isteklerine ek olarak, yüklü bir hizmet çalışanından getirmek, sitenin ilk yüklemesinin ardından yapılan sayfa ziyaretlerinin ağ çağrıları olmadan oluşturulmasına izin verir.
fetch işleyici, URL'ler ve HTTP üst bilgileri de dahil olmak üzere bir uygulamadan gelen tüm istekleri alır ve uygulama geliştiricinin bunları nasıl işleyeceğine karar vermesine olanak tanır.
Hizmet çalışanınız bir isteği ağa yönlendirebilir, önceden önbelleğe alınan bir yanıtla yanıt verebilir veya yeni bir yanıt oluşturabilir. Seçim size kalmış. Aşağıda basit bir örnek verilmiştir:
self.addEventListener("fetch", event => {
console.log(`URL requested: ${event.request.url}`);
});
Bir isteği yanıtlama
Service Worker'ınıza bir istek geldiğinde yapabileceğiniz iki şey vardır. İsteği göz ardı ederek ağa gitmesine izin verebilir veya isteğe yanıt verebilirsiniz. Kullanıcı çevrimdışı olsa bile istekleri Service Worker'ınızın içinden yanıtlamak için neyin PWA'nıza döndürüleceğini ve nasıl döndürüleceğini seçebilirsiniz.
Gelen bir isteğe yanıt vermek için fetch etkinlik işleyici içinden event.respondWith() çağrısını şu şekilde yapın:
// fetch event handler in your service worker file
self.addEventListener("fetch", event => {
const response = .... // a response or a Promise of response
event.respondWith(response);
});
respondWith() öğesini eşzamanlı olarak çağırmanız ve bir Response nesnesi döndürmeniz gerekir. Ancak, eşzamansız bir çağrıda olduğu gibi getirme etkinlik işleyicisi bittikten sonra respondWith() çağıramazsınız. Yanıtın tamamını beklemeniz gerekiyorsa respondWith() adlı iş ortağına yanıt ile çözümlenen bir Sözü iletebilirsiniz.
Yanıt oluşturma
Fetch API sayesinde, JavaScript kodunuzda HTTP yanıtları oluşturabilirsiniz. Bu yanıtlar Cache Storage API'si kullanılarak önbelleğe alınabilir ve bu yanıtlar bir web sunucusundan geliyormuş gibi döndürülebilir.
Yanıt oluşturmak için gövdesini ve durum ile üstbilgi gibi seçenekleri ayarlayarak yeni bir Response nesnesi oluşturun:
const simpleResponse = new Response("Body of the HTTP response");
const options = {
status: 200,
headers: {
'Content-type': 'text/html'
}
};
const htmlResponse = new Response("<b>HTML</b> content", options)
Önbellekten yanıt verme
Artık Service Worker'den HTTP yanıtlarını nasıl sunacağınızı öğrendiğinize göre öğeleri cihazda depolamak için Önbelleğe Alma Depolama arayüzünü kullanabilirsiniz.
PWA'dan alınan isteğin önbellekte mevcut olup olmadığını kontrol etmek için cache Storage API'sini kullanabilir, böyle bir durumda respondWith() öğesine bu API'yle yanıt verebilirsiniz.
Bunun için önce önbellekte arama yapmanız gerekir. Üst düzey caches arayüzünde bulunan match() işlevi, kaynağınızdaki tüm mağazaları veya tek bir açık önbellek nesnesindeki mağazaları arar.
match() işlevi, bağımsız değişken olarak bir HTTP isteği veya URL alır ve karşılık gelen anahtarla ilişkili Yanıt ile çözümlenen bir taahhüt döndürür.
// Global search on all caches in the current origin
caches.match(urlOrRequest).then(response => {
console.log(response ? response : "It's not in the cache");
});
// Cache-specific search
caches.open("pwa-assets").then(cache => {
cache.match(urlOrRequest).then(response => {
console.log(response ? response : "It's not in the cache");
});
});
Önbelleğe alma stratejileri
Dosyaların yalnızca tarayıcı önbelleğinden sunulması, her kullanım durumuna uygun değildir. Örneğin, kullanıcı veya tarayıcı önbelleği çıkarabilir. Bu nedenle, PWA'nız için öğe yayınlama stratejilerinizi belirlemeniz gerekir.
Tek bir önbelleğe alma stratejisiyle sınırlı değilsiniz. Farklı URL modelleri için farklı URL'ler tanımlayabilirsiniz. Örneğin, minimum kullanıcı arayüzü öğeleri için bir, API çağrıları için başka bir stratejiniz ve resim ve veri URL'leri için üçüncü bir stratejiniz olabilir.
Bunu yapmak için ServiceWorkerGlobalScope.onfetch içindeki event.request.url öğesini okuyun ve normal ifadeler veya URL Kalıbı ile ayrıştırın. (Yazıldığı sırada, URL Kalıbı tüm platformlarda desteklenmemektedir).
En yaygın stratejiler şunlardır:
- Önce Önbelleğe Alın
- Önce önbelleğe alınmış yanıt arar ve bulunamazsa ağa geri döner.
- Önce Ağ
- Önce ağdan bir yanıt ister ve yanıt döndürülmezse önbellekte yanıt olup olmadığını kontrol eder.
- Yeniden Doğrulama Sırasında Eski
- Önbellekten bir yanıt sunarken arka planda öğenin en son sürümünü ister ve öğenin bir sonraki isteği için bunu önbelleğe kaydeder.
- Yalnızca Ağ
- Her zaman ağdan bir yanıt alır veya hatalarla karşılaşırsınız. Önbelleğe hiçbir zaman başvurulmaz.
- Yalnızca Önbellek
- Her zaman önbellekten veya hatadan alınan bir yanıt vererek yanıt verir. Ağa hiçbir zaman danışılmaz. Bu strateji kullanılarak sunulacak öğeler, istenmeden önce önbelleğe eklenmelidir.
Önce önbelleğe alın
Bu stratejiyi kullanarak hizmet çalışanı, önbellekte eşleşen isteği arar ve önbelleğe alınmışsa karşılık gelen yanıtı döndürür. Aksi takdirde yanıtı ağdan alır (isteğe bağlı olarak gelecekteki çağrılar için önbelleği günceller). Bir önbellek yanıtı ya da ağ yanıtı yoksa istek hata verir. Öğelerin ağa gitmeden yayınlanması genellikle daha hızlı olduğundan bu stratejide performans, güncellikten daha önemlidir.
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(cachedResponse => {
// It can update the cache to serve updated content on the next request
return cachedResponse || fetch(event.request);
}
)
)
});
Önce ağ
Bu strateji, Önce Önbellek stratejisinin aynasıdır. İsteğin ağdan karşılanıp karşılanamayacağını kontrol eder ve karşılayamazsa değeri önbellekten almaya çalışır. Önce önbellek gibi. Bir ağ yanıtı veya önbellek yanıtı yoksa istek hata verir. Yanıtın ağdan alınması genellikle yanıtı önbellekten almaya göre daha yavaştır. Bu strateji, performans yerine güncellenmiş içeriğe öncelik verir.
self.addEventListener("fetch", event => {
event.respondWith(
fetch(event.request)
.catch(error => {
return caches.match(event.request) ;
})
);
});
Yeniden doğrulama sırasında eski
"Yeniden doğrulama sırasında kullanılan eski" stratejisi, önbelleğe alınan yanıtı hemen döndürür, ardından ağda güncelleme olup olmadığını kontrol eder ve varsa önbelleğe alınan yanıt değiştirilir. Bu strateji her zaman bir ağ isteği gönderir. Çünkü önbelleğe alınmış bir kaynak bulunsa bile, bir sonraki istekte güncellenmiş sürümü kullanmak için önbellektekileri ağdan alınanlarla güncellemeye çalışır. Dolayısıyla bu strateji, önbellek öncelikli stratejinin hızlı sunumundan yararlanmanız ve önbelleği arka planda güncellemeniz için bir yol sağlar.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
const networkFetch = fetch(event.request).then(response => {
// update the cache with a clone of the network response
const responseClone = response.clone()
caches.open(url.searchParams.get('name')).then(cache => {
cache.put(event.request, responseClone)
})
return response
}).catch(function (reason) {
console.error('ServiceWorker fetch failed: ', reason)
})
// prioritize cached response over network
return cachedResponse || networkFetch
}
)
)
})
Yalnızca ağ
Yalnızca ağ stratejisi, hizmet çalışanı veya Cache Storage API'si olmadan tarayıcıların davranışına benzer. İstekler yalnızca ağdan alınabilen kaynakları döndürür. Bu genellikle yalnızca online API istekleri gibi kaynaklar için yararlıdır.
Yalnızca önbellek
Yalnızca önbellek stratejisi, isteklerin hiçbir zaman ağa gitmemesini sağlar; tüm gelen isteklere önceden doldurulmuş bir önbellek öğesiyle yanıt verilir. Aşağıdaki kod yalnızca önbelleği yanıtlamak için fetch etkinlik işleyicisini önbellek depolama alanının match yöntemiyle kullanır:
self.addEventListener("fetch", event => {
event.respondWith(caches.match(event.request));
});
Özel stratejiler
Yukarıda yaygın olarak kullanılan önbelleğe alma stratejileri olmakla birlikte, hizmet çalışanınızdan ve isteklerin nasıl işleneceğinden siz sorumlu olursunuz. Bunların hiçbiri ihtiyaçlarınıza uymuyorsa, kendi şablonunuzu oluşturun.
Örneğin, güncellenen içeriğe öncelik vermek için zaman aşımı olan, ağ öncelikli bir strateji kullanabilirsiniz ancak yanıtın belirlediğiniz eşik aralığında gösterilmesi gerekir. Ayrıca, önbelleğe alınmış bir yanıtı ağ yanıtıyla birleştirebilir ve Service Worker'dan karmaşık bir yanıt oluşturabilirsiniz.
Öğeleri güncelleme
PWA'nızın önbelleğe alınan öğelerini güncel tutmak zor olabilir. Eski strateji yeniden doğrulama stratejisi bunu yapmanın bir yolu olmakla birlikte, tek yöntem değildir. Güncelleme bölümünde uygulamanızın içeriğini ve öğelerini güncel tutmak için farklı teknikleri öğreneceksiniz.