Tutorial PWA 10 - Mengenal Service Worker

PWA Dec 31, 2019

Saya kembali membuat tutorial mengenai progressive web apps karena, materi sebelumnya tentu belum lengkap. Jadi untuk melengkapi materi sebelumnya saya kembali membuat tutorial lanjutan. Untuk memulai tutorial lanjutan kali ini saya akan membahas mengenai "mengenal service worker". Meskipun sebelumnya saya telah membahasnya, namun pada kali ini saya akan membahasanya secara lengkap.

Sebuah website tidak bisa dikatakan sebagai sebuah PWA tanpa mengaplikasikan teknologi-teknologi PWA itu sendiri. Fitur paling mendasar yang harus dimiliki oleh sebuah PWA adalah working offline alias bisa dibuka saat tidak terdapat sebuah koneksi Internet. Artinya, meskipun suatu saat pengguna terputus koneksinya karena alasan apapun, pengguna tersebut tetap bisa menggunakan aplikasi kita tanpa perlu memainkan si T-Rex.

mode offline

Untuk mengaktifkan fitur working offline tersebut, kita akan memanfaatkan sebuah teknologi yang bernama Service Worker dibantu Cache API dan beberapa fitur lainnya. Dengan demikian aplikasi webmu dapat tetap tampil dengan antarmuka aplikasi dan mampu menampilkan data yang sudah pernah dibuka sebelumnya meskipun perangkat sudah tidak terhubung dengan jaringan internet.

Apa Itu Service Worker?

Service Worker adalah skrip yang dijalankan oleh browser di latar belakang, yang terpisah dengan skrip lain di halaman web browser. Service worker menjadi pintu bagi berbagai fitur browser yang tidak memerlukan tampilan atau interaksi dengan pengguna. Service worker ditulis menggunakan bahasa pemrograman JavaScript, namun dipanggil dengan cara yang berbeda dari kode JavaScript pada umumnya. Kemampuan utama dari service worker adalah mengambil alih managemen request browser.

Alur Permintaan Web

Umumnya bila kita membuat sebuah website atau aplikasi berbasis web, kita akan memanggil URL pada papan alamat di browser. Browser kemudian akan mengirimkan permintaan (dikenal dengan istilah request) ke server sesuai dengan domain yang dipanggil. Server kemudian menerima permintaan tersebut untuk kemudian menyediakan data yang sesuai untuk dikirimkan kembali ke browser (dikenal dengan istilah response). Respons yang diterima browser berupa data halaman HTML, file JavaScript, CSS, gambar, ataupun bentuk data lainnya. Respons ini kemudian diterjemahkan (di-render) dalam bentuk tampilan visual pada layar browser.

Bila browser tidak dapat terhubung dengan server, maka browser akan menampilkan pesan yang mengindikasikan bahwa sedang tidak ada koneksi. Saat ini terjadi, pengguna sama sekali tidak dapat memakai aplikasi kita sama sekali. Kita tidak dapat mengubah tampilan bawaan tersebut karena aplikasi kita hanya akan ditampilkan di layar browser bila browser berhasil menerima respon dari aplikasi kita.

Beruntung sekarang sudah ada fitur dari API HTML5 yang dapat menjawab persoalan tersebut, yakni Service Workers. Service Worker adalah skrip yang berjalan di belakang layar dan ditulis dalam bahasa pemrograman JavaScript. Fitur utama teknologi ini adalah memungkinkan developer untuk meng-intercept (mencegat) network request, menangani push message, dan melakukan banyak tugas lain.

Service Worker bertindak sebagai perantara (proxy) antara pengguna yang hendak melakukan request dengan web yang kita buat. Bila kita menggunakan Service Worker pada aplikasi web kita, maka setiap permintaan yang dikirim oleh pengguna pasti akan melalui Service Worker terlebih dahulu. Selanjutnya, Service Worker akan menentukan apakah permintaan yang dikirim akan diteruskan ke server atau diarahkan untuk menggunakan salinan data yang sebelumnya sudah disimpan di media penyimpanan.

