Pendaftaran Service Worker dari HTML

Pekerja layanan adalah berkas JavaScript yang berjalan di latar belakang, terpisah dari halaman mana pun, dan mencegat permintaan jaringan dalam cakupannya. Pekerja ini menyediakan dukungan luring, notifikasi dorong, sinkronisasi latar belakang, serta pemuatan ulang yang lebih cepat melalui penyimpanan sementara.

Daftarkan pekerja dari skrip halaman: navigator.serviceWorker.register("/sw.js"). Peramban mengambil /sw.js, menguraikannya, menjalankan peristiwa pemasangannya, lalu mulai mencegat permintaan dalam cakupan pendaftaran.

Peramban lama tidak mendukung pekerja layanan. Selalu deteksi fitur dengan "serviceWorker" in navigator sebelum memanggil register; jika tidak, panggilan tersebut menimbulkan kesalahan pada peramban yang tidak memiliki API itu. Penyediaan polifil tidak memungkinkan — pekerja layanan tidak dapat disediakan melalui polifil karena memerlukan integrasi tingkat peramban.

Cakupan adalah awalan jalur yang dikendalikan pekerja. Secara bawaan, cakupan adalah direktori berkas pekerja: /sw.js mengendalikan semua URL di bawah /. Untuk mendaftarkan pekerja dengan cakupan yang lebih dalam dari lokasi berkas yang berbeda, tetapkan opsi cakupan AND sajikan tajuk Service-Worker-Allowed.

Tempatkan sw.js di akar aplikasi (/sw.js) agar cakupan bawaannya mencakup seluruh situs. Jalur yang lebih dalam (/app/sw.js) membatasi cakupan ke /app/ dan turunannya, yang jarang Anda inginkan.

Daftarkan pekerja setelah halaman dimuat agar tidak berebut lebar pita selama proses tampilan penting: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Fitur PWA mulai berfungsi pada kunjungan berikutnya tanpa menunda kunjungan pertama.

Peramban memeriksa sw.js yang diperbarui secara otomatis (biasanya setiap 24 jam dan pada sebagian besar pemuatan halaman). Jika isi berkas berubah, pekerja baru diunduh, dipasang, dan menunggu dalam keadaan "menunggu" sampai semua tab yang ada ditutup — setelah itu pekerja diaktifkan.

registration.update() memicu pemeriksaan pembaruan secara manual. self.skipWaiting() di dalam sw.js yang baru akan segera mengaktifkannya tanpa menunggu tab ditutup. Gabungkan keduanya untuk perilaku "selalu jalankan pekerja terbaru", dengan konsekuensi pengambilan ulang data di tengah sesi.

registration.unregister() menghapus pekerja. Ini berguna selama pengembangan jika pekerja yang bermasalah merusak situs Anda. Di Chrome DevTools, Aplikasi → Pekerja Layanan menyediakan tombol "Batalkan pendaftaran" untuk tujuan yang sama selama proses debug.

Mendaftarkan pekerja melalui HTTP (tanpa HTTPS) gagal secara diam-diam — pekerja layanan memerlukan asal yang aman (HTTPS, atau localhost untuk pengembangan). Periksa konsol untuk pesan "Terjadi kesalahan sertifikat SSL" jika pendaftaran tidak berlaku.

Pekerja tidak memiliki akses DOM. Untuk mengirim pesan, gunakan navigator.serviceWorker.controller.postMessage() dari halaman dan self.addEventListener("message", handler) di pekerja (dan sebaliknya). Ini berguna untuk pembatalan cache, pemeriksaan versi, dan peristiwa khusus.

Pada kunjungan pertama, pekerja dipasang dan mulai mengendalikan halaman hanya setelah halaman dimuat ulang. Untuk segera mengendalikan navigasi pertama, panggil self.clients.claim() dalam peristiwa aktivasi — ini berguna untuk aplikasi yang mengutamakan luring.

Mengapa pekerja layanan harus disajikan melalui HTTPS (atau localhost)?

Daftarkan pekerja layanan dari JS halaman dengan navigator.serviceWorker.register("/sw.js") setelah deteksi fitur. Tempatkan sw.js di akar aplikasi untuk mendapatkan cakupan penuh. Lakukan pendaftaran saat halaman dimuat agar tidak berebut sumber daya dengan proses tampilan penting. Pembaruan diperiksa secara otomatis dan berkala; paksa dengan registration.update atau skipWaiting. HTTPS diperlukan untuk mencegah injeksi pekerja berbahaya.