Berkenalan dengan Service Worker
Gambaran umum tentang Service Worker
Browser vendor seperti Chrome, Mozilla, Edge telah mengimplementasi service worker, dan disusul oleh Safari yang sedang dalam tahap development. Mungkin sebagian dari pembaca bertanya-tanya, “Ada apa dengan service worker? Apa kegunaannya?”
Awalnya
Pada dasarnya fitur Service Worker diajukan dan dibuat untuk memberi offline experience yang lebih baik untuk aplikasi web. Tentu sebagian besar dari kita familiar dengan gambar ini:
Menggunakan browser Chrome dengan kondisi jaringan internet offline, Kita akan menjumpai Dinosaurus ini ketika mencoba mengunjungi suatu halaman web. Atau yang lebih parah ketika jaringan internet sedang sangat lemah, maka Kita akan menunggu sangat lama untuk halaman web menampilkan response.
Di saat inilah kemampuan service worker bersinar.
Service Worker Sebagai Proxy
Agar lebih mudah dipahami, maksud proxy ialah Service Worker bertindak sebagai perantara browser dan jaringan internet. Sebelum “berjalan” di jaringan internet, request terlebih dahulu akan “berjalan” melalui Service Worker. Pada kondisi ini, kita sebagai web developer dapat mengambil kontrol penuh atas request. Begitu pula sebaliknya, ketika response datang dari jaringan, response tersebut akan melalui Service Worker terlebih dahulu sebelum ke browser.
Kita dapat melakukan sesuatu dengan response yang datang. Karena kemampan kontrol terhadap request dan response yang seperti ini, maka syarat untuk dapat menggunakan Service Worker adalah aplikasi web harus menggunakan https agar lebih aman.
Ada beberapa hal yang perlu diketahui:
- Service Worker harus di daftarkan. Tidak ada Service Worker sampai Kita mendaftarkannya.
- Eksekusi script service worker berjalan di background, tidak seperti script javascript biasanya.
- Kita tidak dapat mengakses DOM. Script Service Worker ini akan dieksekusi ketika dibutuhkan, bahkan ketika browser telah ditutup. Namun kita dapat meng-import script eksternal seperti polyfill dan lain-nya.
Kemampuan Service Worker
Intercept Request dan Response
Seperti yang telah dijelaskan sebelumnya, Kita dapat melakukan sesuatu terhadap request dan response yang lewat melalui Service Worker. Untuk menjelaskan hal ini, mari kita buat suatu skenario.
Katakanlah Kita ingin mengakses suatu halaman dari sebuah website. Ketika awal request, koneksi internet tersedia dengan baik. Setelah response datang dari server, pada praktik umumnya, kita akan melakukan cache terhadap response dari request tersebut menggunakan Cache Storage. Untuk melihat praktik yang lainnya, bisa dilihat di sini.
Kemudian Kita ingin kembali mengakses halaman tadi. Di sini kita bisa mengecek apakah response dari request tersebut telah kita cache atau belum. Jika sudah, maka kita dapat mengembalikan response yang sudah di cache ketimbang harus menuju ke jaringan untuk mendapatkan response lagi dari server.
Push Notification
Karena service worker dapat berjalan walaupun window browser ditutup sekali pun, kamu bisa memunculkan notifikasi melalui Service Worker. Tentunya Kita dapat meningkatkan engage terhadap user web kita dengan fitur ini.
Background Sync
Ketika tanpa koneksi internet, kita dapat memberi tahu Service Worker untuk melakukan request. Service Worker akan men-defer request ini, kemudian melanjutkan request tersebut ke jaringan ketika koneksi internet kembali.
Penutup
Telah banyak kisah sukses seperti Twitter, Wego, Flipkart, Housing, Lyft dan lain-nya dalam menggunakan Service Worker.
Walaupun telah diimplementasi oleh berbagai vendor browser, fitur Service Worker ini masih dalam tahap draft dan akan mengalami perubahan di masa mendatang. Namun sebagai developer, tentu tidak ada salah-nya kita mengetahui dan mencoba untuk mengimplementasi-nya pada aplikasi web Kita kemudian memberi feedback kepada tim Service Worker.
Akhirnya, jika pembaca ingin belajar membuat aplikasi web dengan offline-first experience yang baik, silahkan menuju tutorial yang dibuat oleh mas Putu Alfred Crosby di sini.
Bila ada yang salah atau ingin memberi masukkan, mohon beri di kolom komentar :)
