Service Worker'lar, web sitelerinin çevrimdışı çalışmasına ve kendileri için özel önbelleğe alma kuralları oluşturmasına olanak tanıyan güçlü bir araçtır. Hizmet çalışanı fetch işleyicisi, kontrol ettiği sayfadan gelen her isteği görür ve hizmet çalışanı önbelleğinden yanıt sunmak isteyip istemediğine karar verebilir, hatta URL'yi tamamen farklı bir yanıt getirecek şekilde (örneğin, yerel kullanıcı tercihlerine göre) yeniden yazabilir.
Bununla birlikte, bir sayfa bir süre ilk kez yüklendiğinde ve kontrol eden hizmet çalışanı çalışmadığında hizmet çalışanları için performans maliyeti olabilir. Tüm getirme işlemlerinin Service Worker aracılığıyla yapılması gerektiğinden, tarayıcının hangi içeriğin yükleneceğini öğrenmek için hizmet çalışanının başlatılmasını ve çalışmasını beklemesi gerekir. Bu başlangıç maliyeti, önbelleğe alma stratejileri aracılığıyla performansı iyileştirmek amacıyla Service Worker'lar kullanan geliştiriciler için küçük ama önemli olabilir.
Gezinme önceden yüklemesi, sorunu çözmeye yönelik bir yaklaşımdır. Gezinme isteklerinin, hizmet çalışanı başlatmaya paralel olarak ağ üzerinden yapılmasına izin verilir. Ancak ilk navigasyon istekleriyle sınırlıdır ve yine de hizmet çalışanını kritik yola dahil eder. Navigasyon ön yüklemesi kullanıma sunulduğundan beri, bazı isteklerin hizmet çalışanı başlangıcında engellenmemesini sağlayan yöntemler de dahil olmak üzere sorun alanına daha genel bir çözüm geliştirmek için birçok çalışma yapılmıştır.
Hizmet Çalışanı Statik Yönlendirme API'si
Chrome 116'dan itibaren deneysel Hizmet Çalışanı Statik Yönlendirme API'si, bu tür bir çözümün ilk adımını test etmek için kullanılabilir. Bir Service Worker yüklendiğinde, belirli kaynak yollarının nasıl getirilmesi gerektiğini bildirimli olarak belirtmek için Service Worker Static Yönlendirme API'sini kullanabilir.
API'nin ilk sürümünde yollar hizmet çalışanından değil, her zaman ağdan sunulacak şekilde tanımlanabilir. Kontrollü bir URL daha sonra yüklendiğinde, hizmet çalışanı çalışmayı bitirmeden önce tarayıcı bu yollardaki kaynakları getirmeye başlayabilir. Bu işlem Service Worker'ı, Service Worker'a ihtiyaç duymadığını bildiğiniz yollardan kaldırır.
Hizmet çalışanı, API'yi kullanmak için install etkinliğinde bir dizi kuralla event.registerRouter özelliğini çağırır:
self.addEventListener('install', event => {
if (event.registerRouter) {
// Go straight to the network and bypass invoking "fetch" handlers for all
// same-origin URLs that start with '/form/'.
event.registerRouter([{
condition: {
urlPattern: {pathname: '/form/*'},
},
source: 'network',
}]);
}
});
Her kuralın genellikle iki özelliği vardır:
condition: Kaynak yollarını eşleştirmek için URL Pattern API'yi kullanarak kuralın ne zaman uygulanacağını belirtir. Özellik, birURLPatternörneğini veyaURLPatternoluşturucuya geçirilmesiyle uyumlu olan eşdeğer düz nesneyi (örneğin,new URLPattern({pathname: '*.jpg'})veya sadece{pathname: '*.jpg'}) alabilir.URL Kalıplarının esnekliği, kuralın bir yol altındaki herhangi bir kaynak gibi basit bir öğeyi çok özel ve ayrıntılı koşullarla eşleştirebileceği anlamına gelir. Kalıplar, popüler yönlendirme kitaplıklarının kullanıcılarına genellikle tanıdık gelmelidir.
source:conditionile eşleşen kaynakların nasıl yükleneceğini belirtir. Şu anda yalnızca'network'değeri desteklenmektedir (kaynağı doğrudan ağ üzerinden yüklemek için hizmet çalışanı atlanır) ancak gelecekte bunu diğer değerleri içerecek şekilde genişletmeyi planlıyoruz.
Kullanım alanları
Açıklandığı gibi, API'nin ilk sürümü temelde bazı yollar için Service Worker kontrolünden gelen bir kaçış yoludur. Bunun ne için mantıklı olacağı, hizmet çalışanınızı nasıl kullandığınıza ve kullanıcıların sitenizden nasıl geçtiğine bağlıdır.
Örneğin, sitenizde önbellek öncelikli strateji (ağa geri dönme) kullanılıyorsa çok nadir ziyaret edilen bazı içerikler vardır ve önbelleğe ulaşmanın neredeyse hiç değeri yoktur (arşivlenmiş içerik veya RSS özet akışları gibi). Bu yolların ağdan getirilmesini sağlamak için yalnızca Service Worker'da ayarlanabilir ancak bu isteklerin nasıl ele alınacağını belirlemek için Service Worker'ın başlaması ve çalışması gerekir.
Buna karşın statik yönlendirme API'si, birkaç bildirim temelli satırla Service Worker'ı tamamen atlar:
self.addEventListener('install', event => {
if (event.registerRouter) {
event.registerRouter([{
condition: {
urlPattern: {pathname: '/feeds/*.xml'},
},
source: 'network',
}, {
condition: {
urlPattern: {pathname: '/archives/*'},
},
source: 'network',
}]);
}
});
Service Worker Static Yönlendirme API'si geliştikçe, bu yapılandırmanın daha esnek olmasını ve bildirimli şekilde ağ getirme ve hizmet çalışanı başlatma gibi daha fazla senaryoyu desteklemeyi planlıyoruz. Daha fazla bilgi için özellik açıklayıcıda API'nin potansiyel bir "nihai biçimi" keşfine bakın.
Hizmet Çalışanı Statik Yönlendirme API'sini deneme
Service Worker Static Yönlendirme API'si, kaynak denemesinin 116 sürümünden itibaren Chrome'da kullanılabilir. Bu API, geliştiricilerin etkisi ölçmek için sitelerindeki API'yi gerçek kullanıcılarla test etmesine olanak tanır. Kaynak denemeleriyle ilgili arka plan bilgileri için "Kaynak denemelerini kullanmaya başlama" bölümüne bakın.
Hizmet Çalışanı Statik Yönlendirme API'si, yerel test için chrome://flags/#service-worker-static-router adresinde bir işaretle veya --enable-features=ServiceWorkerStaticRouter gibi bir komutla Chrome çalıştırılarak etkinleştirilebilir.
Geri bildirim ve gelecekteki talimatlar
Service Worker Static Yönlendirme API'si aktif olarak geliştiriliyor ve şekillendiriliyor. İşinize yarayabilecek gibi görünüyorsa lütfen kaynak denemesi ile deneyip API, uygulama ve kullanılabilir işlevler hakkında geri bildirim sağlayın.