Progressive Web App (bagian 2)
Halo devs !
Kembali lagi dengan artikel saya hehe. Selanjutnya kita akan melanjutkan materi dari artikel sebelumnya. Kalo temen-temen belum membuka apalagi membacanya bisa klik disini.
Pada artikel ini kita akan membahas poin utama dari PWA itu sendiri. Apakah itu? Jawabannya adalah Service Worker. Apa itu Service Worker? Dan bagaimana cara kerjanya service worker?
Service Worker
Service worker adalah teknologi di bali Progressive Web App (PWA) yang memberikan fungsionalitas offline, push notification, update konten, dan pergantian konektifitas. Service worker tidak mengenal DOM (Document Object Model), karena berjalan terpisah dari browser. Service worker menyimpan data di indexDB bukan di local storage. Dan service worker dapat mengintersepsi jaringan, menulis dan membaca cache.
Hal yang perlu di ingat untuk Service Worker yaitu :
- Service worker adalah javascript worker. Artinya service worker dapat berkomunikasi dengan halaman yang di kontrolnya dengan merespons pesan yang dikirimkan.
- Pada artikel sebelumnya sudah di sebutkan bahwa service worker adalah proxy jaringan yang dapat di kontrol dalam menangani permintaan jaringan dari halaman.
- Service worker akan dihentikan jika tidak sedang digunakan, dan akan berjalan jika di butuhkan lagi.
- Service worker menggunakan promise. Jadi lebih baik jika temen-temen mempelajari promise juga.
Life Cycle Service Worker
Service worker memiliki life cycle sepenuhnya terpisah dari halaman web.
Perhatikan life cyle di bawah ini :
Ada yang sudah paham tanpa di jelaskan? Pastinya ada yang menjawab sudah kan? hehe. Buat yang belum paham, tenang. Saya akan bantu jelaskan, semoga temen-temen bisa paham dengan penjelasan saya ya :)
Sebelum menggunakan service worker untuk situs temen-temen. Kita perlu mendaftarkan service worker terlebih dahulu. Temen-temen bisa melakukannya pada halaman javascript.
Selanjutnya temen-temen akan melakukan penginstallan service worker. Pada tahap ini temen-temen perlu menyimpan beberapa asset statis pada cache. Apabila semua asset tersebut berhasil di simpan dalam cache, maka service worker akan terinstall. Namun, jika selama penginstallan ada asset/file yang gagal di download dan di simpan dalam cache, maka langkah penginstallan service worker akan gagal. Dan service worker tidak akan di aktifkan. Tapi janga khawatir, temen-temen bisa mencoba untuk melakukannya kembali. Sehingga jika sudah berhasil diinstall, artinya asset statis sudah masuk kedalam cache.
Tahap penginstallan finish, langkah selanjutnya adalah aktivasi. Disinilah temen-temen akan menangani manajemen cache.
Setelah langkah aktivasi, service worker akan mengontrol semua halaman yang berada dalam cakupannya. Walaupun begitu, halaman yang sudah di daftarkan ke service worker untuk pertama kali tidak akan di kontrol hingga di muat lagi. Setelah service worker dapat di kontrol, service worker akan berada di salah satu dari kedua kondisinya, yaitu :
a. Service worker akan di hentikan untuk menghemat memori, atau
b. Service worker akan menangani peristiwa permintaan jaringan atau permintaan dari halaman anda.
Yes, kita sudah mempelajari life cyle dari service worker itu sendiri. Tapi kurang jelas kan ya kalo belum masuk codelabsnya. Maklum developer sukanya praktik di banding teorinya :D
Tenang, artikel selanjutnya kita akan masuk codelabsnya kok. Terima kasih buat temen-temen yang udah setia nongkrong di artikel saya :) See you next artikel…
Referensi :
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=id
