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 terbiasa dengan pekerja layanan dan dasar-dasar permintaan izin notifikasi dan pengiriman notifikasi. Jika Anda perlu mengingat kembali tentang notifikasi, lihat Memulai Notifications API codelab. Untuk mempelajari pekerja layanan lebih lanjut, lihat Pengantar pekerja layanan dari Matt Gaunt.

Me-remix aplikasi contoh dan melihatnya di tab baru

Notifikasi diblokir secara otomatis dari aplikasi Glitch yang disematkan, sehingga Anda tidak akan dapat melihat pratinjau aplikasi di halaman ini. Sebagai gantinya, berikut ini hal yang harus dilakukan:

  1. Klik Remix to Edit agar project dapat diedit.
  2. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh layar penuh.

Glitch akan terbuka di tab Chrome baru.

Saat Anda mengerjakan codelab ini, buat perubahan pada kode di Glitch yang disematkan di halaman ini. Muat ulang tab baru dengan aplikasi yang sudah aktif untuk melihat perubahan.

Memahami aplikasi contoh dan kode awal

Mulailah dengan melihat aplikasi aktif di tab Chrome yang 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 yang sudah tersedia, 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 di Glitch yang disematkan di halaman ini.

  1. Di Glitch yang disematkan, lihat public/index.js:

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

    • Fungsi requestPermission meminta izin pengguna untuk mengirim notifikasi. Jika Anda melakukan codelab Memulai Notifications API, Anda akan melihat bahwa fungsi requestPermission digunakan di sini. Satu-satunya perbedaan adalah API ini kini 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 akan menunggu hingga halaman dimuat, lalu melakukan inisialisasi.

  2. Di Glitch yang disematkan, buka public/service-worker.js.

    Seperti namanya, Anda akan menambahkan kode ke aplikasi untuk mendaftarkan file ini sebagai pekerja layanan.

    Meskipun file ini belum digunakan oleh aplikasi, file ini 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 menjalankan saat pengguna mengklik Register service worker di UI aplikasi. Kode ini akan mendaftarkan public/service-worker.js sebagai pekerja layanan.

  1. Di editor Glitch tersemat, 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 mempermudah penanganan promise. Hal ini memungkinkan Anda melakukan await nilai Promise yang di-resolve. 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 pekerja layanan, Anda bisa mendapatkan referensi ke objek pendaftaran pekerja layanan. 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 API Pekerja Layanan untuk mendapatkan pendaftaran pekerja layanan saat ini, jika ada. Cara ini memudahkan penambahan referensi ke pendaftaran pekerja layanan.

  • 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();
}

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

Mengirim notifikasi ke pekerja layanan

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

Di editor Glitch tersemat, 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.');
    }
  }
}

Inilah yang dilakukan kode tersebut:

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

  • Metode postMessage pekerja layanan mengirim data dari aplikasi ke pekerja layanan. Lihat dokumentasi MMD tentang postMessage untuk 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 paksa (Shift+Muat ulang). Lihat dokumentasi pengontrol ServiceWorker di MDN untuk informasi selengkapnya.

Menangani notifikasi di pekerja layanan

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

Di editor Glitch tersemat, 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 pekerja layanan itu sendiri.

  • Meskipun pekerja layanan 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 sedikit lebih halus.

Jika Anda mengalami kesulitan, lihat glitch.com/edit/#!/codelab-notifications-service-worker-completed untuk kode yang sudah selesai.

Buka codelab berikutnya dalam seri ini: Membangun server notifikasi push.