Dalam penggunaan Service Worker, aplikasi web kita harus menggunakan HTTPS. Pemaksaan ini dimaksud untuk meningkatkan keamanan aplikasi. Karena tugasnya yang menjadi perantara antara pengguna dengan web dan bisa memotong sebuah request, maka ia rentan terhadap serangan "man-in-the-middle". Untuk mengetes aplikasi, Anda dapat menggunakan layanan hosting gratis seperti Github Pages yang sudah langsung menyediakan domain HTTPS. Atau bila Anda sudah memiliki domain dan hosting sendiri, gunakan SSL certificate berbayar maupun yang gratis seperti Let's Encrypt untuk mengaktifkan HTTPS. Namun, dalam proses pengembangan aplikasi, Service Worker tetap bisa dijalankan melalui HTTP di localhost.

Apa yang Dapat Dilakukan Service Worker

Service Worker ditulis dengan kode JavaScript, namun dijalankan berbeda dengan JavaScript yang biasa kita tulis pada sebuah halaman web. Service Worker berjalan mandiri di thread yang terpisah dari thread utama browser dan tidak boleh terkait dengan halaman web manapun. Oleh karena itu, Service Worker tidak bisa memodifikasi elemen yang ada di sebuah halaman web (mengakses DOM). Akan tetapi ia bisa menggunakan method postMessage() untuk mengirimkan sebuah "pesan" ke sebuah event listener untuk berkomunikasi dengan JavaScript yang berjalan di halaman web.

Service Worker membutuhkan setidaknya 2 API lain untuk dapat berjalan efektif, yakni Fetch API untuk pengambilan konten dari internet dan Cache API untuk penyimpanan konten untuk digunakan pada aplikasi. Cache akan membuat aplikasi web kita dimuat lebih cepat dalam segala kondisi jaringan karena file aset --js, css, gambar dan konten lainnya-- yang sudah pernah disimpan sebelumnya akan langsung digunakan tanpa melalui proses permintaan ulang ke server. Cache ini juga yang berperan menyuplai aset yang diperlukan agar aplikasi tetap tampil meskipun perangkat sedang dalam keadaan offline.

Service worker akan mengatur jalur setiap permintaan yang masuk. Bila konten dari sebuah permintaan sudah pernah disimpan di dalam cache, maka ia akan langsung digunakan oleh aplikasi. Bila konten yang diminta tidak ada pada cache, atau konten yang ada sudah kadaluwarsa, barulah Service Worker mengirimkan permintaan ke server untuk mendapatkan pembaharuan konten menggunakan fetch API.

alur service worker

Service Worker dapat menerima push message dari server. Karena berjalan di thread terpisah dari browser, maka Service Worker dapat tetap berjalan meskipun browser dalam keadaan tidak aktif. Fitur inilah yang memungkinkan kita untuk tetap bisa berkomunikasi dengan pengguna meskipun ia sedang tidak membuka aplikasi di browser. Push message digunakan untuk memperbaharui status dan konten lokal, juga dapat digunakan untuk menampilkan pesan pemberitahuan kepada pengguna dengan memanfaatkan fitur notification API.

Service Worker juga dapat melakukan sinkronisasi di belakang layar (background sync) yang berguna untuk menunda sebuah aksi dan menjalankannya saat pengguna mendapatkan koneksi yang stabil. Fitur ini sangat penting dalam penerapan offline application untuk memastikan setiap data yang dikirim oleh pengguna benar-benar terkirim dan tidak hilang gara-gara koneksi lambat atau terputus. Sinkronisasi ini juga berguna untuk mengirimkan pembaharuan dari server agar aplikasi selalu berada pada status terbaru ketika pengguna membuka aplikasi di lain waktu.

Dukungan Browser

Sebelumnya kita telah membahas bahwa PWA hanya bisa diterapkan di browser tertentu. Alasan tersebut ialah karena tidak semua browser mendukung Service Worker sedangkan Service Worker merupakan fitur dasar sebuah PWA. Untuk memeriksa apakah sebuah browser sudah mendukung Service Worker atau belum bisa pembaca lihat di caniuse.com/#feat=serviceworkers

dukungan browser

Ahmad Sarian Syakir

Aku hanya seorang pemuda biasa, terbiasa sendiri dan berdansa dengan dunia tak asli. Aku bukan apa-apa bukan siapa-siapa dan Dunia tak pernah menganggapku ada Meski aku sudah memesan tempat diatasnya.