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 (mis. server membuat catatan database baru ketika klien memilih untuk menerima notifikasi push, dan menghapus catatan database yang ada ketika klien memilih untuk tidak ikut)
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 berbicara tentang konsep. Periksa Bagaimana cara kerja notifikasi push? untuk mempelajari konsep notifikasi push.

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

Lihat push-notifications-server-codelab-complete (sumber) 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 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 dipanggil 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 Anda dengan kunci otentikasi. Lihat Menandatangani permintaan protokol web push untuk mengetahui 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 hingga mailto:test@test.test. Semua nilai ini harus digabungkan dalam tanda kutip ganda. Setelah melakukan pembaruan, file .env Anda akan terlihat mirip dengan yang berikut 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. Utama hal yang perlu dilakukan server Anda adalah menyimpan langganan notifikasi push baru dan menghapus langganan lama. Langganan inilah yang memungkinkan Anda untuk mengirim pesan kepada klien di kemudian hari. Lihat Membuat klien berlangganan notifikasi push untuk mendapatkan konteks yang lebih lengkap tentang proses langganan.

Simpan informasi langganan baru

Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .

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

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

Di tab aplikasi, klik Berlangganan push. {i>Browser<i} atau sistem operasi Anda mungkin akan menanyakan apakah Anda ingin situs web mengirimkan notifikasi push. Klik Allow (atau apa pun frasa serupa yang digunakan browser/OS Anda). Di kotak status, Anda akan melihat pesan serupa menjadi 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 oleh beberapa data. /add-subscription sama dengan URL yang dikirim klien POSTING permintaannya saat ingin berlangganan notifikasi push. Data yang berikut 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 diikuti oleh 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 {i>push<i} langsung ke klien. Sebaliknya, hal itu mengandalkan layanan {i>push<i} untuk melakukannya. Pada dasarnya server Anda baru saja memulai proses pengiriman pesan ke klien dengan membuat permintaan layanan (permintaan protokol web push) ke layanan web (layanan push) dimiliki oleh vendor {i>browser<i} yang digunakan pengguna Anda.

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 memulai.
Klik Beri tahu saya. Anda akan menerima notifikasi push. Judul harus menjadi Hello, Notifications! dan isinya 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 berlangganan Anda (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: Membuat klien notifikasi push mempelajari cara membangun klien yang meminta izin notifikasi, berlangganan perangkat untuk menerima notifikasi push, dan menggunakan pekerja layanan untuk menerima pesan push dan menampilkan pesan sebagai notifikasi.