Hizmet Çalışanı Statik Yönlendirme API'si Kaynak Denemesi

Brendan Kenny

Hizmet çalışanları, web sitelerinin çevrimdışı çalışmasını sağlayan ve kendileri için özel önbelleğe alma kuralları oluşturmalarını sağlayan güçlü bir araçtır. Bir hizmet çalışanı fetch işleyicisi, kontrol ettiği bir sayfadan gelen her isteği görür ve bu isteğe hizmet çalışanı önbelleğinden yanıt sunup sunmayacağına karar verebilir. Hatta URL'yi tamamen farklı bir yanıt almak için yeniden yazabilir (ör. yerel kullanıcı tercihlerine göre).

Ancak bir sayfa bir süredir ilk kez yüklendiğinde ve kontrol eden hizmet çalışanı şu anda çalışmıyorsa hizmet çalışanları için performans maliyeti olabilir. Tüm getirme işlemlerinin hizmet çalışanı üzerinden yapılması gerektiğinden, tarayıcının hangi içeriğin yükleneceğini bilmesi 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ı artırmak için hizmet işçilerini kullanan geliştiriciler için küçük ancak önemli olabilir.

Navigasyon ön yükleme, bu sorunu çözmek için kullanılan yaklaşımlardan biridir. Bu yaklaşım, hizmet çalışanının başlatılmasına paralel olarak ağ üzerinden navigasyon isteklerinin yapılmasına olanak tanır. Ancak ilk navigasyon istekleriyle sınırlıdır ve hizmet çalışanını kritik yola dahil etmeye devam eder. Gezinme önyüklemesi kullanıma sunulduktan sonra, bazı isteklerin hizmet çalışanı başlatılırken hiç engellenmemesi de dahil olmak üzere sorun alanına daha genel bir çözüm geliştirmek için çeşitli çalışmalar yapıldı.

Hizmet Çalışanı Statik Yönlendirme API'si

Chrome 116'dan itibaren, deneysel Service Worker Static Routing API, bu tür bir çözümün ilk adımını test etmek için kullanılabilir. Yüklenen bir hizmet çalışanı, belirli kaynak yollarının nasıl getirileceğini açık bir şekilde belirtmek için Hizmet Çalışanı Statik Yönlendirme API'sini kullanabilir.

API'nin ilk sürümünde, yolların her zaman hizmet çalışanından değil ağdan yayınlanacağı beyan edilebilir. Kontrol edilen bir URL daha sonra yüklendiğinde tarayıcı, hizmet işleyicisi başlatılmadan önce bu yollardan kaynak getirmeye başlayabilir. Bu işlem, hizmet çalışanına ihtiyaç duymadığınızı bildiğiniz yollardan hizmet çalışanını kaldırır.

Hizmet çalışanı, API'yi kullanmak için install etkinliğinde bir dizi kuralla event.registerRouter çağrısı yapar:

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 Kalıp API'sini kullanarak kuralın ne zaman geçerli olacağını belirtir. Mülk, bir URLPattern örneği veya URLPattern yapıcısına iletilmeye uygun eşdeğer basit nesneyi alabilir (örneğin, new URLPattern({pathname: '*.jpg'}) veya yalnızca {pathname: '*.jpg'}).

    URL kalıplarının esnekliği, kuralın bir yol altındaki herhangi bir kaynak kadar basit bir öğeyi çok özel ve ayrıntılı koşullarla eşleştirebileceği anlamına gelir. Bu kalıplar, popüler yönlendirme kitaplıklarının kullanıcıları tarafından genellikle bilinir.

  • source: condition ile 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 bu özelliği diğer değerlere de genişletmeyi planlıyoruz.

Kullanım alanları

Açıklandığı gibi, API'nin ilk sürümü temel olarak bazı yollar için hizmet çalışanı kontrolünden kaçış kapısı niteliğindedir. Bu özelliğin kullanılacağı yerler, hizmet işçinizi nasıl kullandığınıza ve kullanıcıların sitenizde nasıl gezindiğine bağlı olacaktır.

Örneğin, sitenizde önce önbelleğe alma stratejisi (ağya geri dönme) kullanılıyorsa ancak çok nadiren ziyaret edilen bazı içerikler varsa (arşivlenmiş içerik veya RSS feed'leri gibi) bu içeriklerin önbelleğe alınmasının çok az veya hiç değeri yoktur. Bu yolların ağdan getirilmesini kısıtlamak yalnızca hizmet çalışanında ayarlanabilir ancak hizmet çalışanının bu isteklerin nasıl işleneceğine karar vermek için başlatılması ve çalıştırılması gerekir.

Statik yönlendirme API'si ise birkaç açıklayıcı satırla hizmet çalışanını 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 Statik Yönlendirme API'si geliştikçe bu yapılandırmanın daha esnek hale gelmesi ve ağ getirme ve hizmet çalışanı başlatma işlemlerini açık bir şekilde yarıştırmak gibi daha fazla senaryoyu desteklemesi planlanmaktadır. Daha fazla bilgi için API'nin olası "nihai biçimi" hakkında spesifikasyon açıklamacısının keşfine göz atın.

Service Worker statik yönlendirme API'sini deneme

Service Worker Static Routing API, 116 sürümünden itibaren Chrome'da bir kaynak denemesi kapsamında kullanılabilir. Bu deneme, geliştiricilerin API'yi sitelerinde gerçek kullanıcılarla test ederek etkisini ölçmelerine olanak tanır. Kaynak denemeleri hakkında arka plan bilgileri için "Kaynak denemelerini kullanmaya başlama" başlıklı makaleyi inceleyin.

Yerel test için Hizmet Çalışanı Statik Yönlendirme API'si, chrome://flags/#service-worker-static-router adresindeki bir işaretle veya --enable-features=ServiceWorkerStaticRouter gibi komut satırından Chrome çalıştırılarak etkinleştirilebilir.

Geri bildirim ve gelecekteki yönler

Hizmet Çalışanı Statik Yönlendirme API'si aktif olarak geliştirilmekte ve şekillendirilmektedir. Bu özellik sizin için yararlı olabilirse lütfen kaynak denemesini kullanarak deneyin ve API, uygulama ve mevcut işlevler hakkında geri bildirimde bulunun.