Memulai Notifications API

Dalam codelab ini, Anda akan menggunakan fitur dasar Notifications API untuk:

• Meminta izin untuk mengirim notifikasi
• Mengirim notifikasi
• Bereksperimen dengan opsi notifikasi

Memahami aplikasi awal dan kodenya

Mulai dengan memeriksa aplikasi aktif di tab Chrome baru:

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

   Anda akan melihat pesan berikut di Konsol:

   Notification permission is default
   

   Jika Anda tidak tahu artinya, jangan khawatir; semuanya akan segera terungkap.

2. Klik tombol di aplikasi aktif: Minta izin untuk mengirim notifikasi dan Kirim notifikasi.

   Konsol mencetak pesan "TODO" dari beberapa stub fungsi: requestPermission dan sendNotification. Berikut adalah fungsi yang akan Anda terapkan dalam codelab ini.

Sekarang, mari kita lihat kode aplikasi contoh. Buka public/index.js dan lihat beberapa bagian penting dari kode yang ada:

• Fungsi showPermission menggunakan Notifications API untuk mendapatkan status izin situs saat ini dan mencatatnya ke konsol:

  // Print current permission state to console;
  // update onscreen message.
  function showPermission() {
    let permission = Notification.permission;
    console.log('Notification permission is ' + permission);
    let p = document.getElementById('permission');
    p.textContent = 'Notification permission is ' + permission;
  }
  

  Sebelum meminta izin, status izin adalah default. Dalam status izin default, situs harus meminta dan diberi izin sebelum dapat mengirim notifikasi.

• Fungsi requestPermission adalah stub:

  // Use the Notification API to request permission to send notifications.
  function requestPermission() {
    console.log('TODO: Implement requestPermission()');
  }
  

  Anda akan menerapkan fungsi ini di langkah berikutnya.

• Fungsi sendNotification adalah stub:

  // Use the Notification constructor to create and send a new Notification.
  function sendNotification() {
    console.log('TODO: Implement sendNotification()');
  }
  

  Anda akan menerapkan fungsi ini setelah menerapkan requestPermission.

• Listener peristiwa window.onload memanggil fungsi showPermission saat pemuatan halaman, menampilkan status izin saat ini di konsol dan di halaman:

  window.onload = () => { showPermission(); };
  

Meminta izin untuk mengirim notifikasi

Pada langkah ini, Anda akan menambahkan fungsi untuk meminta izin pengguna untuk mengirim notifikasi.

Anda akan menggunakan metode Notification.requestPermission() untuk memicu pop-up yang meminta pengguna mengizinkan atau memblokir notifikasi dari situs Anda.

1. Ganti stub fungsi requestPermission di public/index.js dengan kode berikut:

   // Use the Notification API to request permission to send notifications.
   function requestPermission() {
     Notification.requestPermission()
       .then((permission) => {
         console.log('Promise resolved: ' + permission);
         showPermission();
       })
       .catch((error) => {
         console.log('Promise was rejected');
         console.log(error);
       });
   }
   

2. Muat ulang tab Chrome tempat Anda melihat aplikasi live.

3. Di antarmuka aplikasi aktif, klik Minta izin untuk mengirim notifikasi. Jendela pop-up akan muncul.

Pengguna dapat memberikan salah satu dari tiga respons terhadap pop-up izin.

Jika pengguna mengklik Izinkan:

• Notification.permission disetel ke granted.

• Situs akan dapat menampilkan notifikasi.

• Panggilan berikutnya ke Notification.requestPermission akan diselesaikan ke granted tanpa pop-up.

Jika pengguna mengklik Blokir:

• Notification.permission disetel ke denied.

• Situs tidak akan dapat menampilkan notifikasi kepada pengguna.

• Panggilan berikutnya ke Notification.requestPermission akan diselesaikan ke denied tanpa pop-up.

Jika pengguna menutup pop-up:

• Notification.permission tetap default.

