Menggunakan Service Worker Static Routing API untuk melewati pekerja layanan untuk jalur tertentu

Rachel Andrew

Mulai Chrome 123, Service Worker Static Routing API tersedia. Dengan API ini, Anda dapat menyatakan secara deklaratif cara jalur resource tertentu harus diambil, yang berarti browser tidak perlu menjalankan service worker hanya untuk mengambil respons dari cache, atau langsung dari jaringan. API ini telah berada dalam uji coba origin sejak Chrome 116, dan postingan ini menjelaskan peluncuran API di Chrome 123.

Catatan: Lihat postingan asli, Uji Coba Asal Service Worker Static Routing API untuk mengetahui latar belakang fitur ini.

Menggunakan API

Untuk menggunakan panggilan API event.addRoutes pada peristiwa install pekerja layanan. Teruskan metode ini ke daftar rute, dengan properti berikut:

condition

Menentukan kapan aturan berlaku. Menerima properti berikut:

• urlPattern: Instance URLPattern, atau string yang merepresentasikan URLPattern yang valid, yang dapat diteruskan ke konstruktor URLPattern.
• requestMethod: String yang berisi metode Permintaan.
• requestMode: String yang berisi mode Permintaan.
• requestDestination: String yang berisi tujuan Permintaan.
• runningStatus: string, "running" atau "not-running". Ini menunjukkan status berjalan service worker.

source

Menentukan cara resource yang cocok dengan condition dimuat. Salah satu string berikut:

• "network"
• "cache"
• "fetch-event"
• "race-network-and-fetch-handler"

Catatan: source dapat secara opsional menyertakan nama cache, lihat contohnya di bagian selanjutnya dalam postingan ini.

Dalam contoh berikut, URL yang diawali dengan "/articles" akan dirutekan ke pekerja layanan jika sedang berjalan. Jika ada beberapa kondisi, misalnya urlPattern dan runningStatus, semua kondisi harus dipenuhi agar rute dapat digunakan.

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

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

Dalam contoh berikut, postingan ke formulir dikirim langsung ke jaringan dan melewati pekerja layanan.

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

Dalam contoh berikut, penyimpanan cache bernama "pictures" digunakan untuk mengambil file dengan ekstensi file .png atau .jpg.

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

Perubahan dari uji coba origin

Uji coba origin asli menggunakan InstallEvent.registerRouter(), bukan InstallEvent.addRoutes(), metode registerRouter() hanya dapat dipanggil satu kali. Perubahan ini didasarkan pada masukan komunitas untuk uji coba origin.

Catatan: Jika Anda memiliki kode yang menggunakan metode registerRouter() yang tidak digunakan lagi, Anda harus bermigrasi ke addRoutes(). Kami berencana menghapus registerRouter() di Chrome 125.

API baru ini juga memanfaatkan perubahan pada URLPattern yang diperkenalkan di Chrome 121, menambahkan kemampuan untuk menentukan metode, mode, dan tujuan permintaan, serta menambahkan opsi sumber tambahan.

Dukungan di Chrome DevTools

Aturan router terdaftar ditampilkan di Tab Service Worker pada panel Application.

Di Panel Network, jika permintaan cocok dengan aturan yang terdaftar, hal ini ditunjukkan di kolom ukuran. Saat mengarahkan pointer ke kolom ukuran, ID router terdaftar akan ditampilkan. Aturan yang sesuai akan ditampilkan di tab aplikasi.