Pendaftaran Service Worker daripada HTML

Pelayar lama tidak menyokong pekerja perkhidmatan. Sentiasa kesan sokongan ciri dengan "serviceWorker" in navigator sebelum memanggil register; jika tidak, panggilan tersebut akan menghasilkan ralat pada pelayar yang tidak mempunyai API itu. Menambah mekanisme pengganti tidak praktikal — pekerja perkhidmatan tidak boleh dilengkapi dengan mekanisme pengganti kerana memerlukan penyepaduan pada peringkat pelayar.

scope ialah awalan laluan yang dikawal oleh pekerja. Secara lalai, scope ialah direktori bagi fail pekerja: /sw.js mengawal semua URL di bawah /. Untuk mendaftarkan pekerja dengan scope yang lebih dalam daripada lokasi fail yang berbeza, tetapkan pilihan scope dan sediakan pengepala Service-Worker-Allowed.

Letakkan sw.js di akar aplikasi (/sw.js) supaya scope lalainya meliputi seluruh tapak. Laluan yang lebih dalam seperti (/app/sw.js) mengehadkan scope kepada /app/ dan ke bawah, yang jarang menjadi perkara yang dikehendaki.

Gunakan register pekerja selepas halaman dimuatkan untuk mengelakkan persaingan jalur lebar semasa pemaparan kritikal: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Ciri PWA mula berfungsi pada lawatan seterusnya tanpa melambatkan lawatan pertama.

Pelayar menyemak sw.js yang dikemas kini secara automatik, biasanya setiap 24 jam dan pada kebanyakan pemuatan halaman. Jika kandungan fail berubah, pekerja baharu dimuat turun, dipasang dan menunggu dalam keadaan "waiting" sehingga semua tab sedia ada ditutup — kemudian pekerja itu diaktifkan.

registration.update() mencetuskan semakan kemas kini secara manual. self.skipWaiting() dalam sw.js baharu mengaktifkannya serta-merta tanpa menunggu tab ditutup. Gabungkan kedua-duanya untuk tingkah laku "sentiasa jalankan pekerja terkini", dengan kos pengambilan semula data pada pertengahan sesi.

registration.unregister() membuang pekerja tersebut. Ini berguna semasa pembangunan jika pekerja yang bermasalah mengganggu tapak anda. Dalam Chrome DevTools, Application → Service Workers menyediakan butang "Unregister" untuk tujuan yang sama semasa penyahpepijatan.

Mendaftarkan pekerja melalui HTTP, tanpa HTTPS, gagal secara senyap — pekerja perkhidmatan memerlukan asal yang selamat, iaitu HTTPS atau localhost untuk pembangunan. Semak konsol untuk mesej "Ralat sijil SSL telah berlaku" jika pendaftaran tidak berkuat kuasa.

Pekerja tidak mempunyai akses kepada DOM. Untuk menghantar mesej, gunakan navigator.serviceWorker.controller.postMessage() daripada halaman dan self.addEventListener("message", handler) dalam pekerja, dan sebaliknya. Ini berguna untuk pembatalan cache, semakan versi dan peristiwa tersuai.

Pada lawatan pertama, pekerja dipasang dan mula mengawal halaman hanya selepas halaman dimuatkan semula. Untuk mengawal navigasi pertama dengan serta-merta, panggil self.clients.claim() dalam peristiwa pengaktifan — berguna untuk aplikasi yang mengutamakan luar talian.

Daftarkan pekerja perkhidmatan daripada JS halaman menggunakan navigator.serviceWorker.register("/sw.js") selepas mengesan sokongan ciri. Letakkan sw.js di akar aplikasi untuk mendapatkan scope penuh. Lakukan pendaftaran semasa pemuatan untuk mengelakkan persaingan dengan pemaparan kritikal. Kemas kini disemak secara automatik dan berkala; paksa dengan registration.update atau skipWaiting. HTTPS diperlukan untuk menghalang suntikan pekerja berniat jahat.