• Situs tidak akan dapat menampilkan notifikasi kepada pengguna.

• Panggilan berikutnya ke Notification.requestPermission akan menghasilkan lebih banyak pop-up.

  Namun, jika pengguna terus menutup pop-up, browser mungkin memblokir situs tersebut, menyetel Notification.permission ke denied. Pop-up permintaan izin maupun notifikasi tidak dapat ditampilkan kepada pengguna.

  Pada saat penulisan, perilaku browser sebagai respons terhadap pop-up izin notifikasi yang ditutup masih dapat berubah. Cara terbaik untuk menangani hal ini adalah dengan selalu meminta izin notifikasi sebagai respons terhadap beberapa interaksi yang telah dimulai pengguna sehingga mereka mengharapkannya dan tahu apa yang terjadi.

Mengirim notifikasi

Pada langkah ini, Anda akan mengirimkan notifikasi kepada pengguna.

Anda akan menggunakan konstruktor Notification untuk membuat notifikasi baru dan mencoba menampilkannya. Jika status izin adalah granted, notifikasi Anda akan ditampilkan.

1. Ganti stub fungsi sendNotification di index.js dengan kode berikut:

   // Use the Notification constructor to create and send a new Notification.
   function sendNotification() {
     let title = 'Test';
     let options = {
       body: 'Test body',
       // Other options can go here
     };
     console.log('Creating new notification');
     let notification = new Notification(title, options);
   }
   

   Konstruktor Notification menggunakan dua parameter: title dan options. options adalah objek dengan properti yang merepresentasikan setelan visual dan data yang dapat Anda sertakan dalam notifikasi. Lihat dokumentasi MDN tentang parameter notifikasi untuk mengetahui informasi selengkapnya.

2. Muat ulang tab Chrome tempat Anda melihat aplikasi aktif dan klik tombol Kirim notifikasi. Notifikasi dengan teks Test body akan muncul.

Apa yang terjadi jika Anda mengirim notifikasi tanpa izin?

Pada langkah ini, Anda akan menambahkan beberapa baris kode yang akan memungkinkan Anda melihat apa yang terjadi saat Anda mencoba menampilkan notifikasi tanpa izin pengguna.

• Di public/index.js, di akhir fungsi sendNotification, tentukan pengendali peristiwa onerror notifikasi baru:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

Untuk mengamati error izin notifikasi:

1. Klik ikon gembok di samping kolom URL Chrome dan reset setelan izin notifikasi situs ke default.

2. Klik Minta izin untuk mengirim notifikasi, lalu pilih Blokir dari pop-up.

3. Klik Kirim notifikasi dan lihat apa yang terjadi. Teks error (Could not send notification) dan objek peristiwa dicatat ke konsol.

Secara opsional, reset izin notifikasi situs lagi. Anda dapat mencoba meminta izin dan menutup pop-up beberapa kali untuk melihat apa yang terjadi.

Bereksperimen dengan opsi notifikasi

Sekarang Anda telah mempelajari dasar-dasar cara meminta izin dan mengirim notifikasi. Anda juga telah melihat dampak respons pengguna terhadap kemampuan aplikasi Anda untuk menampilkan notifikasi.

Sekarang Anda dapat bereksperimen dengan berbagai opsi visual dan data yang tersedia saat membuat notifikasi. Set lengkap opsi yang tersedia ada di bawah. (Lihat dokumentasi Notifikasi di MDN untuk mengetahui informasi selengkapnya tentang opsi ini.)

Perhatikan bahwa browser dan perangkat menerapkan opsi ini secara berbeda, jadi sebaiknya uji notifikasi Anda di berbagai platform untuk melihat tampilannya.

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

Lihat Generator Notifikasi Peter Beverloo untuk mendapatkan ide lainnya.

Lihat codelab berikutnya dalam seri ini, Menangani notifikasi dengan pekerja layanan, untuk mempelajari lebih lanjut.