Membuat skrip pekerja layanan

Codelab ini adalah bagian dari kursus pelatihan Developing Progressive Web Apps, yang dikembangkan oleh tim Pelatihan Google Developers. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan.

Untuk mengetahui detail lengkap tentang kursus ini, lihat Ringkasan Pengembangan Progressive Web App.

Pengantar

Lab ini memandu Anda membuat pekerja layanan sederhana dan menjelaskan siklus proses pekerja layanan.

Yang akan Anda pelajari

  • Buat skrip pekerja layanan dasar, instal, dan lakukan proses debug sederhana

Yang perlu Anda ketahui

  • JavaScript dan HTML dasar
  • Konsep dan sintaksis dasar Promise ES2015
  • Cara mengaktifkan konsol developer

Yang Anda perlukan sebelum memulai

Download atau clone repositori pwa-training-labs dari github dan instal Node.js versi LTS, jika diperlukan.

Buka direktori service-worker-lab/app/ dan mulai server pengembangan lokal:

cd service-worker-lab/app
npm install
node server.js

Anda dapat menghentikan server kapan saja dengan Ctrl-c.

Buka browser Anda, lalu buka localhost:8081/.

Catatan: Batalkan pendaftaran pekerja layanan dan hapus semua cache pekerja layanan untuk localhost agar tidak mengganggu lab. Di Chrome DevTools, Anda dapat melakukannya dengan mengklik Hapus data situs dari bagian Hapus penyimpanan di tab Aplikasi.

Buka folder service-worker-lab/app/ di editor teks pilihan Anda. Folder app/ adalah tempat Anda akan membangun lab.

Folder ini berisi:

  • below/another.html, js/another.js, js/other.js, dan other.html adalah contoh resource yang kami gunakan untuk bereksperimen dengan cakupan pekerja layanan
  • Folder styles/ berisi cascading stylesheet untuk lab ini
  • Folder test/ berisi file untuk menguji progres Anda
  • index.html adalah halaman HTML utama untuk situs/aplikasi contoh kami
  • service-worker.js adalah file JavaScript yang digunakan untuk membuat pekerja layanan kita
  • package.json dan package-lock.json melacak paket node yang digunakan dalam project ini
  • server.js adalah server express sederhana yang kita gunakan untuk menghosting aplikasi

Buka service-worker.js di editor teks Anda. Perhatikan bahwa file kosong. Kita belum menambahkan kode apa pun untuk dijalankan dalam pekerja layanan.

Buka index.html di editor teks Anda.

Di dalam tag <script>, tambahkan kode berikut untuk mendaftarkan pekerja layanan:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('Service Worker is registered', registration);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

Simpan skrip dan muat ulang halaman. Konsol akan menampilkan pesan yang menunjukkan bahwa pekerja layanan telah didaftarkan. Di Chrome, Anda dapat memeriksa apakah pekerja layanan terdaftar dengan membuka DevTools (Control + Shift + I di Windows dan Linux, atau ⌘ + alt + I di Mac), mengklik tab Aplikasi, lalu mengklik opsi Pekerja Layanan. Anda akan melihat sesuatu yang mirip dengan berikut ini:

Opsional: Buka situs di browser yang tidak didukung dan verifikasi bahwa kondisi pemeriksaan dukungan berfungsi.

Penjelasan

Kode di atas mendaftarkan file service-worker.js sebagai pekerja layanan. Pertama-tama, kode ini akan memeriksa apakah browser mendukung pekerja layanan. Hal ini harus dilakukan setiap kali Anda mendaftarkan pekerja layanan karena beberapa browser mungkin tidak mendukung pekerja layanan. Kemudian, kode mendaftarkan pekerja layanan menggunakan metode register dari ServiceWorkerContainer API, yang ada dalam antarmuka Navigator jendela.

navigator.serviceWorker.register(...) menampilkan promise yang di-resolve dengan objek registration setelah pekerja layanan berhasil didaftarkan. Jika pendaftaran gagal, promise akan ditolak.

Perubahan status pekerja layanan memicu peristiwa di pekerja layanan.

Menambahkan pemroses peristiwa

Buka service-worker.js di editor teks Anda.

Tambahkan pemroses peristiwa berikut ke pekerja layanan:

self.addEventListener('install', event => {
  console.log('Service worker installing...');
  // Add a call to skipWaiting here
});

self.addEventListener('activate', event => {
  console.log('Service worker activating...');
});

Simpan file.

Batalkan pendaftaran pekerja layanan secara manual dan muat ulang halaman untuk menginstal dan mengaktifkan pekerja layanan yang diupdate. Log konsol akan menunjukkan bahwa pekerja layanan baru telah didaftarkan, diinstal, dan diaktifkan.

Catatan: Log pendaftaran mungkin tidak berurutan dengan log lainnya (penginstalan dan aktivasi). Pekerja layanan berjalan secara bersamaan dengan halaman, sehingga kami tidak dapat menjamin urutan log (log pendaftaran berasal dari halaman, sedangkan log penginstalan dan aktivasi berasal dari pekerja layanan). Penginstalan, aktivasi, dan peristiwa pekerja layanan lainnya terjadi dalam urutan yang ditentukan di dalam pekerja layanan, dan harus selalu muncul dalam urutan yang diharapkan.

