Codelab: Membuat server notifikasi push

Kate Jeffreys

Kayce Basques

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

Codelab ini menunjukkan cara mem-build server notifikasi push, langkah demi langkah. Di akhir codelab, Anda akan memiliki server yang:

• Melacak langganan notifikasi push (yaitu server membuat data database baru saat klien memilih untuk menerima notifikasi push, dan menghapus data database yang ada saat klien memilih untuk tidak menerimanya)
• 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 membahas konsep secara mendalam. Lihat artikel 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: Mem-build klien notifikasi push.

Lihat push-notifications-server-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

Stack aplikasi

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

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

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.

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. Buka terminal Glitch dengan mengklik Tools, lalu mengklik Terminal.
2. Di terminal, jalankan npx web-push generate-vapid-keys. Salin kunci pribadi dan nilai kunci publik.
3. 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.

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 mengirim pesan ke klien di masa mendatang. Lihat Membuat klien berlangganan notifikasi push untuk mengetahui konteks selengkapnya tentang proses langganan.

Menyimpan informasi langganan baru

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

Istilah penting: Kita akan menyebut tab yang baru saja Anda buka sebagai tab aplikasi.

1. Klik Register service worker di tab aplikasi. Di kotak status, Anda akan melihat pesan yang mirip dengan ini:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

1. Di tab aplikasi, klik Berlangganan untuk push. Browser atau sistem operasi Anda mungkin akan bertanya apakah Anda ingin mengizinkan situs mengirimkan notifikasi push kepada Anda. Klik Izinkan (atau frasa yang setara yang digunakan browser/OS Anda). Di kotak status, Anda akan melihat pesan yang mirip dengan ini:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

Catatan: URL endpoint berubah bergantung pada browser yang Anda gunakan. Misalnya, di Firefox, URL dimulai dengan https://updates.push.services.mozilla.com/….

1. Kembali ke kode Anda dengan mengklik Lihat Sumber di UI Glitch.
2. Buka Log Glitch dengan mengklik Tools, lalu mengklik Logs. Anda akan melihat /add-subscription diikuti dengan beberapa data. /add-subscription adalah URL tempat klien mengirim permintaan POST saat ingin berlangganan notifikasi push. Data yang berikutnya adalah informasi langganan klien yang perlu Anda simpan.
3. Buka server.js.
4. 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);
});

Catatan: Database menulis ke .data/db.json. Untuk memeriksa file ini di Glitch, klik Tools, lalu klik Terminal, lalu jalankan cat .data/db.json di Terminal. .data/db.json dihapus setiap kali Anda mengedit aplikasi. Hal ini karena Glitch menjalankan skrip start di package.json setiap kali Anda mengedit aplikasi, dan skrip tersebut menyertakan panggilan ke rm .data/db.json.

Menghapus informasi langganan lama

1. Kembali ke tab aplikasi.
2. Klik Berhenti berlangganan dari notifikasi push.
3. Lihat Log Glitch 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 di Mengirim pesan push, server Anda sebenarnya tidak mengirim pesan push langsung ke klien. Sebaliknya, aplikasi ini mengandalkan layanan push untuk melakukannya. Server Anda pada dasarnya hanya memulai proses pengiriman 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 Berhenti berlangganan dari notifikasi push, lalu klik Berlangganan notifikasi push lagi. Hal ini hanya diperlukan karena, seperti yang disebutkan sebelumnya, Glitch memulai ulang project setiap kali Anda mengedit kode dan project dikonfigurasi untuk menghapus database saat memulai.
3. Klik Beri tahu saya. Anda akan menerima notifikasi push. Judul harus Hello, Notifications! dan isi harus ID: <ID> dengan <ID> adalah angka acak.
4. Buka aplikasi Anda di browser atau perangkat lain, lalu coba berlangganan notifikasi push, lalu klik tombol Beri tahu semua. Anda akan menerima notifikasi yang sama di semua perangkat yang berlangganan (yaitu, ID dalam 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: Membuat klien notifikasi push untuk mempelajari cara mem-build klien yang meminta izin notifikasi, berlangganan perangkat untuk menerima notifikasi push, dan menggunakan pekerja layanan untuk menerima pesan push dan menampilkan pesan sebagai notifikasi.