Pekerja layanan

Pengguna berharap aplikasi dimulai pada koneksi jaringan yang lambat atau tidak stabil, atau bahkan ketika offline. Mereka berharap konten yang terakhir mereka gunakan, seperti trek media atau tiket dan itinerari, tersedia dan dapat digunakan. Jika permintaan tidak memungkinkan, pengguna berharap aplikasi memberi tahu mereka alih-alih gagal atau error secara diam-diam. Dan pengguna ingin melakukan semuanya dengan cepat. Seperti yang dapat dilihat dalam studi ini, Milidetik menghasilkan jutaan, bahkan peningkatan 0,1 detik dalam waktu pemuatan dapat meningkatkan konversi hingga 10%. Singkatnya: pengguna mengharapkan PWA dapat diandalkan, dan itulah sebabnya kami memiliki pekerja layanan.

Halo pekerja layanan

Pekerja layanan sebagai proxy middleware, yang menjalankan sisi perangkat, antara PWA dan server Anda, yang mencakup server Anda sendiri dan server lintas-domain.

Jika aplikasi meminta resource yang tercakup oleh cakupan pekerja layanan, termasuk saat pengguna sedang offline, pekerja layanan akan mencegat permintaan tersebut, yang bertindak sebagai proxy jaringan. Selanjutnya, layanan dapat memutuskan apakah harus menyalurkan sumber daya dari cache melalui Cache Storage API, dari jaringan seperti yang biasa terjadi tanpa pekerja layanan, atau membuatnya dari algoritma lokal. Hal ini memungkinkan Anda memberikan pengalaman yang serupa dengan yang diberikan oleh aplikasi platform. Bahkan dapat berfungsi sepenuhnya secara offline.

Mendaftarkan pekerja layanan

Sebelum pekerja layanan mengambil alih halaman Anda, pekerja layanan harus didaftarkan untuk PWA Anda. Artinya, saat pertama kali pengguna membuka PWA Anda, permintaan jaringan akan langsung menuju ke server Anda karena pekerja layanan belum mengontrol halaman Anda.

Setelah memeriksa apakah browser mendukung Service Worker API, PWA Anda dapat mendaftarkan pekerja layanan. Saat dimuat, pekerja layanan akan menyiapkan toko di antara PWA Anda dan jaringan, mencegat permintaan dan menayangkan respons yang sesuai.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

Memverifikasi apakah pekerja layanan terdaftar

Untuk memverifikasi apakah pekerja layanan terdaftar, gunakan alat developer di browser favorit Anda.

Di browser berbasis Firefox dan Chromium (Microsoft Edge, Google Chrome, atau Samsung Internet):

  1. Buka alat developer, lalu klik tab Aplikasi.
  2. Di panel kiri, pilih Service Workers.
  3. Periksa apakah URL skrip pekerja layanan muncul dengan status "Diaktifkan". (Anda akan mempelajari arti status ini di bagian siklus proses dalam bab ini). Pada Firefox, statusnya dapat berupa "Running" atau "Stopped".

Di Safari:

  1. Klik menu Develop, lalu submenu Service Workers.
  2. Pastikan entri dengan asal saat ini muncul di submenu. Fungsi ini akan membuka pemeriksa atas konteks pekerja layanan.
Alat developer pekerja layanan di Chrome, Firefox, dan Safari.
Alat developer pekerja layanan di Chrome, Firefox, dan Safari.

Cakupan

Folder tempat pekerja layanan Anda berada menentukan cakupannya. Pekerja layanan yang berada di example.com/my-pwa/sw.js dapat mengontrol navigasi apa pun di jalur my-pwa atau di bawahnya, seperti example.com/my-pwa/demos/. Pekerja layanan hanya dapat mengontrol item (halaman, pekerja, secara kolektif "klien") dalam cakupannya. Cakupan berlaku untuk tab browser dan jendela PWA.

Hanya satu pekerja layanan per cakupan yang diizinkan. Saat aktif dan berjalan, hanya satu instance yang biasanya tersedia, berapa pun banyaknya klien yang berada di memori (seperti jendela PWA atau tab browser).

Safari memiliki pengelolaan cakupan yang lebih kompleks, atau dikenal sebagai partisi, yang memengaruhi cara kerja cakupan jika Anda memiliki iframe lintas domain. Untuk membaca selengkapnya tentang implementasi WebKit, baca postingan blog mereka.

Siklus Proses

