Service worker adalah alat yang canggih untuk memungkinkan situs berfungsi secara offline dan
membuat aturan penyimpanan dalam cache khusus untuk dirinya sendiri. Pengendali fetch pekerja layanan melihat setiap permintaan dari halaman yang dikontrolnya, dan dapat memutuskan apakah ingin meresponsnya dari cache pekerja layanan, atau bahkan menulis ulang URL untuk mengambil respons yang sama sekali berbeda—misalnya, berdasarkan preferensi pengguna lokal.
Namun, mungkin ada biaya performa untuk pekerja layanan saat halaman dimuat untuk pertama kalinya dalam beberapa waktu dan pekerja layanan pengontrol saat ini tidak berjalan. Karena semua pengambilan harus dilakukan melalui pekerja layanan, browser harus menunggu pekerja layanan dimulai dan berjalan untuk mengetahui konten yang akan dimuat. Biaya startup ini dapat kecil, tetapi signifikan, bagi developer yang menggunakan pekerja layanan untuk meningkatkan performa melalui strategi penyimpanan dalam cache.
Preload navigasi adalah salah satu pendekatan untuk menyelesaikan masalah—memungkinkan permintaan navigasi dilakukan melalui jaringan secara paralel dengan startup pekerja layanan—tetapi terbatas pada permintaan navigasi awal dan masih menyertakan pekerja layanan di jalur kritis. Sejak pramuat navigasi diluncurkan, telah ada beberapa upaya untuk mengembangkan solusi yang lebih umum untuk ruang masalah, termasuk cara agar beberapa permintaan tidak diblokir sama sekali saat pekerja layanan dimulai.
Service Worker Static Routing API
Mulai Chrome 116, Service Worker Static Routing API eksperimental tersedia untuk menguji langkah pertama menuju solusi tersebut. Saat diinstal, pekerja layanan dapat menggunakan Service Worker Static Routing API untuk menyatakan secara deklaratif cara pengambilan jalur resource tertentu.
Dalam versi awal API, jalur dapat dideklarasikan agar selalu ditayangkan dari jaringan, bukan pekerja layanan. Saat URL terkontrol dimuat nanti, browser dapat mulai mengambil resource dari jalur tersebut sebelum pekerja layanan selesai dimulai. Tindakan ini akan menghapus pekerja layanan dari jalur yang Anda ketahui tidak memerlukan pekerja layanan.
Untuk menggunakan API, pekerja layanan memanggil event.registerRouter pada peristiwa install
dengan serangkaian 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 berlaku menggunakan URL Pattern API untuk mencocokkan jalur resource. Properti ini dapat menggunakan instanceURLPattern, atau objek biasa yang setara dan kompatibel dengan diteruskan ke konstruktorURLPattern(misalnya,new URLPattern({pathname: '*.jpg'})atau hanya{pathname: '*.jpg'}).Fleksibilitas Pola URL berarti aturan dapat cocok dengan sesuatu yang sederhana seperti resource apa pun di bawah jalur, hingga kondisi yang sangat spesifik dan mendetail. Pola ini umumnya sudah dikenal oleh pengguna library rute populer.
source: menentukan cara resource yang cocok denganconditionakan dimuat. Saat ini, hanya nilai'network'yang didukung (mengabaikan pekerja layanan untuk memuat resource melalui jaringan secara langsung), tetapi rencananya adalah memperluasnya ke nilai lain pada masa mendatang.
Kasus penggunaan
Seperti yang dijelaskan, versi awal API pada dasarnya adalah jalan keluar dari kontrol pekerja layanan untuk beberapa jalur. Tempat yang tepat untuk menggunakannya akan bergantung pada cara Anda menggunakan pekerja layanan dan cara pengguna menjelajahi situs Anda.
Salah satu contohnya adalah jika situs Anda menggunakan strategi cache-terlebih-dahulu (kembali ke jaringan), tetapi ada beberapa konten yang sangat jarang dikunjungi sehingga tidak ada nilai yang berarti dalam konten tersebut yang pernah masuk ke cache (seperti konten yang diarsipkan atau feed RSS). Membatasi jalur ini untuk diambil dari jaringan hanya dapat disiapkan di pekerja layanan, tetapi pekerja layanan masih harus memulai dan berjalan untuk memutuskan cara menangani permintaan tersebut.
Sebaliknya, API pemilihan rute statis sepenuhnya mengabaikan pekerja layanan 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, rencananya konfigurasi ini akan menjadi lebih fleksibel dan mendukung lebih banyak skenario, seperti memicu pengambilan jaringan dan startup pekerja layanan secara deklaratif. Lihat eksplorasi penjelasan spesifikasi tentang potensi "bentuk akhir" API untuk mengetahui detail selengkapnya.
Mencoba Service Worker Static Routing API
Service Worker Static Routing API tersedia di Chrome mulai versi 116 di balik uji coba origin, yang memungkinkan developer menguji API di situs mereka dengan pengguna sungguhan untuk mengukur efeknya. 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
tanda di chrome://flags/#service-worker-static-router, atau dengan menjalankan Chrome
dari perintah seperti dengan --enable-features=ServiceWorkerStaticRouter.
Masukan dan arah mendatang
Service Worker Static Routing API sedang dikembangkan secara aktif dan masih dalam proses pembentukan. Jika tampaknya dapat berguna bagi Anda, harap coba melalui uji coba origin dan berikan masukan tentang API, penerapan, dan fungsi yang tersedia.