Codelab: Membuat klien notifikasi push

Kate Jeffreys

Kayce Basques

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

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

• Membuat pengguna berlangganan notifikasi push.
• Menerima pesan push dan menampilkannya sebagai notifikasi.
• Membatalkan langganan pengguna dari notifikasi push.

Codelab ini berfokus untuk membantu Anda belajar dengan melakukan dan tidak membahas konsep secara mendalam. Lihat artikel Bagaimana cara kerja notifikasi push? untuk mempelajari konsep notifikasi push.

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

Lihat push-notifications-client-codelab-complete (source) untuk melihat kode lengkapnya.

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

Mendapatkan salinan kode yang dapat diedit

Editor kode yang Anda lihat di sebelah kanan petunjuk ini akan disebut UI Glitch di seluruh codelab ini.

1. Klik Remix to Edit untuk membuat project dapat diedit.

Jika Anda berada di jendela samaran atau tamu Chrome, Anda mungkin mengalami masalah saat menyelesaikan codelab. Sebaiknya gunakan profil yang login.

Menyiapkan autentikasi

Sebelum dapat membuat notifikasi push berfungsi, Anda perlu menyiapkan server dan klien dengan kunci autentikasi. Lihat Menandatangani permintaan protokol push web untuk mempelajari alasannya.

1. Di UI Glitch, klik Tools, lalu klik Terminal untuk membuka Terminal Glitch.
2. Di Terminal Glitch, jalankan npx web-push generate-vapid-keys. Salin kunci pribadi dan nilai kunci publik.
3. Di UI Glitch, buka .env dan perbarui VAPID_PUBLIC_KEY dan VAPID_PRIVATE_KEY. Tetapkan VAPID_SUBJECT ke mailto:[e-mail]. Semua nilai ini harus diapit tanda petik ganda. Setelah melakukan update, file .env Anda akan terlihat seperti ini:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Tutup Terminal Glitch.

Nilai variabel lingkungan (hal-hal di .env) bersifat unik untuk satu project Glitch. Jika Anda me-remix project, nilai di .env tidak akan disalin.

1. Buka public/index.js.
2. Ganti VAPID_PUBLIC_KEY_VALUE_HERE dengan nilai kunci publik Anda.

Mendaftarkan pekerja layanan

Klien Anda pada akhirnya akan memerlukan pekerja layanan untuk menerima dan menampilkan notifikasi. Sebaiknya daftarkan pekerja layanan sedini mungkin. Lihat Menerima dan menampilkan pesan yang dikirim sebagai notifikasi untuk konteks selengkapnya.

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

// TODO add startup logic here
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);

1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .

Istilah penting: Tab yang baru saja Anda buka akan disebut sebagai tab aplikasi di seluruh codelab ini.

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Konsol. Anda akan melihat pesan Service worker was registered. yang dicatat ke Konsol.

Catatan: Petunjuk sebelumnya mengasumsikan bahwa Anda menggunakan Google Chrome dan Chrome DevTools.

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 pengguna mengonfirmasi secara eksplisit (misalnya dengan mengklik tombol), Anda dapat memulai proses formal untuk mendapatkan izin notifikasi push dari browser.

1. Di UI Glitch, klik View Source untuk kembali ke kode Anda.
2. Di public/index.js, ganti komentar // TODO di subscribeButtonHandler() dengan kode berikut:

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

1. Kembali ke tab aplikasi, lalu klik Berlangganan untuk push. Browser atau sistem operasi Anda mungkin akan menanyakan apakah Anda ingin mengizinkan situs mengirim notifikasi push kepada Anda. Klik Izinkan (atau frasa yang setara yang digunakan browser/OS Anda). Di Konsol, Anda akan melihat pesan yang menunjukkan apakah permintaan disetujui atau ditolak.

Jika Anda berada di jendela samaran atau tamu, browser Anda mungkin menolak permintaan tersebut secara otomatis. Perhatikan UI browser yang menunjukkan bahwa permintaan diblokir secara otomatis.

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 dalam jangka panjang. Lihat Membuat klien berlangganan notifikasi push untuk mengetahui konteks selengkapnya tentang proses langganan.

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 true. Suatu hari nanti, mungkin saja pesan push dapat dikirim tanpa menampilkan notifikasi yang terlihat pengguna (push senyap), tetapi browser saat ini 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.

1. Ganti komentar // TODO di unsubscribeButtonHandler() dengan kode berikut:

// TODO
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 telah disebutkan sebelumnya, Anda memerlukan pekerja layanan untuk menangani penerimaan dan tampilan pesan yang didorong ke klien dari server Anda. Lihat Menerima dan menampilkan pesan yang dikirim 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:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. Kembali ke tab aplikasi.
2. Klik Beri tahu saya. Anda akan menerima notifikasi push.
3. Coba buka URL tab aplikasi Anda di browser lain (atau bahkan perangkat lain), ikuti alur kerja langganan, lalu klik Beri tahu semua. Anda akan menerima notifikasi push yang sama di semua browser yang Anda subscribe. Lihat kembali Kompatibilitas browser untuk melihat daftar kombinasi browser/OS yang diketahui berfungsi atau tidak berfungsi.

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

Panggilan ke self.skipWaiting() di pemroses install pekerja layanan Anda penting untuk dipahami. Lihat Lewati fase menunggu untuk mengetahui penjelasannya. Tanpanya, perubahan kode yang Anda buat pada pekerja layanan tidak akan segera berlaku. Anda mungkin ingin atau tidak ingin menggunakan fitur ini di situs Anda sendiri, bergantung pada kebutuhan Anda. Namun, Anda harus memahami pengaruhnya.

Membuka URL saat pengguna mengklik notifikasi

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

1. Ganti komentar // TODO di pengendali peristiwa notificationclick pekerja layanan dengan kode berikut:

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

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

Langkah berikutnya

• Lihat ServiceWorkerRegistration.showNotification() untuk menemukan berbagai cara menyesuaikan notifikasi.
• Baca Ringkasan notifikasi push untuk mendapatkan pemahaman konseptual yang lebih mendalam tentang cara kerja notifikasi push.
• Lihat Codelab: Membuat server notifikasi push untuk mempelajari cara membuat server yang mengelola langganan dan mengirim permintaan protokol push web.
• Coba Notification Generator untuk menguji semua cara menyesuaikan notifikasi.