Halaman ini diterjemahkan oleh Cloud Translation API.

Codelab: Membuat server notifikasi push

Kate Jeffreys

Kayce Basques

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 menerapkan 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 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.

Klik Remix to Edit untuk menjadikan 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.

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 perbarui VAPID_PUBLIC_KEY dan VAPID_PRIVATE_KEY. Setel VAPID_SUBJECT ke mailto:test@test.test. 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: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 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

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 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/….

Kembali ke kode Anda dengan mengklik Lihat Sumber di UI Glitch.
Buka Log Glitch 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 yang berikutnya adalah informasi langganan klien yang perlu Anda simpan.
Buka server.js.
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

Kembali ke tab aplikasi.
Klik Berhenti berlangganan dari notifikasi push.
Lihat Log Glitch lagi. Anda akan melihat /remove-subscription diikuti dengan informasi langganan klien.
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 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.

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

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

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

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. Judul harus Hello, Notifications! dan isi harus ID: <ID> dengan <ID> adalah angka acak.
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 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: 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.