Pada lecture service worker – prakter akan dibahas membuat file javascript service worker, bagaimana melakukan registrasi, instalasi dan aktivasi.
Untuk menghindari kerumitan tutorial, kita akan menyimpan file service worker di root dari web page. Hal ini berhubungan dengan masalah scope. Scope dari service worker akan sesuai dengan lokasi file service worker disimpan.
Registrasi Service Worker
Registrasi service worker juga perlu dipanggil dari setiap page yang akan digunakan dalam web app. Mengapa? Karena kita tidak tahu, user akan membuka halaman yang mana saat pertama kali.
Untuk itu, kita perlu membuat satu javascript global, yang isinya akan melakukan registrasi file service worker. Dalam contoh, kami gunakan file app.js yang sudah di include disetiap file html.
Note, anda bisa memberikan nama file JavaScript apa saja. Baik untuk file javaScript global yang dipanggil dari setiap html atau nama service worker file.
if ('serviceWorker' in navigator){
navigator.serviceWorker.register('\sw.js')
.then(function(){
console.log('Service Worker Registered.');
});
}
Note Kita dapat mengubah scope service worker saat melakukan registrasi. Dan juga perlu melakukan konfigurasi pada server untuk memberikan ijin Service-Worker-Allowed HTTP Header. Jika Anda ingin memahami lebih jauh tentang scoping silakan kunjungi disini.
Setelah code diatas dibuat, kita bisa langsung melakukan testing dengan membuka alamat 127.0.0.1:8080 pada browser. Lalu buka developer tools.
Pada tab console akan kita lihat message ‘Service Worker Registered.’
Kita juga bisa lihat pada tab Application (dari devtools, bila tidak terlihat tekan tombol panah >>)
Install dan Activate Service Worker
Setelah registrasi, tahap berikutnya kita install service worker. Buka file service worker, lecture menggunakan file sw.js
self.addEventListener('install', function(event){
console.log('[SW] Installing service worker...', event);
});
self.addEventListener('activate', function(event){
console.log('[SW] activating service worker...', event);
return self.Clients.claim();
});
Seperti sudah dibahas pada lecture sebelumnya, service worker adalah spesial file javascript yang berjalan di thread terpisah, dan bertugas ‘mendengarkan’ event dan bereaksi terhadap event tersebut.
Pada contoh diatas, pada event install, kita masih membuat code sederhana, yaitu menulis ke console.
Pada console terlihat, proses installing berhasil dan tampil ke console. Sementara proses activate tidak tampil di console.
Hal ini dapat dilihat lebih jelas pada tab Application pada devtools. Service worker menunggu untuk di aktifasi. Service worker yang baru diinstal, tidak akan diaktivasi oleh browser.
Hal ini terjadi karena browser berusaha menjaga konsistensi, karena ada kemungkinan page terhubung dengan sevice worker sebelumnya.
Untuk mengatasinya, tutup tab browser, dan buka lagi dan masukan lagi alamat localhost. Kali ini service worker sudah diregistrasi, diinstall dan diaktivasi.
Tips Development
Pada saat development, setiap terjadi perubahan kode pada file service worker, kita harus menutup dan membuka lagi tab browser, agar service worker yang baru dapat di install dan diaktivasi.
Tab browser disini adalah tab browser dari web app yang bersangkutan. Tidak perlu menutup tab lainnya jika Anda sedang membuka youtube, misalnya.
Atau dapat menggunakan tools dari tab Application pada devtools, dengan mencentang checkbox Update on reload, (lihat gambar diatas) dengan demikian browser akan melakukan proses install dan aktivasi saat kita me-refresh page.