Pengguna berharap aplikasi dapat dimulai dengan andal pada koneksi jaringan yang lambat atau tidak stabil, atau bahkan offline. Mereka berharap agar konten yang terakhir mereka gunakan untuk berinteraksi, seperti trek media atau tiket dan itinerari, akan tersedia dan dapat digunakan. Jika permintaan tidak memungkinkan, pengguna berharap aplikasi memberi tahu mereka, bukan menggagalkan atau mengalami error secara otomatis. Dan mereka ingin semua ini terjadi dengan cepat. Seperti yang dapat Anda lihat dalam Milidetik menghasilkan jutaan, bahkan peningkatan 0,1 detik dalam waktu pemuatan dapat meningkatkan konversi hingga 10%. Pekerja layanan adalah alat yang membuat Progressive Web App (PWA) Anda dapat memenuhi harapan pengguna.
Saat aplikasi meminta resource yang tercakup dalam cakupan pekerja layanan, pekerja layanan akan mencegat permintaan tersebut dan bertindak sebagai proxy jaringan, meskipun pengguna sedang offline. Selanjutnya, aplikasi dapat memutuskan apakah harus menyalurkan resource dari cache menggunakan Cache Storage API, menayangkannya dari jaringan seolah-olah tidak ada pekerja layanan yang aktif, atau membuatnya dari algoritma lokal. Hal ini memungkinkan Anda memberikan pengalaman berkualitas tinggi seperti aplikasi platform, bahkan saat aplikasi 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 ke server Anda karena pekerja layanan belum memiliki kontrol atas 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, untuk menangkap permintaan dan menyalurkan respons yang sesuai.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceworker.js");
}
Memverifikasi apakah pekerja layanan terdaftar
Untuk memverifikasi apakah pekerja layanan terdaftar atau tidak, gunakan alat developer di browser favorit Anda.
Di browser berbasis Firefox dan Chromium (Microsoft Edge, Google Chrome, atau Samsung Internet):
- Buka alat developer, lalu klik tab Aplikasi.
- Di panel kiri, pilih Service Workers.
- Pastikan URL skrip pekerja layanan muncul dengan status "Activated". (Untuk mengetahui informasi selengkapnya, lihat Siklus Proses). Pada Firefox, statusnya dapat berupa "Running" atau "Stopped".
Di Safari:
- Klik Develop > Service Workers.
- Periksa menu ini untuk melihat entri dengan origin saat ini. Mengklik entri tersebut akan membuka pemeriksa atas konteks pekerja layanan.
Cakupan
Folder tempat pekerja layanan Anda berada menentukan cakupannya. Pekerja layanan yang berada di example.com/my-pwa/sw.js dapat mengontrol navigasi apa pun pada atau pada jalur my-pwa, seperti example.com/my-pwa/demos/. Pekerja layanan hanya dapat mengontrol item (halaman, pekerja, secara kolektif "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 jumlah klien (jendela PWA atau tab browser) yang ada dalam memori.
Safari memiliki pengelolaan cakupan yang lebih kompleks, atau dikenal sebagai partisi, yang memengaruhi cara kerja cakupan dengan iframe lintas domain. Untuk mempelajari lebih lanjut tentang implementasi WebKit, lihat postingan blog mereka.
Siklus Proses
Pekerja layanan memiliki siklus proses yang menentukan cara penginstalan, terpisah dari penginstalan PWA Anda.
Siklus hidup pekerja layanan dimulai dengan mendaftarkan pekerja layanan. Browser kemudian mencoba mendownload dan mengurai file pekerja layanan. Jika penguraian
berhasil, peristiwa install pekerja layanan akan diaktifkan. Peristiwa install
hanya diaktifkan satu kali.
Penginstalan pekerja layanan terjadi secara senyap, tanpa memerlukan izin pengguna, meskipun jika 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 saat berikutnya Anda membuka halaman tersebut 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
Pekerja layanan akan diupdate saat browser mendeteksi bahwa pekerja layanan yang mengontrol klien dan versi baru file pekerja layanan dari server berbeda-beda.
Setelah penginstalan berhasil, pekerja layanan baru menunggu diaktifkan hingga pekerja layanan lama tidak lagi mengontrol klien. Status ini disebut "menunggu", dan inilah cara browser memastikan bahwa hanya ada satu versi pekerja layanan yang berjalan pada satu waktu.
Memuat ulang halaman atau membuka kembali PWA tidak akan membuat pekerja layanan baru mengambil kendali. Pengguna harus menutup atau keluar dari semua tab dan jendela menggunakan pekerja layanan saat ini, lalu kembali untuk memberikan kontrol pekerja layanan baru. Untuk informasi selengkapnya, lihat Siklus proses pekerja layanan.
Masa pakai pekerja layanan
Pekerja layanan yang diinstal dan terdaftar dapat mengelola semua permintaan jaringan dalam cakupannya. PWA berjalan di threadnya sendiri, dengan aktivasi dan penghentian yang dikontrol oleh browser, yang memungkinkannya berfungsi bahkan sebelum PWA Anda terbuka atau setelah ditutup. Pekerja layanan berjalan di threadnya sendiri, tetapi status dalam memori mungkin tidak akan dipertahankan di antara pengoperasian pekerja layanan. Jadi, pastikan apa pun yang ingin Anda gunakan kembali untuk setiap pengoperasian 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.
Pekerja layanan akan dihentikan jika tidak ada aktivitas selama beberapa detik, atau jika terlalu lama sibuk. Waktu untuk hal ini bervariasi antar-browser. Jika pekerja layanan telah dihentikan dan peristiwa yang akan memulainya, layanan akan dimulai ulang.
Kapabilitas
Pekerja layanan yang terdaftar dan aktif menggunakan thread dengan siklus proses eksekusi yang benar-benar berbeda dari thread utama PWA Anda. Namun, secara default, file pekerja layanan itu sendiri tidak memiliki perilaku. Alat ini tidak akan menyimpan resource apa pun dalam cache atau menyalurkan resource apa pun; ini adalah hal-hal yang perlu dilakukan kode Anda. Anda akan mengetahui caranya di bab berikut.
Kemampuan pekerja layanan tidak hanya untuk proxy atau melayani permintaan HTTP. Fitur lain tersedia di atasnya untuk tujuan lain, seperti eksekusi kode latar belakang, notifikasi push web, dan proses pembayaran. Kita akan membahas penambahan ini di bagian Kemampuan.