Dalam codelab ini, Anda akan menggunakan fitur dasar Notifications API untuk:
- Meminta izin untuk mengirim notifikasi
- Kirim notifikasi
- Bereksperimen dengan opsi notifikasi
Remix aplikasi contoh dan lihat di tab baru
Notifikasi otomatis diblokir dari aplikasi Glitch tersemat, sehingga Anda tidak akan dapat melihat pratinjau aplikasi di halaman ini. Sebagai gantinya, berikut ini yang harus dilakukan:
- Klik Remix untuk Mengedit agar project dapat diedit.
- Untuk melihat pratinjau situs, tekan View App. Lalu tekan
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 awal dan kodenya
Mulai dengan memeriksa aplikasi aktif di tab Chrome yang baru:
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 apa artinya, jangan khawatir; semua akan segera terungkap!
Klik tombol di aplikasi aktif: Minta izin untuk mengirim notifikasi dan Kirim notifikasi.
Konsol mencetak pesan "TODO" dari beberapa stub fungsi:
requestPermission
dansendNotification
. Berikut adalah fungsi yang akan Anda terapkan dalam codelab ini.
Sekarang, mari kita lihat kode aplikasi contoh di Glitch tersemat di halaman ini.
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 dalam log 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 izindefault
, situs harus meminta dan diberi izin sebelum dapat mengirimkan notifikasi.Fungsi
requestPermission
adalah stub:// Use the Notification API to request permission to send notifications. function requestPermission() { console.log('TODO: Implement requestPermission()'); }
Anda akan mengimplementasikan 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 mengimplementasikan fungsi ini setelah mengimplementasikan
requestPermission
.Pemroses peristiwa
window.onload
memanggil fungsishowPermission
saat pemuatan halaman, yang 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.
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); }); }
Muat ulang tab Chrome tempat Anda melihat aplikasi live.
Di antarmuka aplikasi live, klik Minta izin untuk mengirim notifikasi. Jendela pop-up akan muncul.
Pengguna dapat membuat satu dari tiga respons terhadap pop-up izin.
Respons pengguna | Status izin notifikasi |
---|---|
Pengguna memilih Izinkan | granted |
Pengguna memilih Blokir | denied |
Pengguna menolak pop-up tanpa menentukan pilihan | default |
Jika pengguna mengklik Izinkan:
Notification.permission
disetel kegranted
.Situs dapat menampilkan notifikasi.
Panggilan berikutnya ke
Notification.requestPermission
akan di-resolve menjadigranted
tanpa pop-up.
Jika pengguna mengklik Blokir:
Notification.permission
disetel kedenied
.Situs tidak dapat menampilkan notifikasi kepada pengguna.
Panggilan berikutnya ke
Notification.requestPermission
akan di-resolve menjadidenied
tanpa pop-up.
Jika pengguna menutup pop-up:
Notification.permission
tetapdefault
.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, dan menyetel
Notification.permission
kedenied
. Pop-up atau notifikasi permintaan izin 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 mengetahui apa yang sedang terjadi.
Mengirim notifikasi
Pada langkah ini, Anda akan mengirim notifikasi kepada pengguna.
Anda akan menggunakan konstruktor Notification
untuk membuat notifikasi baru dan mencoba menampilkannya.
Jika status izin adalah granted
, notifikasi Anda akan ditampilkan.
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
danoptions
.options
adalah objek dengan properti yang mewakili setelan visual dan data yang dapat Anda sertakan dalam notifikasi. Lihat dokumentasi MN tentang parameter notifikasi untuk informasi lebih lanjut.Muat ulang tab Chrome tempat Anda melihat aplikasi live, lalu klik tombol Kirim notifikasi. Notifikasi dengan teks
Test body
akan muncul.
Apa yang terjadi saat Anda mengirim notifikasi tanpa izin?
Di langkah ini, Anda akan menambahkan beberapa baris kode yang memungkinkan Anda melihat apa yang terjadi saat Anda mencoba menampilkan notifikasi tanpa izin pengguna.
- Pada
public/index.js
, di akhir fungsisendNotification
, tentukan pengendali peristiwaonerror
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:
Klik ikon gembok di samping kolom URL Chrome dan reset setelan izin notifikasi situs ke default-nya.
Klik Minta izin untuk mengirim notifikasi, lalu pilih Blokir dari pop-up.
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
Anda kini telah membahas dasar-dasar cara meminta izin dan mengirim notifikasi. Anda juga telah melihat apa dampak respons pengguna terhadap kemampuan aplikasi untuk menampilkan notifikasi.
Sekarang Anda dapat bereksperimen dengan berbagai opsi visual dan data yang tersedia saat membuat notifikasi. Rangkaian lengkap opsi yang tersedia ada di bawah. (Lihat Dokumentasi notifikasi di MDN untuk mengetahui informasi selengkapnya tentang opsi ini.)
Perhatikan bahwa browser dan perangkat mengimplementasikan opsi ini secara berbeda, jadi ada baiknya menguji notifikasi Anda pada 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 milik Peter Beverloo untuk mengetahui ide lainnya.
Jika Anda mengalami masalah, berikut kode yang sudah selesai untuk codelab ini: glitch.com/edit/#!/codelab-notifications-get-started-completed
Lihat codelab berikutnya dalam seri ini, Menangani notifikasi dengan pekerja layanan, untuk mempelajari lebih lanjut.