Pekerja layanan adalah alat canggih untuk memungkinkan situs berfungsi secara offline, dan membuat aturan caching khusus untuk dirinya sendiri. Pengendali fetch pekerja layanan melihat setiap permintaan dari halaman yang dikontrolnya, dan dapat memutuskan apakah ingin menampilkan respons dari cache pekerja layanan, atau bahkan menulis ulang URL untuk mengambil respons yang berbeda sepenuhnya—misalnya, berdasarkan preferensi pengguna lokal.
Namun, mungkin ada biaya performa pada pekerja layanan saat halaman dimuat untuk pertama kalinya dalam beberapa waktu dan pekerja layanan yang mengontrol saat ini tidak berjalan. Karena semua pengambilan harus dilakukan melalui pekerja layanan, browser harus menunggu pekerja layanan dimulai dan dijalankan untuk mengetahui konten apa yang akan dimuat. Biaya startup ini bisa kecil, tetapi signifikan, bagi developer yang menggunakan pekerja layanan untuk meningkatkan performa melalui strategi caching.
Pramuat navigasi adalah salah satu pendekatan untuk memecahkan masalah—yang memungkinkan permintaan navigasi dibuat melalui jaringan secara paralel dengan startup pekerja layanan—tetapi ini terbatas pada permintaan navigasi awal dan masih menyertakan pekerja layanan di jalur kritis. Sejak pramuat navigasi diluncurkan, ada beberapa upaya untuk mengembangkan solusi yang lebih umum untuk ruang masalah, termasuk cara agar beberapa permintaan tidak diblokir sama sekali saat startup pekerja layanan.
Service Worker Static Routing API
Mulai Chrome 116, Service Worker Static Routing API eksperimental tersedia untuk menguji langkah pertama ke solusi tersebut. Saat diinstal, pekerja layanan dapat menggunakan Service Worker Static Routing API untuk menyatakan secara deklaratif cara mengambil jalur resource tertentu.
Pada versi awal API, jalur dapat dideklarasikan agar selalu ditayangkan dari jaringan, bukan pekerja layanan. Ketika URL yang dikontrol kemudian dimuat, browser dapat mulai mengambil resource dari jalur tersebut sebelum pekerja layanan selesai dimulai. Tindakan ini akan menghapus pekerja layanan dari jalur yang Anda tahu tidak memerlukan pekerja layanan.
Untuk menggunakan API, pekerja layanan memanggil event.registerRouter pada peristiwa install dengan sekumpulan aturan:
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',
}]);
}
});
Setiap aturan umumnya memiliki dua properti:
condition: menentukan kapan aturan diterapkan menggunakan URL Pattern API untuk mencocokkan jalur resource. Properti ini dapat mengambil instanceURLPattern, atau objek biasa yang setara yang kompatibel untuk diteruskan ke konstruktorURLPattern(misalnya,new URLPattern({pathname: '*.jpg'})atau hanya{pathname: '*.jpg'}).Fleksibilitas Pola URL berarti aturan dapat mencocokkan sesuatu yang sederhana seperti resource apa pun dalam jalur, hingga kondisi yang sangat spesifik dan mendetail. Pola ini biasanya tidak asing bagi pengguna library perutean populer.
source: menentukan cara resource yang cocok denganconditionakan dimuat. Saat ini, hanya nilai'network'yang didukung (dengan mengabaikan pekerja layanan untuk memuat resource melalui jaringan secara langsung), tetapi rencananya adalah memperluas ini ke nilai lain di masa mendatang.
Kasus penggunaan
Seperti yang dijelaskan, versi awal API pada dasarnya merupakan jalan keluar dari kontrol pekerja layanan untuk beberapa jalur. Penggunaan yang lebih logis akan bergantung pada cara Anda menggunakan pekerja layanan dan cara pengguna melewati situs Anda.
Salah satu contohnya adalah jika situs Anda menggunakan strategi cache-first (kembali ke jaringan), tetapi ada beberapa konten yang sangat jarang dikunjungi sehingga sangat sedikit atau tidak ada nilai di dalamnya yang pernah mengenai cache (seperti konten yang diarsipkan atau feed RSS). Membatasi jalur ini agar diambil dari jaringan hanya dapat disiapkan di pekerja layanan, tetapi pekerja layanan tetap harus memulai dan menjalankan untuk memutuskan cara menangani permintaan tersebut.
Sebaliknya, API pemilihan rute statis mengabaikan pekerja layanan sepenuhnya dengan beberapa baris deklaratif:
self.addEventListener('install', event => {
if (event.registerRouter) {
event.registerRouter([{
condition: {
urlPattern: {pathname: '/feeds/*.xml'},
},
source: 'network',
}, {
condition: {
urlPattern: {pathname: '/archives/*'},
},
source: 'network',
}]);
}
});
Seiring berkembangnya Service Worker Static Routing API, konfigurasi ini diterapkan agar menjadi lebih fleksibel dan mendukung lebih banyak skenario, seperti memproses pengambilan jaringan secara deklaratif dan startup pekerja layanan. Lihat eksplorasi penjelasan spesifikasi tentang potensi "bentuk final" API untuk detail selengkapnya.
Mencoba Service Worker Static Routing API
Service Worker Static Routing API tersedia di Chrome mulai versi 116 setelah uji coba origin, yang memungkinkan developer menguji API di situs mereka dengan pengguna sungguhan untuk mengukur dampaknya. Lihat "Memulai uji coba origin" untuk mengetahui informasi latar belakang tentang uji coba origin.
Untuk pengujian lokal, Service Worker Static Routing API dapat diaktifkan dengan flag di chrome://flags/#service-worker-static-router, atau dengan menjalankan Chrome dari perintah seperti dengan --enable-features=ServiceWorkerStaticRouter.
Masukan dan arahan pada masa mendatang
Service Worker Static Routing API secara aktif dikembangkan dan masih dibentuk. Jika sepertinya berguna bagi Anda, silakan mencobanya melalui uji coba origin dan berikan masukan tentang API, implementasi, dan fungsi yang tersedia.