Codelab: Membuat server notifikasi push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

  • Melacak langganan notifikasi push (yaitu, server membuat rekaman database baru saat klien memilih untuk menerima notifikasi push, dan menghapus rekaman database yang ada saat klien memilih untuk tidak menerima notifikasi push)
  • Mengirim notifikasi push ke satu klien
  • Mengirim notifikasi push ke semua klien yang berlangganan

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

Kode klien codelab ini sudah selesai. Anda hanya akan menerapkan server dalam codelab ini. Untuk mempelajari cara mengimplementasikan klien notifikasi push, lihat Codelab: Membangun klien 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

Stack aplikasi

  • Server dibangun di atas Express.js.
  • Library Node.js web-push menangani semua logika notifikasi push.
  • Data langganan ditulis ke file JSON menggunakan lowdb.

Anda tidak harus menggunakan teknologi ini untuk menerapkan notifikasi push. Kami memilih teknologi ini karena memberikan pengalaman codelab yang andal.

Penyiapan

Menyiapkan autentikasi

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

  1. Buka terminal.
  2. Di terminal, jalankan npx web-push generate-vapid-keys. Salin nilai kunci pribadi dan kunci publik.
  3. Buka .env dan perbarui VAPID_PUBLIC_KEY serta VAPID_PRIVATE_KEY. Tetapkan VAPID_SUBJECT ke mailto:[email protected]. Semua nilai ini harus diapit dengan tanda petik ganda. Setelah melakukan pembaruan, file .env Anda akan terlihat seperti ini:
VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  1. Buka public/index.js.
  2. Ganti VAPID_PUBLIC_KEY_VALUE_HERE dengan nilai kunci publik Anda.

Kelola langganan

Klien Anda menangani sebagian besar proses langganan. Hal utama yang perlu dilakukan server Anda adalah menyimpan langganan notifikasi push baru dan menghapus langganan lama. Langganan ini memungkinkan Anda mendorong pesan ke klien di masa mendatang. Lihat Berlangganan notifikasi push klien untuk mengetahui konteks selengkapnya tentang proses langganan.

Menyimpan informasi langganan baru

  1. Klik Register service worker di tab aplikasi. Di kotak status, Anda akan melihat pesan yang mirip dengan ini:
Service worker registered. Scope: https://example.com
  1. Di tab aplikasi, klik Subscribe to push. Browser atau sistem operasi Anda mungkin akan menanyakan apakah Anda ingin mengizinkan situs mengirimkan notifikasi push kepada Anda. Klik Izinkan (atau frasa setara apa pun yang digunakan browser/OS Anda). Di kotak status, Anda akan melihat pesan yang mirip dengan yang berikut ini:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Buka terminal untuk melihat log. Anda akan melihat /add-subscription diikuti dengan beberapa data. /add-subscription adalah URL yang dikirim klien POST saat ingin berlangganan notifikasi push. Data yang mengikuti adalah informasi langganan klien yang perlu Anda simpan.
  2. Buka server.js.
  3. Perbarui logika pengendali rute /add-subscription dengan kode berikut:
app.post('/add-subscription', (request, response) => {   console.log('/add-subscription');   console.log(request.body);   console.log(`Subscribing ${request.body.endpoint}`);   db.get('subscriptions')     .push(request.body)     .write();   response.sendStatus(200); });

Menghapus informasi langganan lama

  1. Kembali ke tab aplikasi.
  2. Klik Berhenti berlangganan dari notifikasi push.
  3. Lihat log lagi. Anda akan melihat /remove-subscription diikuti dengan informasi langganan klien.
  4. Perbarui logika pengendali rute /remove-subscription dengan kode berikut:
app.post('/remove-subscription', (request, response) => {   console.log('/remove-subscription');   console.log(request.body);   console.log(`Unsubscribing ${request.body.endpoint}`);   db.get('subscriptions')     .remove({endpoint: request.body.endpoint})     .write();   response.sendStatus(200); });

Mengirim notifikasi

Seperti yang dijelaskan dalam Mengirim pesan push, server Anda sebenarnya tidak mengirim pesan push secara langsung ke klien. Namun, hal ini bergantung pada layanan push untuk melakukannya. Pada dasarnya, server Anda hanya memulai proses mengirim pesan ke klien dengan membuat permintaan layanan web (permintaan protokol push web) ke layanan web (layanan push) yang dimiliki oleh vendor browser yang digunakan pengguna Anda.

  1. Perbarui logika pengendali rute /notify-me dengan kode berikut:
app.post('/notify-me', (request, response) => {   console.log('/notify-me');   console.log(request.body);   console.log(`Notifying ${request.body.endpoint}`);   const subscription =        db.get('subscriptions').find({endpoint: request.body.endpoint}).value();   sendNotifications([subscription]);   response.sendStatus(200); });
  1. Perbarui fungsi sendNotifications() dengan kode berikut:
function sendNotifications(subscriptions) {   // TODO   // Create the notification content.   const notification = JSON.stringify({     title: "Hello, Notifications!",     options: {       body: `ID: ${Math.floor(Math.random() * 100)}`     }   });   // Customize how the push service should attempt to deliver the push message.   // And provide authentication information.   const options = {     TTL: 10000,     vapidDetails: vapidDetails   };   // Send a push message to each client specified in the subscriptions array.   subscriptions.forEach(subscription => {     const endpoint = subscription.endpoint;     const id = endpoint.substr((endpoint.length - 8), endpoint.length);     webpush.sendNotification(subscription, notification, options)       .then(result => {         console.log(`Endpoint ID: ${id}`);         console.log(`Result: ${result.statusCode}`);       })       .catch(error => {         console.log(`Endpoint ID: ${id}`);         console.log(`Error: ${error} `);       });   }); }
  1. Perbarui logika pengendali rute /notify-all dengan kode berikut:
app.post('/notify-all', (request, response) => {   console.log('/notify-all');   response.sendStatus(200);   console.log('Notifying all subscribers');   const subscriptions =       db.get('subscriptions').cloneDeep().value();   if (subscriptions.length > 0) {     sendNotifications(subscriptions);     response.sendStatus(200);   } else {     response.sendStatus(409);   } });
  1. Kembali ke tab aplikasi.
  2. Klik Beri tahu saya. Anda akan menerima notifikasi push. Judulnya harus Hello, Notifications! dan isinya harus ID: <ID> dengan <ID> adalah angka acak.
  3. Buka aplikasi Anda di browser atau perangkat lain dan coba daftarkan ke notifikasi push, lalu klik tombol Beri tahu semua. Anda akan menerima notifikasi yang sama di semua perangkat yang Anda gunakan untuk berlangganan (yaitu, ID di isi notifikasi push harus sama).

Langkah berikutnya

  • Baca Ringkasan notifikasi push untuk mendapatkan pemahaman konseptual yang lebih mendalam tentang cara kerja notifikasi push.
  • Lihat Codelab: Membangun klien notifikasi push untuk mempelajari cara membangun klien yang meminta izin notifikasi, mendaftarkan perangkat untuk menerima notifikasi push, dan menggunakan pekerja layanan untuk menerima pesan push dan menampilkan pesan sebagai notifikasi.