Pengguna mengharapkan aplikasi dimulai dengan andal pada koneksi jaringan yang lambat atau tidak stabil, atau bahkan offline. Mereka berharap konten yang baru saja mereka gunakan, seperti trek media atau tiket dan rencana perjalanan, tersedia dan dapat digunakan. Jika permintaan tidak dapat dilakukan, mereka berharap aplikasi akan memberi tahu mereka, bukan gagal atau error secara diam-diam. Dan mereka ingin semua ini terjadi dengan cepat. Seperti yang dapat Anda lihat di 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 memenuhi ekspektasi pengguna.
Saat aplikasi meminta resource yang tercakup dalam cakupan pekerja layanan, pekerja layanan akan mencegat permintaan dan bertindak sebagai proxy jaringan, meskipun pengguna sedang offline. Kemudian, browser dapat memutuskan apakah akan menayangkan resource dari cache menggunakan Cache Storage API, menayangkannya dari jaringan seolah-olah tidak ada pekerja layanan aktif, atau membuatnya dari algoritma lokal. Hal ini memungkinkan Anda memberikan pengalaman berkualitas tinggi seperti aplikasi platform, meskipun aplikasi Anda sedang offline.
Mendaftarkan pekerja layanan
Sebelum pekerja layanan mengambil alih halaman Anda, pekerja layanan harus didaftarkan untuk PWA Anda. Artinya, saat pengguna membuka PWA Anda untuk pertama kalinya, semua permintaan jaringannya akan langsung menuju server Anda karena pekerja layanan belum mengontrol halaman Anda.
Setelah memeriksa apakah browser mendukung Service Worker API, PWA Anda dapat mendaftarkan pekerja layanan. Setelah dimuat, pekerja layanan akan menyiapkan dirinya sendiri di antara PWA dan jaringan Anda, mencegat permintaan dan menyajikan respons yang sesuai.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Memverifikasi apakah service worker terdaftar
Untuk memverifikasi apakah pekerja layanan terdaftar, gunakan alat developer di browser favorit Anda.
Di Firefox dan browser berbasis Chromium (Microsoft Edge, Google Chrome, atau Samsung Internet):
- Buka alat developer, lalu klik tab Application.
- Di panel kiri, pilih Service Workers.
- Periksa apakah URL skrip pekerja layanan muncul dengan status "Diaktifkan". (Untuk mengetahui informasi selengkapnya, lihat Siklus proses). Di Firefox, statusnya dapat berupa "Berjalan" atau "Berhenti".
Di Safari:
- Klik Develop > Service Workers.
- Periksa menu ini untuk menemukan entri dengan origin saat ini. Mengklik entri tersebut akan membuka pemeriksa di atas konteks pekerja layanan.
Cakupan
Folder tempat pekerja layanan Anda berada akan menentukan cakupannya. Service worker
yang berada di example.com/my-pwa/sw.js dapat mengontrol navigasi apa pun di atau di bawah
jalur my-pwa, seperti example.com/my-pwa/demos/. Pekerja layanan hanya dapat mengontrol item (halaman, pekerja, secara kolektif "klien") dalam cakupan mereka.
Cakupan ini berlaku untuk tab browser dan jendela PWA.
Hanya satu pekerja layanan yang diizinkan per cakupan. Saat pekerja layanan aktif dan berjalan, biasanya hanya ada satu instance yang tersedia, berapa pun jumlah klien (jendela PWA atau tab browser) yang ada dalam memori.
Safari memiliki pengelolaan cakupan yang lebih kompleks, yang dikenal sebagai partisi, yang memengaruhi cara kerja cakupan dengan iframe lintas domain. Untuk mempelajari lebih lanjut penerapan WebKit, lihat postingan blog mereka.
Lifecycle
Service worker memiliki siklus proses yang menentukan cara penginstalannya, secara terpisah dari penginstalan PWA Anda.
Siklus proses pekerja layanan dimulai dengan mendaftarkan pekerja layanan. Browser kemudian mencoba mendownload dan mengurai file pekerja layanan. Jika parsing berhasil, peristiwa install pekerja layanan akan diaktifkan. Peristiwa install hanya diaktifkan satu kali.
Penginstalan pekerja layanan terjadi secara otomatis, tanpa memerlukan izin pengguna, meskipun pengguna tidak menginstal PWA. Service Worker API tersedia bahkan di platform yang tidak mendukung penginstalan PWA, seperti Safari dan Firefox di perangkat desktop.
Setelah penginstalan, pekerja layanan harus diaktifkan sebelum dapat mengontrol kliennya, termasuk PWA Anda. Saat pekerja layanan siap mengontrol kliennya, peristiwa activate akan diaktifkan. Namun, secara default, pekerja layanan yang diaktifkan tidak dapat mengelola halaman yang mendaftarkannya hingga Anda membuka halaman tersebut lagi dengan memuat ulang halaman atau membuka kembali PWA.
Anda dapat memproses peristiwa dalam cakupan global pekerja layanan menggunakan objek 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
Service worker akan diupdate saat browser mendeteksi bahwa service worker yang mengontrol klien dan versi baru file service worker dari server berbeda byte.
Setelah penginstalan berhasil, pekerja layanan baru menunggu untuk diaktifkan hingga pekerja layanan lama tidak lagi mengontrol klien mana pun. Status ini disebut "menunggu", dan inilah cara browser memastikan bahwa hanya satu versi pekerja layanan Anda yang berjalan dalam satu waktu.
Memuat ulang halaman atau membuka kembali PWA tidak akan membuat pekerja layanan baru mengambil alih. Pengguna harus menutup atau keluar dari semua tab dan jendela yang menggunakan service worker saat ini, lalu kembali untuk memberikan kontrol ke service worker baru. Untuk mengetahui informasi selengkapnya, lihat Siklus proses pekerja layanan.
Masa aktif pekerja layanan
Pekerja layanan yang diinstal dan didaftarkan dapat mengelola semua permintaan jaringan dalam cakupannya. Service worker berjalan di thread-nya sendiri, dengan aktivasi dan penghentian dikontrol oleh browser, yang memungkinkannya berfungsi bahkan sebelum PWA Anda dibuka atau setelah ditutup. Service worker berjalan di thread-nya sendiri, tetapi status dalam memori mungkin tidak tetap di antara eksekusi service worker, jadi pastikan semua yang ingin Anda gunakan kembali untuk setiap eksekusi tersedia di IndexedDB atau penyimpanan persisten lainnya.
Jika belum berjalan, pekerja layanan akan dimulai setiap kali permintaan jaringan dikirim dalam cakupannya, atau saat menerima peristiwa pemicu seperti sinkronisasi latar belakang berkala atau pesan push.
Service worker akan dihentikan jika tidak ada aktivitas selama beberapa detik, atau jika terlalu lama sibuk. Waktu untuk hal ini bervariasi di setiap browser. Jika pekerja layanan telah dihentikan dan terjadi peristiwa yang akan memulainya, pekerja layanan akan dimulai ulang.
Kemampuan
Service worker yang terdaftar dan aktif menggunakan thread dengan siklus proses eksekusi yang sama sekali berbeda dari thread utama PWA Anda. Namun, secara default, file service worker itu sendiri tidak memiliki perilaku. Service worker tidak akan meng-cache atau menayangkan resource apa pun; hal ini harus dilakukan oleh kode Anda. Anda akan mengetahuinya di bab berikutnya.
Kemampuan pekerja layanan tidak hanya untuk proxy atau melayani permintaan HTTP. Fitur lain tersedia di atasnya untuk tujuan lain, seperti eksekusi kode di latar belakang, notifikasi push web, dan pemrosesan pembayaran. Kita akan membahas penambahan ini di Kemampuan.