Menggunakan Service Worker untuk mengelola notifikasi

Kate Jeffreys
Kate Jeffreys

Dalam codelab ini, Anda akan menggunakan pekerja layanan untuk mengelola notifikasi. Petunjuk di sini mengasumsikan bahwa Anda sudah memahami pekerja layanan dan dasar-dasar meminta izin notifikasi dan mengirim notifikasi. Jika Anda perlu mengingat kembali notifikasi, lihat codelab Mulai menggunakan Notifications API. Untuk mempelajari lebih lanjut pekerja layanan, lihat Pengantar pekerja layanan Matt Gaunt.

Memahami aplikasi contoh dan kode awal

Mulai dengan melihat aplikasi aktif di tab Chrome baru:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.

  2. Klik tab Konsol.

  3. Pastikan opsi Info dipilih di dropdown Levels di samping kotak Filter.

  4. Di konsol DevTools untuk aplikasi aktif, Anda akan melihat pesan konsol:

    TODO: Implement getRegistration().

    Ini adalah pesan dari stub fungsi yang akan Anda terapkan dalam codelab ini.

Sekarang, mari kita lihat kode aplikasi contoh.

  1. Lihat public/index.js:

    • Ada empat stub untuk fungsi yang akan Anda terapkan: registerServiceWorker, getRegistration, unRegisterServiceWorker, dan sendNotification.

    • Fungsi requestPermission meminta izin pengguna untuk mengirim notifikasi. Jika Anda telah menyelesaikan codelab Memulai Notifications API, Anda akan melihat bahwa fungsi requestPermission-nya digunakan di sini. Satu-satunya perbedaan adalah bahwa sekarang juga memperbarui antarmuka pengguna setelah menyelesaikan permintaan izin.

    • Fungsi updateUI memuat ulang semua tombol dan pesan aplikasi.

    • Fungsi initializePage melakukan deteksi fitur untuk kemampuan pekerja layanan di browser dan mengupdate antarmuka pengguna aplikasi.

    • Skrip menunggu hingga halaman dimuat, lalu melakukan inisialisasi.

  2. Buka public/service-worker.js.

    Seperti namanya, Anda akan menambahkan kode ke aplikasi untuk mendaftarkan file ini sebagai service worker.

    Meskipun belum digunakan oleh aplikasi, file tersebut berisi beberapa kode awal yang akan mencetak pesan ke konsol saat pekerja layanan diaktifkan.

    Anda akan menambahkan kode ke public/service-worker.js untuk menangani notifikasi saat pekerja layanan menerimanya.

Mendaftarkan pekerja layanan

Pada langkah ini, Anda akan menulis kode yang berjalan saat pengguna mengklik Register service worker di UI aplikasi. Kode ini akan mendaftarkan public/service-worker.js sebagai pekerja layanan.

  1. Buka public/index.js. Ganti fungsi registerServiceWorker dengan kode berikut:

    // Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
  await navigator.serviceWorker.register('./service-worker.js')
  updateUI();
}

    Perhatikan bahwa registerServiceWorker menggunakan deklarasi async function untuk membuat penanganan promise lebih mudah. Hal ini memungkinkan Anda await nilai yang telah diselesaikan dari Promise. Misalnya, fungsi di atas menunggu hasil pendaftaran pekerja layanan sebelum mengupdate UI. Lihat await di MDN untuk mengetahui informasi selengkapnya.

  2. Setelah pengguna dapat mendaftarkan service worker, Anda bisa mendapatkan referensi ke objek pendaftaran service worker. Di public/index.js, ganti fungsi getRegistration dengan kode berikut:

    // Get the current service worker registration.
function getRegistration() {
  return navigator.serviceWorker.getRegistration();
}

    Fungsi di atas menggunakan Service Worker API untuk mendapatkan pendaftaran pekerja layanan saat ini, jika ada. Hal ini membuat perolehan referensi ke pendaftaran pekerja layanan menjadi lebih mudah.

  • Untuk menyelesaikan fungsi pendaftaran pekerja layanan, tambahkan kode untuk membatalkan pendaftaran pekerja layanan. Ganti fungsi unRegisterServiceWorker dengan kode berikut:

    // Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Await the outcome of the unregistration attempt
  // so that the UI update is not superceded by a
  // returning Promise.
  await registration.unregister();
  updateUI();
}

Di tab tempat Anda melihat aplikasi aktif, muat ulang halaman. Tombol Daftarkan pekerja layanan dan Batalkan pendaftaran pekerja layanan seharusnya sudah berfungsi.

Mengirim notifikasi ke pekerja layanan

Pada langkah ini, Anda akan menulis kode yang akan berjalan saat pengguna mengklik Kirim notifikasi di UI aplikasi. Kode ini akan membuat notifikasi, memeriksa apakah pekerja layanan terdaftar, lalu mengirim notifikasi ke pekerja layanan menggunakan metode postMessage.

Buka public/index.js dan ganti fungsi sendNotification dengan kode berikut:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

Berikut fungsi kode tersebut:

  • sendNotification adalah fungsi asinkron, jadi Anda dapat menggunakan await untuk mendapatkan referensi ke pendaftaran pekerja layanan.

  • Metode postMessage service worker mengirim data dari aplikasi ke service worker. Lihat dokumentasi MDN tentang postMessage untuk mengetahui informasi selengkapnya.

  • Kode memeriksa keberadaan properti navigator.serviceWorker.controller sebelum mencoba mengakses fungsi postMessage. navigator.serviceWorker.controller akan menjadi null jika tidak ada pekerja layanan yang aktif, atau jika halaman telah dimuat ulang secara paksa (Shift+Muat Ulang). Lihat dokumentasi pengontrol ServiceWorker di MDN untuk mengetahui informasi selengkapnya.

Menangani notifikasi di pekerja layanan

Pada langkah ini, Anda akan menulis kode di pekerja layanan yang akan menangani pesan yang diposting ke pekerja layanan dan menampilkan notifikasi kepada pengguna.

Buka public/service-worker.js. Tambahkan kode berikut ke bagian akhir file:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

Berikut penjelasan singkatnya:

  • self adalah referensi ke service worker itu sendiri.

  • Meskipun service worker kini menangani tampilan notifikasi, UI aplikasi utama masih bertanggung jawab untuk mendapatkan izin notifikasi dari pengguna. Jika izin tidak diberikan, promise yang ditampilkan oleh showNotification akan ditolak. Kode di atas menggunakan blok catch untuk menghindari error penolakan Promise yang tidak tertangkap dan menangani error ini dengan lebih lancar.

Lanjutkan ke codelab berikutnya dalam seri ini: Membangun server notifikasi push.