Penjelasan

Service worker memancarkan peristiwa install di akhir pendaftaran. Dalam kode di atas, pesan dicatat di dalam pemroses peristiwa install, tetapi di aplikasi dunia nyata, ini akan menjadi tempat yang tepat untuk menyimpan aset statis dalam cache.

Saat pekerja layanan didaftarkan, browser mendeteksi apakah pekerja layanan tersebut baru (baik karena berbeda dari pekerja layanan yang sebelumnya diinstal atau karena tidak ada pekerja layanan yang terdaftar untuk situs ini). Jika pekerja layanan baru (seperti dalam kasus ini), browser akan menginstalnya.

Pekerja layanan memancarkan peristiwa activate saat mengambil kontrol halaman. Kode di atas mencatat pesan di sini, tetapi peristiwa ini sering digunakan untuk memperbarui cache.

Hanya satu pekerja layanan yang dapat aktif dalam satu waktu untuk cakupan tertentu (lihat Menjelajahi cakupan pekerja layanan), sehingga pekerja layanan yang baru diinstal tidak diaktifkan hingga pekerja layanan yang ada tidak lagi digunakan. Itulah sebabnya semua halaman yang dikontrol oleh pekerja layanan harus ditutup sebelum pekerja layanan baru dapat mengambil alih. Karena kita membatalkan pendaftaran pekerja layanan yang ada, pekerja layanan baru diaktifkan dengan segera.

Catatan: Cukup memuat ulang halaman tidak cukup untuk mentransfer kontrol ke pekerja layanan baru, karena halaman baru akan diminta sebelum halaman saat ini dibongkar, dan tidak akan ada waktu saat pekerja layanan lama tidak digunakan.

Catatan: Anda juga dapat mengaktifkan pekerja layanan baru secara manual menggunakan alat developer beberapa browser dan secara terprogram dengan skipWaiting(), yang akan kita bahas di bagian 3.4.

Memperbarui pekerja layanan

Tambahkan komentar berikut di mana saja di service-worker.js:

// I'm a new service worker

Simpan file dan muat ulang halaman. Lihat log di konsol; perhatikan bahwa pekerja layanan baru diinstal tetapi tidak diaktifkan. Di Chrome, Anda dapat melihat service worker yang menunggu di tab Aplikasi di DevTools.

Tutup semua halaman yang terkait dengan pekerja layanan. Kemudian, buka kembali localhost:8081/. Log konsol akan menunjukkan bahwa pekerja layanan baru kini telah diaktifkan.

Catatan: Jika Anda mendapatkan hasil yang tidak terduga, pastikan cache HTTP Anda dinonaktifkan di alat developer.

Penjelasan

Browser mendeteksi perbedaan byte antara file pekerja layanan baru dan yang ada (karena komentar yang ditambahkan), sehingga pekerja layanan baru diinstal. Karena hanya satu pekerja layanan yang dapat aktif dalam satu waktu (untuk cakupan tertentu), meskipun pekerja layanan baru diinstal, pekerja layanan tersebut tidak diaktifkan hingga pekerja layanan yang ada tidak lagi digunakan. Dengan menutup semua halaman di bawah kontrol pekerja layanan lama, kita dapat mengaktifkan pekerja layanan baru.

Melewati fase menunggu

Service worker baru dapat segera diaktifkan, meskipun ada service worker yang sudah ada, dengan melewati fase menunggu.

Di service-worker.js, tambahkan panggilan ke skipWaiting di pemroses peristiwa install:

self.skipWaiting();

Simpan file dan muat ulang halaman. Perhatikan bahwa pekerja layanan baru segera diinstal dan diaktifkan, meskipun pekerja layanan sebelumnya sedang mengontrol.

Penjelasan

Metode skipWaiting() memungkinkan pekerja layanan diaktifkan segera setelah selesai menginstal. Pemroses peristiwa penginstalan adalah tempat umum untuk menempatkan panggilan skipWaiting(), tetapi dapat dipanggil di mana saja selama atau sebelum fase menunggu. Lihat dokumentasi ini untuk mengetahui informasi selengkapnya tentang kapan dan cara menggunakan skipWaiting(). Untuk lab lainnya, kita sekarang dapat menguji kode service worker baru tanpa membatalkan pendaftaran service worker secara manual.

Untuk informasi selengkapnya

Pekerja layanan dapat bertindak sebagai proxy antara aplikasi web dan jaringan Anda.

Mari tambahkan pemroses pengambilan untuk mencegat permintaan dari domain kita.

Tambahkan kode berikut ke service-worker.js:

self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
});

Simpan skrip dan muat ulang halaman untuk menginstal dan mengaktifkan pekerja layanan yang telah diupdate.

Periksa konsol dan amati bahwa tidak ada peristiwa pengambilan yang dicatat. Muat ulang halaman dan periksa konsol lagi. Kali ini Anda akan melihat peristiwa pengambilan untuk halaman dan asetnya (seperti CSS).

Klik link ke Halaman lain, Halaman lain, dan Kembali.

