Codelab: Membuat klien notifikasi push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Codelab ini menunjukkan kepada Anda, langkah demi langkah, cara membuat klien notifikasi push. Di akhir codelab ini, Anda akan memiliki klien yang:

  • Mendaftarkan pengguna untuk menerima notifikasi push.
  • Menerima pesan push dan menampilkannya sebagai notifikasi.
  • Membatalkan langganan pengguna dari notifikasi push.

Codelab ini berfokus untuk membantu Anda belajar sambil melakukan dan tidak banyak membahas konsep. Baca Cara kerja push untuk mempelajari konsep notifikasi push.

Kode server codelab ini sudah selesai. Anda hanya akan mengimplementasikan klien dalam codelab ini. Untuk mempelajari cara menerapkan server notifikasi push, lihat Codelab: Membangun server notifikasi push.

Kompatibilitas browser

Codelab ini diketahui berfungsi dengan kombinasi sistem operasi dan browser berikut:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

Codelab ini diketahui tidak berfungsi dengan sistem operasi berikut (atau kombinasi sistem operasi dan browser):

  • macOS: Brave, Edge, Safari
  • iOS

Penyiapan

Menyiapkan autentikasi

Sebelum dapat mengaktifkan notifikasi push, Anda perlu menyiapkan server dan klien dengan kunci autentikasi. Lihat Menandatangani permintaan protokol push web untuk mempelajari alasannya. Biasanya, Anda menyimpan secret dalam file .env, seperti ini.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Buka public/index.js.
  2. Ganti VAPID_PUBLIC_KEY_VALUE_HERE dengan nilai kunci publik Anda.

Mendaftarkan pekerja layanan

Klien Anda memerlukan pekerja layanan untuk menerima dan menampilkan notifikasi. Sebaiknya daftarkan pekerja layanan sesegera mungkin. Lihat Menerima dan menampilkan pesan push sebagai notifikasi untuk mengetahui konteks selengkapnya.

  1. Ganti komentar // TODO add startup logic here dengan kode berikut:

    if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

  2. Di Chrome, Buka Konsol DevTools.

  3. Anda akan melihat pesan Service worker was registered. dicatat ke dalam log di Konsol.

Meminta izin notifikasi push

Anda tidak boleh meminta izin untuk mengirim notifikasi push saat pemuatan halaman. Sebagai gantinya, UI Anda harus menanyakan kepada pengguna apakah mereka ingin menerima notifikasi push. Setelah mereka mengonfirmasi secara eksplisit (misalnya, dengan mengklik tombol), Anda dapat memulai proses formal untuk mendapatkan izin notifikasi push dari browser.

  1. Di public/index.js, ganti komentar // TODO di subscribeButtonHandler() dengan kode berikut:

    // Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

  2. Kembali ke tab aplikasi, lalu klik Subscribe to push. Browser atau sistem operasi Anda akan menanyakan apakah Anda ingin mengizinkan situs mengirimkan notifikasi push kepada Anda.

  3. Pilih Izinkan (atau frasa setara yang digunakan oleh browser atau sistem operasi Anda). Di Konsol, Anda akan melihat pesan yang menunjukkan apakah permintaan diterima atau ditolak.

Berlangganan notifikasi push

Proses langganan melibatkan interaksi dengan layanan web yang dikontrol oleh vendor browser yang disebut layanan push. Setelah mendapatkan informasi langganan notifikasi push, Anda harus mengirimkannya ke server dan meminta server menyimpannya dalam database untuk jangka panjang.

  1. Tambahkan kode yang ditandai berikut ke subscribeButtonHandler():

    subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

Opsi userVisibleOnly harus berupa true. Suatu hari nanti, mungkin saja pesan dapat dikirim tanpa menampilkan notifikasi yang terlihat oleh pengguna (push senyap), tetapi browser tidak mengizinkan kemampuan tersebut, karena masalah privasi.

Nilai applicationServerKey bergantung pada fungsi utilitas yang mengonversi string base64 menjadi Uint8Array. Nilai ini digunakan untuk autentikasi antara server Anda dan layanan push.

Berhenti berlangganan notifikasi push

Setelah pengguna berlangganan notifikasi push, UI Anda harus menyediakan cara untuk berhenti berlangganan jika pengguna berubah pikiran dan tidak ingin lagi menerima notifikasi push.

  • Ganti komentar // TODO di unsubscribeButtonHandler() dengan kode berikut:
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Menerima pesan push dan menampilkannya sebagai notifikasi

Seperti yang disebutkan sebelumnya, Anda memerlukan pekerja layanan untuk menangani penerimaan dan tampilan pesan yang dikirim ke klien dari server Anda. Lihat Menerima dan menampilkan pesan push sebagai notifikasi untuk mengetahui detail selengkapnya.

  1. Buka public/service-worker.js dan ganti komentar // TODO di pengendali peristiwa push pekerja layanan dengan kode berikut:

    let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title,
  options
);

  2. Kembali ke tab aplikasi.

  3. Klik Beri tahu saya. Anda akan menerima notifikasi push.

  4. Buka URL tab aplikasi Anda di browser lain yang didukung. Ikuti alur kerja langganan, lalu klik Notify all. Anda akan menerima notifikasi push yang sama di setiap perangkat.

Anda dapat menyesuaikan notifikasi dengan berbagai cara. Lihat parameter ServiceWorkerRegistration.showNotification() untuk mempelajari lebih lanjut.

Membuka URL saat pengguna mengklik notifikasi

Di dunia nyata, Anda mungkin akan menggunakan notifikasi sebagai cara untuk berinteraksi kembali dengan pengguna dan meminta mereka mengunjungi situs Anda. Untuk melakukannya, Anda perlu mengonfigurasi pekerja layanan sedikit lebih banyak.

  1. Ganti komentar // TODO di pengendali peristiwa notificationclick service worker dengan kode berikut:

    event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. Kembali ke tab aplikasi, kirim notifikasi lain ke diri Anda sendiri, lalu klik notifikasi tersebut. Browser Anda akan membuka tab baru dan memuat https://web.dev.

Langkah berikutnya