Pekerja layanan memiliki siklus proses yang menentukan cara penginstalan. Proses ini terpisah dari penginstalan PWA Anda. Siklus hidup pekerja layanan dimulai dengan mendaftarkan pekerja layanan. Browser kemudian berusaha mendownload dan mengurai file pekerja layanan. Jika penguraian berhasil, peristiwa install akan diaktifkan. Peristiwa install hanya diaktifkan satu kali.

Penginstalan pekerja layanan terjadi secara diam-diam, tanpa memerlukan izin pengguna, meskipun jika pengguna tidak menginstal PWA. Service Worker API bahkan tersedia di platform yang tidak mendukung penginstalan PWA, seperti Safari dan Firefox di perangkat desktop.

Setelah penginstalan, pekerja layanan belum dapat mengontrol kliennya, termasuk PWA Anda. Akun perlu diaktifkan terlebih dahulu. Saat pekerja layanan siap mengontrol kliennya, peristiwa activate akan diaktifkan. Meskipun demikian, ini tidak berarti bahwa halaman yang mendaftarkan pekerja layanan akan dikelola. Secara default, pekerja layanan tidak akan mengambil kontrol hingga saat berikutnya Anda membuka halaman tersebut, baik karena memuat ulang halaman atau membuka kembali PWA.

Anda dapat memproses peristiwa dalam cakupan global pekerja layanan menggunakan objek self.

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

Mengupdate pekerja layanan

Service worker akan diupdate saat browser mendeteksi bahwa service worker saat ini mengontrol klien dan versi baru (dari server Anda) dari file yang sama berbeda-beda.

Setelah penginstalan berhasil, pekerja layanan baru akan menunggu diaktifkan hingga pekerja layanan yang ada (lama) tidak lagi mengontrol klien. Status ini disebut "menunggu", dan inilah cara browser memastikan bahwa hanya ada satu versi pekerja layanan yang berjalan dalam satu waktu. Memuat ulang halaman atau membuka kembali PWA tidak akan membuat pekerja layanan baru mengambil alih kontrol. Pengguna perlu menutup atau keluar dari semua tab dan jendela menggunakan pekerja layanan saat ini, lalu menavigasi kembali. Hanya dengan cara ini pekerja layanan baru akan mengambil alih kontrol. Kunjungi artikel siklus proses pekerja layanan ini untuk informasi selengkapnya.

Masa pakai pekerja layanan

Setelah diinstal dan didaftarkan, pekerja layanan dapat mengelola semua permintaan jaringan dalam cakupannya. Kebijakan ini berjalan di threadnya sendiri, dengan aktivasi dan penghentian yang dikontrol oleh browser. Hal ini memungkinkan PWA Anda berfungsi bahkan sebelum atau setelah PWA Anda terbuka. Sementara pekerja layanan berjalan di thread mereka sendiri, tidak ada jaminan bahwa status dalam memori akan dipertahankan di antara pengoperasian service worker, jadi pastikan apa pun yang ingin Anda gunakan kembali pada setiap proses tersedia di IndexedDB atau penyimpanan persisten lainnya.

Jika belum berjalan, pekerja layanan akan dimulai setiap kali permintaan jaringan dalam cakupannya diminta, atau saat peristiwa pemicu, seperti sinkronisasi latar belakang berkala atau pesan push, diterima.

Service worker tidak berlaku untuk waktu yang terus-menerus. Meskipun waktu persisnya berbeda antar-browser, service worker akan dihentikan jika sudah tidak ada aktivitas selama beberapa detik, atau jika sudah terlalu lama sibuk. Jika pekerja layanan telah dihentikan dan terjadi peristiwa yang akan memulainya, pekerja layanan akan dimulai ulang.

Kapabilitas

Dengan pekerja layanan yang terdaftar dan aktif, Anda memiliki thread dengan siklus proses eksekusi yang benar-benar berbeda dari yang utama di PWA Anda. Namun, secara default, file pekerja layanan itu sendiri tidak memiliki perilaku. API tidak akan melakukan cache atau menyediakan resource apa pun, karena ini harus dilakukan oleh kode Anda. Anda akan mengetahui caranya dalam bab berikut.

Kemampuan pekerja layanan tidak hanya untuk proxy atau melayani permintaan HTTP; fitur lain tersedia di atasnya untuk tujuan lain, seperti eksekusi kode latar belakang, notifikasi push web, dan proses pembayaran. Kita akan membahas penambahan ini di bab kemampuan.

Referensi