Anda akan melihat peristiwa pengambilan di konsol untuk setiap halaman dan asetnya. Apakah semua log masuk akal?

Catatan: Jika Anda membuka halaman dan tidak menonaktifkan cache HTTP, aset CSS dan JavaScript dapat di-cache secara lokal. Jika hal ini terjadi, Anda tidak akan melihat peristiwa pengambilan untuk resource ini.

Penjelasan

Service worker menerima peristiwa pengambilan untuk setiap permintaan HTTP yang dibuat oleh browser yang berada dalam cakupannya. Objek fetch event berisi permintaan. Memantau peristiwa pengambilan di pekerja layanan mirip dengan memantau peristiwa klik di DOM. Dalam kode kita, saat peristiwa pengambilan terjadi, kita mencatat URL yang diminta ke konsol (dalam praktiknya, kita juga dapat membuat dan menampilkan respons kustom kita sendiri dengan resource arbitrer).

Mengapa tidak ada peristiwa pengambilan yang dicatat saat refresh pertama? Secara default, pengambilan peristiwa dari halaman tidak akan melewati pekerja layanan kecuali jika permintaan halaman itu sendiri melewati pekerja layanan. Hal ini memastikan konsistensi di situs Anda; jika halaman dimuat tanpa pekerja layanan, begitu juga subresource-nya.

Untuk informasi selengkapnya

Kode solusi

Untuk mendapatkan salinan kode yang berfungsi, buka folder 04-intercepting-network-requests/.

Service worker memiliki cakupan. Cakupan pekerja layanan menentukan dari jalur mana pekerja layanan mencegat permintaan.

Menemukan cakupan

Perbarui kode pendaftaran di index.html dengan:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('SW registered with scope:', registration.scope);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

Muat ulang browser. Perhatikan bahwa konsol menampilkan cakupan pekerja layanan (dalam hal ini adalah http://localhost:8081/).

Penjelasan

Promise yang ditampilkan oleh register() diselesaikan ke objek pendaftaran, yang berisi cakupan pekerja layanan.

Cakupan default adalah jalur ke file pekerja layanan, dan mencakup semua direktori yang lebih rendah. Jadi, pekerja layanan di direktori root aplikasi mengontrol permintaan dari semua file di aplikasi.

Memindahkan service worker

Pindahkan service-worker.js ke direktori below/ dan perbarui URL pekerja layanan dalam kode pendaftaran di index.html.

Batalkan pendaftaran pekerja layanan saat ini di browser dan muat ulang halaman.

Konsol menunjukkan bahwa cakupan pekerja layanan kini adalah http://localhost:8081/below/. Di Chrome, Anda juga dapat melihat cakupan pekerja layanan di tab aplikasi DevTools:

Kembali ke halaman utama, klik Halaman lain, Halaman lain, dan Kembali. Permintaan pengambilan data mana yang dicatat dalam log? Mana yang tidak?

Penjelasan

Cakupan default service worker adalah jalur ke file service worker. Karena file pekerja layanan sekarang ada di below/, itulah cakupannya. Sekarang konsol hanya mencatat peristiwa pengambilan untuk another.html, another.css, dan another.js, karena ini adalah satu-satunya resource dalam cakupan pekerja layanan.

Menetapkan cakupan arbitrer

Pindahkan kembali pekerja layanan ke direktori root project (app/) dan perbarui URL pekerja layanan dalam kode pendaftaran di index.html.

Gunakan referensi di MDN untuk menetapkan cakupan pekerja layanan ke direktori below/ menggunakan parameter opsional di register().

Batalkan pendaftaran pekerja layanan dan muat ulang halaman. Klik Halaman lain, Halaman lain, dan Kembali.

Sekali lagi, konsol menunjukkan bahwa cakupan pekerja layanan sekarang adalah http://localhost:8081/below/, dan mencatat peristiwa pengambilan hanya untuk another.html, another.css, dan another.js.

Penjelasan

Cakupan arbitrer dapat ditetapkan dengan meneruskan parameter tambahan saat mendaftar, misalnya:

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/kitten/'
});

Pada contoh di atas, cakupan pekerja layanan ditetapkan ke /kitten/. Pekerja layanan mencegat permintaan dari halaman di /kitten/ dan /kitten/lower/, tetapi tidak dari halaman seperti /kitten atau /.

Catatan: Anda tidak dapat menetapkan cakupan arbitrer yang berada di atas lokasi sebenarnya pekerja layanan. Namun, jika pekerja layanan Anda aktif di klien yang ditayangkan dengan header Service-Worker-Allowed, Anda dapat menentukan cakupan maksimal untuk pekerja layanan tersebut di atas lokasi pekerja layanan.

Untuk informasi selengkapnya

Kode solusi

Untuk mendapatkan salinan kode yang berfungsi, buka folder solution/.

Sekarang Anda memiliki pekerja layanan sederhana yang sudah berjalan dan memahami siklus proses pekerja layanan.

Untuk informasi selengkapnya

Siklus proses pekerja layanan

Untuk melihat semua codelab dalam kursus pelatihan PWA, lihat codelab Selamat datang untuk kursus ini.