Service Workers

Service worker merupakan kunci utama dari Teknik Progressive Web App. Service worker adalah sebuah file JavaScript yang berada di antara aplikasi kita dengan server.

Cara kerja dari service worker adalah sebagai berikut:

1. Ketika ada request dari html aplikasi, misalnya permintaan icon file, maka service worker akan menangkap request tersebut dan memeriksa local cache untuk file yang diminta.
2. Jika ketemu, maka service worker akan mengembalikan file tersebut kepada aplikasi.
3. Jika tidak ada, service worker akan mengontak server untuk meneruskan permintaan file dan kemudian jika berhasil di download, akan disimpan ke local cache untuk penggunaan berikutnya.

Event pada Service Worker
Event adalah suatu kondisi yang ditangkap oleh Service Worker dan kemudian melakukan respon sesuai event tersebut.

Berikut adalah beberapa event yang dapat dideteksi oleh Service Worker.

Siklus Hidup Service Worker
Service worker memiliki beberapa state yang menunjukkan daur hidupnya.

Gambar berikut mengilustrasikan daur hidup Service Worker:

Siklus Hidup Service Worker
Ilustrasi alur kerja Service Worker dapat dilihat pada gambar berikut

Menambahkan Service Worker

1. Seperti yang dijelaskan pada bagian sebelumnya, service worker adalah sebuah file JavaScript.
2. Service Worker memiliki ruang lingkup di mana file html dan JavaScript di dalam ruang lingkup tersebut mendapat pengaruh atau dapat dilayani oleh Service Worker.
3. Karena itu, agar Service Worker dapat melayani semua file di dalam proyek kita, maka buat service worker di dalam folder public.
4. Sehingga struktur folder akan berubah menjadi seperti pada gambar berikut:
5. Selanjutnya adalah melakukan registrasi file sw.js
6. Untuk melakukan registrasi sw.js, dapat dilakukan dengan membuat sebuah file javascript yang kemudian dapat ditambahkan ke dalam semua file html di dalam proyek kita.
7. Untuk itu, buat file JavaScript baru di dalam folder src/js dengan nama file app.js
8. File app.js ini akan digunakan untuk melakukan registrasi Service Worker.
9. Lalu isikan kode berikut ke dalam app.js
10. Selanjutnya, refresh kembali dan perhatikan bagian Console pada Developer Tool dari aplikasi browser yang digunakan.
11. Akan terlihat pesan seperti pada gambar berikut.

Menambahkan Incoming Event pada Service Worker

1. Untuk menambahkan event, modifikasi dapat dilakukan pada file sw.js
2. Setelah disimpan, lalu refresh kembali halaman website yang dibuka pada browser.
3. Bila event berhasil, akan tampilan console akan menjadi seperti pada gambar berikut:

Menambahkan Incoming Event pada Service Worker

1. Namun pada console saat ini, terdapat keanehan yaitu urutan console tidak sesuai dengan urutan kode-nya.
2. Untuk itu, kita perlu menutup tab yang membuka halaman web, kemudian membuka tab baru dan mengakses kembali url localhost proyek.
3. Maka urutannya akan kembali normal. Hal ini perlu dipahami agar bila ada update terhadap kode Service Worker, maka kita perlu menutup tab dan membuka tab baru agar update dapat berjalan seperti yang diinginkan.

Mengupdate Service Worker

1. Sebelumnya, service worker digunakan hanya untuk menangkap event life cycle dari service worker.
2. Service worker dapat juga digunakan untuk menangkap event yang lain. Contohnya adalah event fetch file.
3. Modifikasi file sw.js menjadi seperti berikut:

Mengupdate Service Worker

1. Lalu tutup dan buka kembali tab browser dan akses URL proyek.
2. Tampilannya akan menjadi seperti berikut: