Pengguna berharap aplikasi dapat dimulai dengan andal pada koneksi jaringan yang lambat atau tidak stabil, atau bahkan saat offline. Mereka mengharapkan konten yang terakhir mereka gunakan, seperti trek media atau tiket dan itinerari, agar tersedia dan dapat digunakan. Jika permintaan tidak memungkinkan, mereka berharap aplikasi memberi tahu, bukan secara otomatis gagal atau macet. Dan mereka ingin semua ini terjadi dengan cepat. Sebagai Anda dapat melihat dalam waktu Milidetik menghasilkan jutaan, bahkan peningkatan waktu muat 0,1 detik dapat meningkatkan konversi hingga 10%. Pekerja layanan adalah alat yang memungkinkan Progressive Web App (PWA) Anda dapat aktif pengguna Anda ekspektasi perusahaan.
Saat aplikasi meminta resource yang tercakup dalam cakupan pekerja layanan, model pekerja layanan mencegat permintaan dan bertindak sebagai proxy jaringan, meskipun pengguna sedang offline. Kemudian dapat memutuskan apakah harus melayani sumber daya dari menyimpan cache menggunakan Cache Storage API, menayangkannya dari jaringan seolah-olah pekerja layanan aktif, atau membuatnya dari algoritma lokal. Hal ini memungkinkan Anda menyediakan pengalaman berkualitas tinggi seperti aplikasi platform, bahkan ketika aplikasi sedang offline.
Mendaftarkan pekerja layanan
Sebelum pekerja layanan mengambil alih laman Anda, pekerja layanan itu harus didaftarkan untuk PWA Anda. Artinya, saat pertama kali pengguna membuka PWA Anda, semua jaringannya permintaan masuk langsung ke server Anda karena pekerja layanan tidak memiliki mengontrol laman Anda.
Setelah memeriksa apakah browser mendukung Service Worker API, PWA Anda dapat mendaftarkan pekerja layanan. Setelah dimuat, pekerja layanan menyiapkan dirinya sendiri antara PWA dan jaringan, mencegat permintaan dan melayani respons yang sesuai.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Memverifikasi apakah pekerja layanan terdaftar
Untuk memverifikasi apakah pekerja layanan terdaftar, gunakan alat developer di browser favorit Anda.
Di browser berbasis Firefox dan Chromium (Microsoft Edge, Google Chrome, atau Internet Samsung):
- Buka alat developer, lalu klik tab Aplikasi.
- Di panel kiri, pilih Service Workers.
- Periksa apakah URL skrip pekerja layanan muncul dengan status "Diaktifkan". (Untuk mengetahui informasi selengkapnya, lihat Lifecycle). Di Firefox, statusnya dapat berupa "Running" atau "Dihentikan".
Di Safari:
- Klik Develop > Service Worker.
- Periksa menu ini untuk entri dengan asal saat ini. Mengeklik entri tersebut membuka pemeriksa atas konteks pekerja layanan.
Cakupan
Folder tempat pekerja layanan Anda berada menentukan cakupannya. Pekerja layanan
yang ada di example.com/my-pwa/sw.js dapat mengontrol navigasi apa pun pada atau di bawahnya
jalur my-pwa, seperti example.com/my-pwa/demos/. Pekerja layanan dapat
hanya mengontrol item (halaman, pekerja, secara kolektif disebut "klien") dalam cakupannya.
Cakupan ini berlaku untuk tab browser dan jendela PWA.
Hanya satu pekerja layanan yang diizinkan per cakupan. Saat pekerja layanan aktif dan berjalan, hanya satu instance yang biasanya tersedia berapa pun banyaknya klien (jendela PWA atau tab browser) ada dalam memori.
Safari memiliki manajemen ruang lingkup yang lebih kompleks, dikenal sebagai partisi, yang memengaruhi cara cakupan berfungsi dengan iframe lintas domain. Untuk mempelajari selengkapnya tentang {i>WebKit<i} penerapan mereka, lihat postingan blog mereka.
Lifecycle
Pekerja layanan memiliki siklus proses yang menentukan cara penginstalannya secara terpisah dari penginstalan PWA Anda.
Siklus proses pekerja layanan dimulai dengan mendaftarkan pekerja layanan. Tujuan
kemudian browser mencoba mengunduh
dan mengurai file pekerja layanan. Jika mengurai
berhasil, peristiwa install pekerja layanan akan diaktifkan. Peristiwa install
hanya dipicu satu kali.
Penginstalan pekerja layanan terjadi secara diam-diam, tanpa memerlukan izin pengguna, meskipun pengguna tidak menginstal PWA. Service Worker API tersedia bahkan pada platform yang tidak mendukung penginstalan PWA, seperti Safari dan Firefox di perangkat desktop.
Setelah instalasi, pekerja layanan harus diaktifkan sebelum dapat
mengontrol kliennya, termasuk PWA Anda. Ketika pekerja layanan siap untuk
mengontrol kliennya, peristiwa activate diaktifkan. Namun, secara default,
pekerja layanan yang diaktifkan tidak dapat mengelola halaman yang mendaftarkannya hingga halaman berikutnya
Anda membuka halaman tersebut dengan memuat ulang halaman atau membuka kembali PWA.
Anda dapat memproses peristiwa dalam cakupan global pekerja layanan menggunakan self
:
serviceworker.js
// This code executes in its own worker or thread
self.addEventListener("install", event => {
console.log("Service worker installed");
});
self.addEventListener("activate", event => {
console.log("Service worker activated");
});
Mengupdate pekerja layanan
Pekerja layanan diperbarui saat browser mendeteksi bahwa pekerja layanan mengontrol klien dan versi baru file pekerja layanan dari servernya berbeda setiap byte.
Setelah instalasi berhasil, pekerja layanan baru akan menunggu untuk diaktifkan sampai pekerja layanan lama tidak lagi mengontrol klien mana pun. Negara bagian ini disebut "menunggu", dan inilah cara browser memastikan bahwa hanya satu versi pekerja layanan berjalan pada satu waktu.
Memuat ulang halaman atau membuka kembali PWA tidak akan membuat pekerja layanan baru mengambil kontrol. Pengguna harus menutup atau menavigasi keluar dari semua tab dan jendela menggunakan pekerja layanan saat ini dan kemudian menavigasi kembali untuk memberikan pekerja layanan baru kontrol. Untuk informasi selengkapnya, lihat Siklus proses pekerja layanan.
Masa pakai pekerja layanan
Pekerja layanan yang diinstal dan terdaftar dapat mengelola semua permintaan jaringan sesuai dengan cakupannya. Fungsi ini berjalan di threadnya sendiri, dengan aktivasi dan penghentian dikontrol oleh browser, yang memungkinkannya berfungsi bahkan sebelum PWA Anda terbuka atau setelah ditutup. Pekerja layanan berjalan di thread mereka sendiri, tetapi berstatus dalam memori mungkin tidak bertahan di antara operasi pekerja layanan, jadi pastikan apa pun yang ingin digunakan kembali untuk setiap operasi tersedia baik di IndexedDB atau beberapa lainnya dan penyimpanan persisten.
Jika belum berjalan, pekerja layanan akan dimulai setiap kali ada permintaan jaringan dikirim dalam cakupannya, atau saat menerima peristiwa pemicu seperti sinkronisasi di latar belakang atau pesan push.
Pekerja layanan dihentikan jika tidak ada aktivitas selama beberapa detik, atau jika mereka sudah terlalu sibuk. Waktu untuk perubahan ini bervariasi di setiap browser. Jika pekerja layanan telah dihentikan dan sebuah kejadian yang akan menyalakannya, bisa dimulai ulang.
Kemampuan
Pekerja layanan yang terdaftar dan aktif menggunakan thread dengan siklus proses eksekusi dari thread utama PWA Anda. Namun, secara default, file service worker itu sendiri tidak memiliki perilaku. Layanan ini tidak akan meng-cache atau menyajikan resource; inilah yang perlu dilakukan kode Anda. Anda akan mengetahui bagaimana di bab berikutnya.
Kemampuan pekerja layanan tidak hanya untuk proxy atau melayani permintaan HTTP. Fitur lain tersedia di atasnya untuk tujuan lain, seperti latar belakang eksekusi kode, notifikasi push web, dan pembayaran proses. Kita akan membahas tambahan ini dalam Kemampuan.