Service Workers – Teori

by

Pengenalan Service Workers

Service workers adalah sebuah web worker berupa file JavaScript yang berjalan secara terpisah dari main thread browser. Service worker akan men-interept network request, caching atau retrive dari cache, dan mengirimkan push message.

Berikut beberapa ketentuan dari service workers.

  • Service worker didesain full asynchronous, synchronous XHR and localStorage tidak dapat digunakan dalam service worker.
  • Service worker dapat menerima push messages dari server ketika app tidak aktif. Memungkinkan user menerima notifikasi, walaupun browser dalam keadaan tertutup.
  • Service worker tidak dapat mengakses DOM secara langsung. Untuk berkomunikasi dengan sebuah halaman, service worker menggunakan metoda postMessage() untuk mengirim data dan “message” event listener untuk menerima data.
  • Service worker hanya berjalan di https, untuk mencegah serangan tipe “man-in-the-middle”.
  • Ketika tidak digunakan, service worker akan idle dan di restart ketika berikutnya dibutuhkan. Jika Anda membutuhkan menyimpan data persisten setelah restart, gunakan IndexDB.
  • Service worker menggunakan promise, Anda diharapkan sudah memahami promise JavaScript.

Fungsi Service Workers

Dengan service workers, kita bisa mengatur network requests, cache requests untuk meningkatkan performance dan menyediakan offline access dengan menggunakan cached content.

Service workers menggunakan 2 APIs agar app bisa bekerja offline:

  • Fetch, cara standar untuk mengambil konten dari network.
  • Cache, menyimpan dalam storage, cache bersifat persistent dan independent dari browser cache atau network status.

Service workers juga memungkinkan kita untuk membuat web app menjadi feel native.

  • Notifications API: berguna untuk menampilkan dan berinteraksi notifikasi dengan menggunakan sistem notifikasi dari operating system.
  • Push API: API yang memungkinkan aplikasi Anda berlangganan layanan push dan menerima push message. Message dikirim ke service worker, digunakan untuk memperbarui status lokal atau menampilkan pemberitahuan kepada pengguna. Karena service worker memiliki thread terpisah, mereka dapat menerima dan menampilkan notifikasi bahkan ketika browser tidak berjalan.
  • Background sync API: Memungkinkan Anda menunda tindakan hingga pengguna memiliki konektivitas yang stabil. Berguna untuk memastikan bahwa data terkirim dengan baik. API ini juga memungkinkan server melakukan update secara berkala sehingga saat aplikasi digunakan sudah diperbaharui.
  • Channel Messaging API: Channel komunikasi antara web workers, service workers dan web app. Contoh: notifikasi konten baru dan updates yang membutuhkan interaksi user.

Service Worker Lifecycle

Lifecycle dari service worker adalah Registration, Installation dan Activation.

Service worker life cycle
source: developers.google.com

Registration dan scope

Registration akan memberitahu browser dimana service worker berada, dan akan diinstal di background. Contoh:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
  .then(function(registration) {
    console.log('Registration successful, scope is:', registration.scope);
  })
  .catch(function(error) {
    console.log('Service worker registration failed, error:', error);
  });
}

Installation

Setelah proses registrasi selesai, tahap instalasi akan dilakukan. Instalasi akan dilakukan jika service workers dianggap baru oleh browser, bisa terjadi karena memang belum ada service worker atau karena ada perbedaan dari service workers yang diinstall sebelumnya.

Install event akan aktif saat proses instalasi. Kita dapat menambahkan install event listener untuk melakukan tugas tertentu. Contoh, selama proses install, service workers dapat melakukan precache bagian dari web app, agar saat loading berikutnya aplikasi dapat dibuka lebih cepat.

// Listen for install event, set callback
self.addEventListener('install', function(event) {
    // Perform some task
});

Activation

Setelah terinstall, fase berikutnya adalah activation. Jika ada pages terbuka dan dikontrol oleh service workers sebelumnya, service worker baru akan masuk ke waiting state. Service worker baru akan aktif ketika tidak ada lagi halaman yang terbuka yang masih menggunakan service worker sebelumnya. Hal ini untuk memastikan hanya ada 1 versi service worker berjalan.

Ketika service worker diaktivasi, activate event akan terjadi. Pada event listener ini dapat digunakan untuk membersihkan cache yang sudah kedaluarsa.

self.addEventListener('activate', function(event) {
  // Perform some task
});

Setelah aktif, service worker akan mengatur seluruh halaman dalam scope, dan mulai mendengarkan events dari halaman tersebut.

Untuk pages yang diload sebelum service worker aktif tidak akan dikontrol oleh service worker tersebut. Service worker akan mengambil alih kontrol setelah menutup dan membuka aplikasi kembali. Atau service worker memanggil fungsi clients.claim. Hal ini bertujuan menjaga konsistensi dari site.

Sharing is caring: