Belirli yollarda hizmet çalışanını atlamak için Hizmet Çalışanı Statik Yönlendirme API'sini kullanma

Rachel Andrew

Chrome 123'ten itibaren Service Worker Static Routing API kullanılabilir. Bu API, belirli kaynak yollarının nasıl getirilmesi gerektiğini bildirimsel olarak belirtmenize olanak tanır. Bu sayede tarayıcının, yanıtları yalnızca önbellekten veya doğrudan ağdan getirmek için bir hizmet çalışanı çalıştırması gerekmez. Bu API, Chrome 116'dan beri kaynak denemesi aşamasındadır. Bu yayında ise Chrome 123'te kullanıma sunulan API hakkında ayrıntılı bilgi verilmektedir.

API'yi kullanma

API'yi kullanmak için event.addRoutes hizmet çalışanı install etkinliğinde çağrı yapın. Bu yönteme aşağıdaki özelliklere sahip bir rota listesi iletin:

condition
Kuralın ne zaman geçerli olacağını belirtir. Aşağıdaki özellikleri kabul eder:
  • urlPattern: URLPattern oluşturucusuna iletilebilecek bir URLPattern örneği veya geçerli bir URLPattern'i temsil eden dize.
  • requestMethod: Bir İstek yöntemi içeren dize.
  • requestMode: Bir istek modu içeren dize.
  • requestDestination: Bir İstek hedefi içeren dize.
  • runningStatus: "running" veya "not-running" dizesi. Bu, hizmet çalışanının çalışma durumunu gösterir.
source
condition ile eşleşen kaynakların nasıl yükleneceğini belirtir. Aşağıdaki dizelerden biri:
  • "network"
  • "cache"
  • "fetch-event"
  • "race-network-and-fetch-handler"

Aşağıdaki örnekte, "/articles" ile başlayan URL'ler, şu anda çalışıyorsa hizmet çalışanına yönlendirilir. Birden fazla koşul (ör. urlPattern ve runningStatus) olduğunda rotanın kullanılabilmesi için tüm koşulların karşılanması gerekir.

addEventListener('install', (>event) = {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

Aşağıdaki örnekte, bir forma gönderilen yayınlar doğrudan ağa gönderilir ve servis çalışanı atlanır.

addEventListener('install', (>event) = {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

Aşağıdaki örnekte, "pictures" adlı önbellek depolama alanı, .png veya .jpg dosya uzantılı dosyaları getirmek için kullanılır.

addEventListener('install', (>event) = {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});

Kaynak denemesinden yapılan değişiklikler

Orijinal deneme sürümünde InstallEvent.addRoutes() yerine InstallEvent.registerRouter() kullanılıyordu ve registerRouter() yöntemi yalnızca bir kez çağrılabilirdi. Bu değişiklik, kaynak denemesine yönelik topluluk geri bildirimlerine dayanmaktadır.

Yeni API, Chrome 121'de kullanıma sunulan URLPattern ile ilgili değişikliklerden de yararlanır, istek yöntemi, modu ve hedefi belirtme olanağı sunar ve ek kaynak seçenekleri ekler.

Chrome Geliştirici Araçları'nda destek

Kayıtlı yönlendirici kuralları, Uygulama panelinin Service Worker sekmesinde gösterilir.

Uygulama panelinde vurgulanan yönlendirici kuralları.

Ağ panelinde, istek kayıtlı kuralla eşleşiyorsa bu durum boyut sütununda belirtilir. İşaretçi, boyut sütununun üzerine getirildiğinde kayıtlı yönlendirici kimliği gösterilir. İlgili kurallar uygulama sekmesinde gösterilir.

Ağ panelinde gösterilen yönlendirici kimliği.