Bazı HTTP istekleri şunları içerir: Range: başlık, tam kaynağın yalnızca bir kısmının döndürülmesi gerektiğini belirtir. Uzak dosyanın tamamını bir kerede istemek yerine, daha küçük ortam parçalarının isteğe bağlı olarak yüklenmesine izin vermek için ses veya video içeriği akışı için yaygın olarak kullanılırlar.
A hizmet çalışanı web uygulamanız ile ağ arasında yer alan, potansiyel olarak giden ağ isteklerini yakalayan ve bunlar için yanıtlar oluşturan JavaScript kodudur.
Tarihsel olarak, menzil talepleri ve servis çalışanları birlikte iyi oynamadı. Servis çalışanınızda kötü sonuçlarla karşılaşmamak için özel adımlar atmak gerekli olmuştur. Neyse ki, bu değişmeye başlıyor. Doğru davranışı sergileyen tarayıcılarda, aralık istekleri bir hizmet çalışanından geçerken “yalnızca çalışır”.
Sorun nedir? #
Aşağıdaki özelliklere sahip bir servis çalışanı düşünün fetch gelen her isteği alan ve ağa ileten olay dinleyicisi:
self.addEventListener('fetch', (event) => {
// The Range: header will not pass through in
// browsers that behave incorrectly.
event.respondWith(fetch(event.request));
});
Yanlış davranışa sahip tarayıcılarda, eğer event.request dahil bir Range: başlık, bu başlık sessizce bırakılacaktır. Uzak sunucu tarafından alınan istek şunları içermez: Range: hiç. Bu, herhangi bir şeyi “kırmak” zorunda değildir, çünkü bir sunucu teknik olarak ile tam yanıt gövdesini döndürmesine izin verilir. 200 durum kodune zaman bir Range: Başlık orijinal istekte mevcut. Ancak bu, tarayıcı açısından kesinlikle gerekenden daha fazla verinin aktarılmasına neden olur.
Bu davranışın farkında olan geliştiriciler, bir davranışın varlığını açık bir şekilde kontrol ederek sorunu çözebilir. Range: başlık ve arama değil event.respondWith() eğer biri mevcutsa. Bunu yaparak, hizmet çalışanı kendisini yanıt oluşturma resminden etkili bir şekilde kaldırır ve bunun yerine aralık isteklerini nasıl koruyacağını bilen varsayılan tarayıcı ağ mantığı kullanılır.
self.addEventListener('fetch', (event) => {
// Return without calling event.respondWith()
// if this is a range request.
if (event.request.headers.has('range')) {
return;
}event.respondWith(fetch(event.request));
});
Yine de çoğu geliştiricinin bunu yapma ihtiyacının farkında olmadığını söylemek güvenlidir. Ve net değildi Neden bu gerekli olmalı. Sonuçta, bu sınırlama nedeniyle oldu tarayıcılar yetişmek gerek temel spesifikasyondaki değişikliklerbu işlevsellik için destek ekledi.
Neler düzeltildi? #
Doğru davranan tarayıcılar, Range: başlık ne zaman event.request geçirilir fetch(). Bu, ilk örneğimdeki hizmet çalışanı kodunun uzak sunucunun Range: başlık, tarayıcı tarafından ayarlandıysa:
self.addEventListener('fetch', (event) => {
// The Range: header will pass through in browsers
// that behave correctly.
event.respondWith(fetch(event.request));
});
Sunucu artık aralık isteğini düzgün bir şekilde işleme ve kısmi bir yanıt döndürme şansı elde eder. 206 durum kodu.
Hangi tarayıcılar doğru davranıyor? #
Safari’nin son sürümleri şu özelliklere sahiptir: doğru işlevsellik. Başlangıç olarak Chrome ve Edge sürüm 87doğru davranın.
Ekim 2020 itibarıyla Firefox bu davranışı henüz düzeltmedi, bu nedenle hizmet çalışanınızın kodunu üretime dağıtırken yine de hesaba katmanız gerekebilir.
“Aralık başlığını ağ isteğine dahil et” satırının kontrol edilmesi Web Platformu Testleri panosu belirli bir tarayıcının bu davranışı düzeltip düzeltmediğini doğrulamanın en iyi yoludur.
Önbellekten aralık istekleri sunmaya ne dersiniz? #
Hizmet çalışanları, bir isteği ağa iletmekten çok daha fazlasını yapabilir. Yaygın bir kullanım durumu, ses ve video dosyaları gibi kaynakları bir yerel önbellek. Bir hizmet çalışanı daha sonra, ağı tamamen atlayarak bu önbellekten gelen istekleri karşılayabilir.
Firefox da dahil olmak üzere tüm tarayıcılar, bir istek içindeki bir isteği incelemeyi destekler. fetch işleyici, varlığını kontrol ederek Range: başlık ve ardından isteği yerel olarak bir 206 cevap bu bir önbellekten gelir. Doğru şekilde ayrıştırmak için hizmet çalışanı kodu Range: başlık ve tam önbelleğe alınmış yanıtın yalnızca uygun bölümünü döndürmek, yine de önemsiz değildir.
Neyse ki, yardım isteyen geliştiriciler çalışma kutusu, yaygın hizmet çalışanı kullanım durumlarını basitleştiren bir dizi kitaplıktır. bu workbox-range-request module kısmi yanıtları doğrudan önbellekten sunmak için gerekli tüm mantığı uygular. Bu kullanım durumu için tam bir tarif bulunabilir Workbox belgelerinde.
Bu gönderideki kahraman resmi, Natalie Rhea Riggs Unsplash’ta.