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 serta mengirim notifikasi. Jika Anda memerlukan pengingat tentang notifikasi, lihat codelab Memulai Notifications API. Untuk mempelajari pekerja layanan lebih lanjut, lihat Pengantar pekerja layanan dari Matt Gaunt.

Membuat remix aplikasi contoh dan melihatnya di tab baru

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

  1. Klik Remix to Edit untuk membuat project dapat diedit.
  2. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.

Glitch akan terbuka di tab Chrome baru.

Saat Anda mengerjakan codelab ini, buat perubahan pada kode di Glitch tersemat di halaman ini. Muat ulang tab baru dengan aplikasi live Anda untuk melihat perubahan.

Memahami aplikasi contoh dan kode awal

Mulai dengan melihat aplikasi live 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 live, 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 tersemat, 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 telah menyelesaikan codelab Memulai Notifications API, Anda akan melihat bahwa fungsi requestPermission-nya digunakan di sini. Satu-satunya perbedaan adalah sekarang juga memperbarui antarmuka pengguna setelah me-resolve permintaan izin.

    • Fungsi updateUI memuat ulang semua tombol dan pesan aplikasi.

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

    • Skrip menunggu hingga halaman dimuat, lalu melakukan inisialisasi.

  2. Di Glitch tersemat, 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 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 berjalan 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 await nilai yang di-resolve 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 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 Service Worker API untuk mendapatkan pendaftaran pekerja layanan saat ini, jika ada. Hal ini membuat mendapatkan referensi ke pendaftaran pekerja layanan menjadi sedikit 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 live, muat ulang halaman. Tombol Register service worker dan Unregister service worker sekarang seharusnya 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-nya.

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.');
    }
  }
}

Berikut fungsi 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 MDN 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 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 dalamnya 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 service worker 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 pemblokiran catch untuk menghindari error penolakan Promise yang tidak tertangkap dan menangani error ini dengan lebih baik.

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

Lanjutkan ke codelab berikutnya dalam seri ini: Mem-build server notifikasi push.