Pengenalan Service Worker

Pada beberapa postingan sebelumnya saya telah membahas tentang Javascript Promise, dan pada postingan kali ini yang akan dibahas adalah tentang Service Worker.

Apa Itu Service Worker ?

Service Worker adalah sebuah script yang dijalankan browser Anda di latar belakang, terpisah dari halaman web, membuka pintu untuk fitur yang tidak memerlukan halaman web atau interaksi pengguna. Saat ini, Service Worker sudah termasuk fitur seperti push notification dan bakground synch. Di masa yang akan datang Service Worker akan mendukung hal-hal lain seperti sinkronisasi periodik atau geofencing. Fitur inti yang dibahas dalam tutorial ini adalah kemampuan untuk mencegat dan menangani permintaan jaringan, termasuk mengelola cache.

Yang membuat Service Worker menarik adalah API ini memberikan dukungan untuk pengalaman offline kepada pengguna, memberikan kontrol penuh kepada pengambang/developer atas pengalaman pengguna.
Sebelum Service Worker ada satu API yang memberikan pengalaman offline kepada pengguna yang disebut AppCache, namun terdapat beberapa masalah pada API tersebut, Anda dapat membacanya disini. Service Worker telah dirancang untuk menghindari masalah-masalah tersebut.

Beberapa hal yang perlu Anda ketahui tentang Service Worker :

• Service Worker adalah Javascript Worker, sehingga Anda tidak dapat berinteraksi secara langsung dengan DOM element, namun Service Worker dapat berkomunikasi dengan halaman yang di kontrol dengan menanggapi pesan yang dikirim melalui interface postMessage.
• Service Worker memungkinkan Anda untuk mengontrol bagaimana permintaan jaringan dari halaman Anda ditangani.
• Service Worker akan dihentikan bila sudah tdak digunakan, dan akan di restart/mulai ulang ketika dibutuhkan. Jika terdapat informasi yang ingin Ada gunakan kembali Anda dapat menggunakan IndexDB API.
• Service Worker banyak menggunakan Promise, jadi jika Anda belum tau apa itu Promise, maka Anda harus berhenti membaca artikel ini dan bacalah artikel sebelumnya tentang Javascript Promises.

Selama pembuatan Anda akan dapat menggunakan Service Worker melalui localhost, tetapi untuk menggunakannya di situs online Anda harus memiliki setup HTTPS pada server Anda. Github Pages dilayani melalui HTTPS, jadi disana dapat menjadi tempat yang bagus untuk mencoba fitur ini.

Mendaftarkan Service Worker

Untuk menginstal Service Worker yang Anda butuhkan untuk memulai proses adalah dengan mendaftarkannya di halaman Anda. Hal ini akan memberitahu browser dimana file Javascript Service Worker Anda berada.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Pendaftaran berhasil
      console.log('Pendaftaran ServiceWorker berhasil : ', registration.scope);
    }).catch(function(err) {
      // Pendaftaran gagal
      console.log('Pendaftaran ServiceWorker gagal: ', err);
    });
  });
}

Script diatas akan memeriksa untuk melihat apakah Service Worker API tersedia, dan jika itu tersedia, Service Worker di /sw.js akan terdaftar setelah halaman dimuat.

Anda dapat memanggil fungsi register() setiap kali halaman dimuat; browser akan mencari tahu apakah Service Worker sudah terdaftar atau tidak dan menanganinya. file Service Worker harus diletakkan pada direktori root di web Anda, karena Service Worker hanya akan menerima event fetch dari folder/domain dimana file tersebut berada.
Untuk mengecek apakah Service Worker Anda telah terdaftar Anda dapat menuliskan uri berikut di browser Chrome Anda

chrome://inspect/#service-workers

Menginstall Service Worker

Setelah mendaftarkan Service Worker sekarang Anda dapat menginstall Service Worker pada halaman Anda dengan mendefinisikan callback untuk event install dan memilih apa saja yang ingin Anda cache.

self.addEventListener('install', function(event) {
  // Lakukan langkah instalasi
});

Dalam callback install, kita perlu melakukan langkah-langkah berikut:

• Membuka cache.
• Cache file kita.
• Mengkonfirmasi apakah semua aset perlu di cache atau tidak.

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  './',
  './styles/main.css',
  './script/main.js'
];

self.addEventListener('install', function(event) {
  // Lakukan langkah instalasi
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Cache terbuka');
        return cache.addAll(urlsToCache);
      })
  );
});

Pada script diatas saya membuka cache dengan nama yang telah ditentukan, kemudian menambahkan file yang akan dicache dengan memasukkan array dari file yang akan dicache ke dalam fungsi cache.addAll().  metode event.waitUntill() mengambil Promise dan menggunakannya untuk menghitung jumlah waktu yang dibutuhkan dalam proses instalasi, dan apakah proses instalasi berhasil.