Yayınlanma tarihi: 6 Ekim 2020
Bazı HTTP istekleri, tam kaynağın yalnızca bir bölümünün döndürülmesi gerektiğini belirten bir Range: üstbilgisi içerir. Genellikle ses veya video içeriklerini yayınlamak için kullanılır. Böylece, uzak dosyanın tamamı tek seferde istenmek yerine, daha küçük medya parçalarının isteğe bağlı olarak yüklenmesine olanak tanınır.
Hizmet çalışanı, web uygulamanız ile ağ arasında yer alan, giden ağ isteklerini yakalayıp bunlar için yanıtlar oluşturabilen JavaScript kodudur.
Geçmişte, aralık istekleri ve hizmet çalışanları birlikte iyi çalışmıyordu. Hizmet çalışanınızda kötü sonuçlar elde etmemek için özel adımlar atmanız gerekiyordu. Neyse ki bu durum değişmeye başladı. Doğru davranışı sergileyen tarayıcılarda, aralık istekleri bir hizmet çalışanından geçerken "yalnızca çalışır".
Sorun nedir?
Gelen her isteği alıp ağa ileten aşağıdaki fetch etkinlik dinleyicisine sahip bir hizmet çalışanı düşünün:
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, event.request bir Range: üst bilgisi içeriyorsa bu üst bilgi sessizce bırakılırdı. Uzak sunucuya alınan istekte Range: hiç yer almaz. Bir sunucunun, orijinal istekte Range: üstbilgisi bulunsa bile 200 durum kodu ile tam yanıt gövdesini döndürmesine teknik olarak izin verildiğinden bu durum herhangi bir şeyi "bozmaz". Ancak bu durumda, tarayıcı açısından kesinlikle gerekenden daha fazla veri aktarılır.
Bu davranışın farkında olan geliştiriciler, Range: üstbilgisinin varlığını açıkça kontrol ederek ve varsa event.respondWith() işlevini çağırmayarak bu sorunu çözebilir. Bunu yaparak hizmet çalışanı kendisini yanıt oluşturma sürecinden etkili bir şekilde çıkarır ve bunun yerine aralık isteklerini nasıl koruyacağını bilen varsayılan tarayıcı ağ oluşturma 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));
});
Ancak çoğu geliştiricinin bunu yapması gerektiğinin farkında olmadığını söyleyebiliriz. Bunun neden gerekli olduğu da net değildi. Bu sınırlama, tarayıcıların bu işlev için destek ekleyen temel spesifikasyondaki değişikliklere ayak uydurması gerektiğinden kaynaklanıyordu.
Düzeltilen sorunlar
Doğru şekilde davranan tarayıcılar, event.request, fetch()'ye iletildiğinde Range: üstbilgisini korur. Bu, ilk örneğimdeki hizmet çalışanı kodunun, tarayıcı tarafından ayarlanmışsa uzak sunucunun Range: üstbilgisini görmesine izin vereceği anlamına gelir:
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 şekilde işleme ve 206 durum kodu ile kısmi bir yanıt döndürme şansına sahip.
Hangi tarayıcılar doğru şekilde çalışır?
Safari'nin son sürümlerinde doğru işlevsellik bulunur. Chrome ve Edge de 87. sürümden itibaren doğru şekilde çalışır.
Ekim 2020 itibarıyla Firefox bu davranışı henüz düzeltmedi. Bu nedenle, hizmet çalışanı kodunuzu üretime dağıtırken bu durumu dikkate almanız gerekebilir.
Belirli bir tarayıcının bu davranışı düzeltip düzeltmediğini onaylamanın en iyi yolu, Web Platform Testleri kontrol panelinin "Ağ isteğine aralık başlığını dahil et" satırını kontrol etmektir.
Önbellekten yayın aralığı istekleri hakkında ne söylenebilir?
Service worker'lar, isteği ağa iletmekten çok daha fazlasını yapabilir. Ses ve video dosyaları gibi kaynakları yerel önbelleğe eklemek yaygın bir kullanım alanıdır. Ardından bir hizmet çalışanı, bu önbellekten gelen istekleri tamamen ağı atlayarak karşılayabilir.
Firefox dahil tüm tarayıcılar, bir fetch işleyicisindeki isteği incelemeyi, Range: başlığının varlığını kontrol etmeyi ve ardından isteği yerel olarak önbellekten gelen bir 206 yanıtıyla karşılamayı destekler. Ancak Range: başlığını düzgün şekilde ayrıştırmak ve tam olarak önbelleğe alınmış yanıtın yalnızca uygun bölümünü döndürmek için kullanılan hizmet çalışanı kodu kolay değildir.
Neyse ki yardıma ihtiyacı olan geliştiriciler, sık kullanılan hizmet çalışanı kullanım alanlarını basitleştiren bir kitaplıklar grubu olan Workbox'ı kullanabilir. workbox-range-request module, kısmi yanıtları doğrudan önbellekten sunmak için gereken tüm mantığı uygular. Bu kullanım alanıyla ilgili tam tarife Workbox belgelerinde bulunabilir.