Pernahkah Anda bertanya-tanya bagaimana beberapa situs web tampaknya tetap berfungsi bahkan ketika Anda sedang offline? Rahasianya sederhana: situs web ini memiliki pekerja layanan.
Pekerja layanan adalah teknologi utama di balik banyak fitur asli seperti aplikasi web modern.
Apa itu Service Worker?
Pekerja layanan adalah jenis khusus dari Pekerja web JavaScript. Service worker adalah file JavaScript yang berfungsi sedikit seperti server proxy. Ini menangkap permintaan jaringan keluar dari aplikasi Anda, memungkinkan Anda membuat respons khusus. Anda mungkin, misalnya, menyajikan file yang di-cache kepada pengguna saat mereka offline.
Pekerja layanan juga memungkinkan Anda menambahkan fitur seperti sinkronisasi latar belakang ke aplikasi web Anda.
Mengapa Pekerja Layanan?
Pengembang web telah mencoba untuk memperluas kemampuan aplikasi mereka untuk waktu yang lama. Sebelum pekerja layanan datang, Anda dapat menggunakan berbagai solusi untuk memungkinkan hal ini. Yang paling menonjol adalah AppCache, yang membuat sumber daya caching menjadi nyaman. Sayangnya, itu memiliki masalah yang menjadikannya solusi yang tidak praktis untuk sebagian besar aplikasi.
AppCache tampaknya merupakan ide yang bagus karena memungkinkan Anda menentukan aset untuk di-cache dengan sangat mudah. Namun, itu membuat banyak asumsi tentang apa yang Anda coba lakukan dan kemudian rusak parah ketika aplikasi Anda tidak mengikuti asumsi tersebut dengan tepat. Baca karya Jake Archibald (sayangnya judulnya tapi ditulis dengan baik) Cache Aplikasi adalah Douchebag untuk lebih jelasnya. (Sumber: MDN)
Pekerja layanan adalah upaya saat ini untuk mengurangi keterbatasan aplikasi web, tanpa kekurangan teknologi seperti AppCache.
Kasus Penggunaan untuk Service Worker
Jadi, apa sebenarnya yang diizinkan oleh pekerja layanan Anda? Pekerja layanan memungkinkan Anda menambahkan fitur yang merupakan karakteristik aplikasi asli ke aplikasi web Anda. Mereka juga dapat memberikan pengalaman normal pada perangkat yang tidak mendukung pekerja layanan. Aplikasi seperti ini terkadang disebut Aplikasi Web Progresif (PWA).
Berikut adalah beberapa fitur yang dimungkinkan oleh pekerja layanan:
- Membiarkan pengguna tetap menggunakan aplikasi (atau setidaknya sebagian) saat mereka tidak lagi terhubung ke internet. Pekerja layanan mencapai ini dengan menyajikan aset yang di-cache sebagai tanggapan atas permintaan.
- Di browser berbasis Chromium, pekerja layanan adalah salah satu persyaratan agar aplikasi web dapat diinstal.
- Pekerja layanan diperlukan agar aplikasi web Anda dapat menerapkan pemberitahuan push.
Siklus Hidup Service Worker
Pekerja layanan dapat mengontrol permintaan untuk seluruh situs, atau hanya sebagian halaman situs. Halaman web tertentu hanya dapat memiliki satu pekerja layanan aktif, dan semua pekerja layanan memiliki siklus hidup berbasis peristiwa. Siklus hidup pekerja layanan umumnya terlihat seperti ini:
- Pendaftaran dan pengunduhan pekerja. Kehidupan service worker dimulai saat file JavaScript mendaftarkannya. Jika pendaftaran berhasil, pekerja layanan mengunduh, dan kemudian mulai berjalan di dalam utas khusus.
- Saat halaman yang dikontrol oleh service worker dimuat, service worker menerima event 'install'. Ini selalu merupakan peristiwa pertama yang diterima pekerja layanan, dan Anda dapat menyiapkan pendengar untuk peristiwa ini di dalam pekerja. Acara 'instal' umumnya digunakan untuk mengambil dan/atau menyimpan sumber daya apa pun yang dibutuhkan pekerja layanan.
- Setelah pekerja layanan selesai menginstal, ia menerima acara 'aktifkan'. Peristiwa ini memungkinkan pekerja untuk membersihkan sumber daya yang berlebihan yang digunakan oleh pekerja layanan sebelumnya. Jika Anda memperbarui pekerja layanan, acara aktivasi hanya akan diaktifkan saat aman untuk melakukan ini. Ini sekali tidak ada halaman yang dimuat masih menggunakan versi lama dari pekerja layanan.
- Setelah itu, pekerja layanan memiliki kontrol penuh atas semua halaman yang dimuat setelah berhasil didaftarkan.
- Fase terakhir dari siklus hidup adalah redundansi, yang terjadi ketika pekerja layanan dihapus atau diganti dengan versi yang lebih baru.
Cara Menggunakan Service Worker di JavaScript
API Pekerja Layanan (MDN) menyediakan antarmuka yang memungkinkan Anda membuat dan berinteraksi dengan pekerja layanan di JavaScript.
Pekerja layanan terutama menangani permintaan jaringan dan peristiwa asinkron lainnya. Akibatnya, API pekerja layanan banyak menggunakan Janji dan pemrograman asinkron.
Untuk membuat service worker, hal pertama yang perlu Anda lakukan adalah memanggil navigator.serviceWorker.register() metode. Inilah yang mungkin terlihat seperti:
jika ('layananPekerja' di navigator) {
navigator.serviceWorker.register('/sw.js').lalu(fungsi(Registrasi){
konsol.log('Pendaftaran pekerja layanan berhasil:', Registrasi);
}).catch((kesalahan) => { konsol.log('Pendaftaran pekerja layanan gagal:', kesalahan); });
} kalau tidak {
konsol.log('Pekerja layanan tidak didukung.');
}
Blok if terluar melakukan deteksi fitur. Ini memastikan kode terkait pekerja layanan hanya akan berjalan di browser yang mendukung pekerja layanan.
Selanjutnya, kode memanggil daftar metode. Ini melewati jalur ke pekerja layanan (relatif terhadap asal situs) untuk mendaftar dan mengunduhnya. Itu daftar metode juga menerima parameter opsional yang disebut ruang lingkup, yang dapat digunakan untuk membatasi halaman yang dikendalikan oleh pekerja. Pekerja layanan mengontrol semua halaman aplikasi secara default. Itu daftar metode mengembalikan Janji yang menunjukkan apakah pendaftaran berhasil.
Jika Janji diselesaikan, pekerja layanan berhasil terdaftar. Kode kemudian mencetak objek yang mewakili pekerja layanan terdaftar ke konsol.
Jika proses pendaftaran gagal, kode menangkap kesalahan dan mencatatnya ke konsol.
Selanjutnya, berikut adalah contoh sederhana tentang tampilan pekerja layanan itu sendiri:
self.addEventListener('Install', (peristiwa) => {
acara.tungguSampai(baruJanji((menyelesaikan, menolak) => {
konsol.log("melakukan hal-hal pengaturan")
menyelesaikan()
}))
konsol.log("Pekerja layanan selesai menginstal")
})self.addEventListener('mengaktifkan', (peristiwa) => {
acara.tungguSampai(baruJanji((menyelesaikan, menolak) => {
konsol.log("melakukan pembersihan!")
menyelesaikan()
}))
konsol.log('aktivasi selesai!')
})
self.addEventListener('mengambil', (peristiwa) => {
konsol.log("Permintaan dicegat", peristiwa)
});
Pekerja layanan demo ini memiliki tiga pendengar acara, terdaftar terhadap dirinya sendiri. Ini memiliki satu untuk acara 'instal', acara 'aktifkan', dan acara 'ambil'.
Di dalam dua pendengar pertama, kode menggunakan tunggu sampai metode. Metode ini menerima Janji. Tugasnya adalah memastikan service worker akan menunggu Promise untuk diselesaikan atau ditolak sebelum melanjutkan ke acara berikutnya.
Pemroses pengambilan akan diaktifkan setiap kali permintaan dibuat untuk sumber daya yang dikontrol oleh pekerja layanan.
Sumber daya yang dikontrol oleh pekerja layanan mencakup semua halaman yang dikontrolnya, serta aset apa pun yang dirujuk di halaman tersebut.
Tingkatkan Aplikasi Web Anda Dengan Service Worker
Pekerja layanan adalah jenis pekerja web khusus yang melayani tujuan unik. Mereka duduk di depan permintaan jaringan untuk mengaktifkan fitur seperti akses aplikasi offline. Menggunakan pekerja layanan dalam aplikasi web dapat sangat meningkatkan pengalaman penggunanya. Anda dapat membuat pekerja layanan, dan berinteraksi dengan mereka, menggunakan API pekerja layanan.
