Halaman ini diterjemahkan oleh Cloud Translation API.

Codelab: Membuat server notifikasi push

Kate Jeffreys

Kayce Basques

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

Melacak langganan notifikasi push (yakni server membuat catatan database baru saat klien memilih untuk menerima notifikasi push, dan menghapus catatan database yang ada saat klien memilih untuk tidak ikut serta)
Mengirim notifikasi push ke satu klien
Mengirim notifikasi push ke semua klien yang berlangganan

Codelab ini berfokus untuk membantu Anda belajar sambil 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 mengimplementasikan server dalam codelab ini. Untuk mempelajari cara mengimplementasikan klien notifikasi push, lihat Codelab: Membuat klien notifikasi push.

Lihat push-notifications-server-codelab-complete (sumber) untuk melihat kode lengkap.

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 ini untuk menerapkan notifikasi push. Kami memilih teknologi ini karena teknologi tersebut 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.

Klik Remix to Edit agar project dapat diedit.

Menyiapkan autentikasi

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

Buka terminal Glitch dengan mengklik Tools, lalu mengklik Terminal.
Di terminal, jalankan npx web-push generate-vapid-keys. Salin kunci pribadi dan nilai kunci publik.
Buka .env dan update VAPID_PUBLIC_KEY serta VAPID_PRIVATE_KEY. Setel VAPID_SUBJECT ke mailto:test@test.test. Semua nilai ini harus digabungkan dalam tanda kutip ganda. Setelah melakukan pembaruan, file .env Anda akan terlihat mirip ini:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Tutup terminal Glitch.

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

Buka public/index.js.
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 inilah yang memungkinkan Anda untuk mengirim pesan ke klien di masa mendatang. Lihat Membuat klien berlangganan notifikasi push untuk mengetahui konteks selengkapnya tentang proses langganan.

Simpan informasi langganan baru

Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .

Klik Register service worker di tab aplikasi. Di kotak status, Anda akan melihat pesan seperti ini:

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

Di tab aplikasi, klik Berlangganan push. Browser atau sistem operasi mungkin akan menanyakan apakah Anda mengizinkan situs mengirimkan notifikasi push. Klik Izinkan (atau frasa apa pun 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/….

Kembali ke kode Anda dengan mengklik View Source di UI Glitch.
Buka Glitch Logs dengan mengklik Tools, lalu mengklik Logs. Anda akan melihat /add-subscription diikuti dengan beberapa data. /add-subscription adalah URL yang menjadi tujuan pengiriman permintaan POST klien saat ingin berlangganan notifikasi push. Data berikutnya adalah informasi langganan klien yang perlu Anda simpan.
Buka server.js.
Update 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

Kembali ke tab aplikasi.
Klik Berhenti berlangganan push.
Lihat Glitch Logs lagi. Anda akan melihat /remove-subscription yang diikuti dengan informasi langganan klien.
Update 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);
});

Kirim notifikasi

Seperti yang dijelaskan dalam Mengirim pesan push, server Anda tidak benar-benar mengirim pesan push langsung ke klien. Sebaliknya, hal itu mengandalkan layanan {i>push<i} untuk melakukannya. Server Anda pada dasarnya 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.

Update 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);
});

Update 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} `);
      });
  });
}

Update 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);
  }
});

Kembali ke tab aplikasi.
Klik Berhenti berlangganan push, lalu klik Berlangganan push lagi. Tindakan ini hanya diperlukan karena, seperti yang disebutkan sebelumnya, Glitch memulai ulang project setiap kali Anda mengedit kode dan project dikonfigurasi untuk menghapus database saat sistem dimulai.
Klik Beri tahu saya. Anda akan menerima notifikasi push. Judulnya harus Hello, Notifications! dan isi harus ID: <ID> dengan <ID> adalah angka acak.
Buka aplikasi Anda di browser atau perangkat lain dan coba daftarkan aplikasi Anda ke notifikasi push, lalu klik tombol Beri tahu semua. Anda akan menerima notifikasi yang sama di semua perangkat yang berlangganan (yaitu ID di isi notifikasi push harus sama).

Langkah berikutnya

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