Halaman ini diterjemahkan oleh Cloud Translation API.

Codelab: Membuat server notifikasi push

Kate Jeffreys

Kayce Basques

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

Melacak langganan notifikasi push (misalnya, server membuat data database baru saat klien memilih untuk ikut serta dalam notifikasi push, dan menghapus data database yang ada saat klien memilih 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 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 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 di atas 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 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 untuk Mengedit agar project dapat diedit.

Menyiapkan autentikasi

Agar notifikasi push dapat berfungsi, Anda perlu menyiapkan server dan klien dengan kunci autentikasi. Lihat Menandatangani permintaan protokol push web 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 lalu update VAPID_PUBLIC_KEY dan VAPID_PRIVATE_KEY. Tetapkan VAPID_SUBJECT ke mailto:test@test.test. Semua nilai ini harus diapit dalam tanda kutip ganda. Setelah melakukan update, file .env Anda akan terlihat seperti ini:

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

Tutup terminal Glitch.

Nilai variabel lingkungan (semua yang ada 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 ini 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 Lihat Aplikasi. Lalu tekan Layar Penuh .

Klik Register service worker di tab aplikasi. Di kotak status, Anda akan melihat pesan yang mirip 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 ingin mengizinkan situs mengirim notifikasi push. Klik Izinkan (atau frasa setara apa pun 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 yang diikuti dengan beberapa data. /add-subscription adalah URL yang dikirimi permintaan POST oleh klien saat klien ingin berlangganan notifikasi push. Data yang mengikutinya 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 Log Glitch 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, layanan itu bergantung pada 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) milik vendor browser 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 dari push, lalu klik Berlangganan untuk push lagi. Hal ini hanya diperlukan karena, seperti yang disebutkan sebelumnya, Glitch akan memulai ulang project setiap kali Anda mengedit kode dan project dikonfigurasi untuk menghapus database saat memulai project.
Klik Beri tahu saya. Anda akan menerima notifikasi push. Judul harus Hello, Notifications! dan isi harus ID: <ID> dengan <ID> adalah angka acak.
Buka aplikasi Anda di browser atau perangkat lain dan coba tambahkan notifikasi push agar aplikasi tersebut berlangganan notifikasi push, lalu klik tombol Beri tahu semua. Anda akan menerima notifikasi yang sama di semua perangkat yang berlangganan (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 membangun klien yang meminta izin notifikasi, membuat perangkat berlangganan untuk menerima notifikasi push, serta menggunakan pekerja layanan untuk menerima pesan push dan menampilkan pesan sebagai notifikasi.