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

Rachel Andrew

Service Worker Statik Yönlendirme API'si, Chrome 123'ten itibaren kullanılabilir. Bu API, belirli kaynak yollarının nasıl getirileceğini açık bir şekilde belirtmenize olanak tanır. Diğer bir deyişle, tarayıcının yalnızca bir önbellekten veya doğrudan ağdan yanıt almak için bir hizmet çalışanı çalıştırması gerekmez. Bu API, Chrome 116'dan beri kaynak denemesindedir. Bu yayında, API'nin Chrome 123'te kullanıma sunulması ayrıntılı olarak açıklanmaktadır.

API'yi kullanma

Hizmet çalışanı install etkinliğinde event.addRoutes API çağrısını kullanmak için. Bu yönteme aşağıdaki özellikleri içeren bir rota listesi iletin:

condition

Kuralın ne zaman geçerli olacağını belirtir. Aşağıdaki özellikleri kabul eder:

• urlPattern: URLPattern kurucusuna iletilebilecek bir URLPattern örneği veya geçerli bir URLPattern'i temsil eden bir dize.
• requestMethod: İstek yöntemi içeren bir dize.
• requestMode: İstek modu içeren bir dize.
• requestDestination: İstek hedefi içeren bir dize.
• runningStatus: "running" veya "not-running" olan bir dize. 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 işleyiciye yönlendirilir. Birden fazla koşul olduğunda (ör. urlPattern ve runningStatus), 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 hizmet çalışanını atlar.

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

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

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

Kaynak denemesinden itibaren yapılan değişiklikler

Orijinal kaynak denemesinde InstallEvent.addRoutes() yerine InstallEvent.registerRouter() kullanıldıysa registerRouter() yöntemi yalnızca bir kez çağrılabilir. Bu değişiklik, orijinal denemeyle ilgili topluluk geri bildirimlerine dayalı olarak yapıldı.

Yeni API, Chrome 121'de URLPattern için yapılan değişikliklerden de yararlanır. İstekte bulunma yöntemi, modu ve hedefi belirtme özelliğinin yanı sıra ek kaynak seçenekleri de ekler.

Chrome Geliştirici Araçları'nda destek

Kayıtlı yönlendirici kuralları, Uygulama panelinin Hizmet Çalışanı sekmesinde gösterilir.

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