Mengenal Serice Worker
Service Worker adalah sejenis worker web yang berjalan di latar belakang aplikasi web, terpisah dari thread utama halaman web. Hal ini memungkinkan developer untuk membangun aplikasi web offline, memuat lebih cepat, dan memberikan pengalaman pengguna yang lebih handal. Service Worker kompatibel dengan aplikasi JavaScript vanilla biasa, React, Angular, Svelte, Vue, dan lain-lain.
Kegunaan Service Worker
Caching Konten
Service worker bisa menyimpan konten dan data website di browser, sehingga website bisa diakses walaupun sedang offline. Ini membuat website terasa seperti aplikasi native di handphone yang tetap bisa digunakan walaupun tidak tersambung internet.
Push notification
Service worker bisa menampilkan notifikasi ke pengguna walaupun website tidak sedang dibuka. Ini sering dipakai untuk menyampaikan informasi terbaru atau pengingat ke pengguna
Background Sync
Service worker bisa menjalankan tugas di background secara periodik, misalnya untuk mensinkronisasikan data antara web dengan server.
Service Worker Lifecycles
Langkah pertama dalam lifecycle Service Worker adalah registrasi Service Worker. Registrasi ini biasanya dilakukan di file JavaScript utama Anda. Sebagai contoh, pada file index.js.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}Logic di dalam pernyataan if akan mengecek apakah navigator (browser) mendukung Service Worker. Sebagian besar browser web modern kompatibel dengan Service Worker.
if ('serviceWorker' in navigator) {
window.addEventListener('load',()=> {
navigator.serviceWorker.register('/service-worker.js');
});Code ini akan mendaftarkan service worker ketika halaman telah diload sepenuhnya. Sehingga akan menunda pendaftaran service worker.
Fase Instalasi
Proses instalasi ini hanya akan dipanggil sekali setelah Service Worker berhasil dimuat di browser. Jika Anda memodifikasi Service Worker yang ada dan mendaftarkannya lagi, browser akan menganggapnya sebagai worker baru dan memicu proses instalasi lagi.
Siklus ini memiliki event “install” yang terpicu saat Service Worker sedang diinstal. Selama instalasi Service Worker, Anda dapat menangani beberapa operasi asynchronous jika diperlukan, contohnya seperti caching aset statis. Metode event.waitUntil() akan menahan Service Worker dalam fase instalasi sampai promise yang diberikan ke event.waitUntil() terselesaikan. Bergantung pada apakah promise tersebut resolved atau rejected, fase instalasi akan selesai dengan sukses atau tidak.
//The files I'm going to cache
const filesToCache = [
"/",
"index.html",
"./js/index.js",
"./styles/styles.css",
];
self.addEventListener("install", e => {
console.log("[ServiceWorker] - Install");
e.waitUntil((async () => {
const cache = await caches.open("test-project-1");
console.log("[ServiceWorker] - Cache Root Applikasi ");
await cache.addAll(filesToCache);
})());Dicode diatas melakukan caching nama file file yang ada diaray untuk mempercepat load halaman, sembari melakukan instalasi service worker.Aktifasi Service Worker
Lifecycle ini sangat penting karena memungkinkan kita untuk melakukan pembersihan pada cache. Perlu diingat bahwa browser Anda memiliki batasan ukuran memori untuk cache, jadi Anda perlu memastikan untuk menjaga cache tetap bersih agar ruang penyimpanan tidak penuh.
self.addEventListener("activate", e => {
e.waitUntil((async () => {
await Promise.all(
keyList.map(key => {
console.log(key);
/*
Membandingkan
*/
if (key !== cacheName) {
console.log("[ServiceWorker] - Removing old cache", key);
return caches.delete(key);
}
})
);
})());
e.waitUntil(self.clients.claim());
});Mengecek service worker
Ketika bekerja dengan Service Worker, Anda selalu dapat memeriksa status registrasi menggunakan objek registrasi. Dalam contoh ini, saya sedang memeriksa apakah registrasi aktif dengan menggunakan registration.active.
navigator.serviceWorker.register('./service-worker.js').then((registration)=> {
if (registration.active) {
console.log('Service worker is active');
}
});Kesimpulan
Kesimpulannya, service worker adalah fitur JavaScript yang memungkinkan aplikasi web berjalan di background secara terpisah dari halaman web itu sendiri. Dengan ini, service worker memberikan kemampuan baru yang sebelumnya tidak mungkin dilakukan pada aplikasi web, seperti:
- Offline functionality: Service worker dapat menyimpan data dan resource penting untuk aplikasi web, sehingga pengguna tetap bisa mengakses sebagian fitur walaupun sedang offline.
- Push notifications: Service worker bisa digunakan untuk mengirim notifikasi ke pengguna walaupun browser sedang tidak aktif.
- Background sync: Service worker dapat melakukan sinkronisasi data antara aplikasi web dengan server di background, sehingga pengguna tidak perlu menunggu proses sinkronisasi selesai.
Singkatnya, service worker adalah teknologi yang ampuh untuk meningkatkan performa dan fungsionalitas aplikasi web, membuatnya lebih cepat, responsif, dan handal, bahkan bisa menyaingi kemampuan aplikasi native.