Buka konsol

Mengirim pesan pengujian ke aplikasi di latar belakang

Untuk memulai FCM, buat kasus penggunaan yang paling sederhana: dengan mengirim pesan notifikasi ke perangkat pengguna tertentu saat aplikasi berada di latar belakang pada perangkat. Halaman ini membahas semua langkah untuk mencapainya, mulai dari penyiapan hingga verifikasi. Jadi, halaman ini dapat mencakup langkah-langkah yang telah Anda selesaikan jika Anda telah menyiapkan aplikasi klien JavaScript untuk FCM.

Menyiapkan SDK

Jika belum melakukannya, tambahkan Firebase ke project JavaScript Anda.

Meminta izin untuk menerima notifikasi

Metode Notification.requestPermission() dari Web Notifications API menampilkan dialog persetujuan agar pengguna dapat mengizinkan aplikasi Anda untuk menerima notifikasi di browser. Jika izin ditolak, permintaan token pendaftaran FCM akan mengalami error.

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // TODO(developer): Retrieve an Instance ID token for use with FCM.
    // ...
  } else {
    console.log('Unable to get permission to notify.');
  }
});

Mengakses token pendaftaran

Bagian ini menjelaskan cara pengambilan token pendaftaran untuk instance aplikasi, serta cara memantau peristiwa refresh pada token. Karena token bisa diputar setelah startup awal, Anda harus memantau peristiwa refresh pada token dan selalu mengambil token pendaftaran terbaru.

Token pendaftaran dapat berubah jika:

  • Aplikasi web menghapus token pendaftaran.
  • Pengguna membersihkan data browser. Jika ini terjadi, panggil getToken untuk mengambil token baru.

Mengambil token pendaftaran terbaru

Jika Anda perlu mengambil token saat ini, panggil getToken. Jika izin tidak diberikan, metode ini menampilkan null. Jika izin diberikan, metode tersebut menampilkan token atau menolak promise karena terjadi error.

Layanan pengiriman pesan memerlukan file firebase-messaging-sw.js. Kalau Anda belum memiliki file firebase-messaging-sw.js, buat file kosong dengan nama itu, lalu letakkan di root domain Anda sebelum mengambil token. Anda dapat menambahkan konten yang bermakna ke file ini nanti dalam proses penyiapan klien.

Untuk mengambil token terbaru:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

Memantau refresh pada token

Callback onTokenRefresh aktif setiap kali token baru dibuat, sehingga memanggil getToken sesuai dengan konteksnya memastikan bahwa Anda mengakses token pendaftaran terbaru yang tersedia.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

Setelah token didapatkan, kirim token ke server aplikasi dan simpan menggunakan metode yang dipilih. Anda dapat menggunakan API server ID Instance untuk mendapatkan informasi tentang langganan

Mengirim pesan notifikasi pengujian

  1. Instal dan jalankan aplikasi pada perangkat target.

  2. Pastikan aplikasi berjalan di latar belakang pada perangkat.

  3. Buka Notifications composer, lalu pilih Notifikasi baru.

  4. Masukkan teks pesan.

  5. Pilih Kirim pesan pengujian.

  6. Dalam kolom yang berlabel Tambahkan token pendaftaran FCM, masukkan token pendaftaran yang diperoleh di bagian sebelumnya pada panduan ini.

  7. Klik Uji.

Setelah mengklik Uji, perangkat klien yang ditargetkan (dengan aplikasi berada di latar belakang) akan menerima notifikasi di browser.

Menambahkan properti web push ke payload notifikasi

Dengan HTTP v1 API, Anda dapat menentukan opsi notifikasi tambahan sebagai objek JSON yang berisi properti yang valid dari Web Notification API. Kolom title dan body dalam objek ini, jika ada, mengganti kolom google.firebase.fcm.v1.Notification.title dan google.firebase.fcm.v1.Notification.body yang setara.

Permintaan HTTP POST

POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1

Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm

{
  "message": {
    "token" : <token of destination app>,
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  }
}

Dengan permintaan ini, klien web yang ditargetkan (termasuk browser yang didukung yang berjalan di Android) menerima pesan notifikasi prioritas tinggi yang akan terus aktif sampai pengguna berinteraksi dengannya. Permintaan tersebut berisi kolom:

  • Title: Pesan FCM
  • Body: Ini adalah pesan dari FCM ke web
  • RequireInteraction: true
  • Badge: /badge-icon.png

Aplikasi asli Android dan iOS (yang tidak dapat digantikan oleh aplikasi web) menerima pesan notifikasi prioritas normal dengan kolom:

  • Title: Pesan FCM
  • Bidy: Ini adalah pesan dari FCM

Perlu diketahui bahwa RequireInteraction saat ini hanya didukung di beberapa browser. Developer harus memeriksa spesifikasi Web Notification API untuk memverifikasi platform dan dukungan browser.

cURL

curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm" -H "Content-Type: application/json" -d '{
  "message": {
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' "https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send"

Respons HTTP

{
    "name": "projects/myproject-b5ae1/messages/0:1500415314455276%31bd1c9631bd1c98"
}

Lihat Membuat Permintaan Pengiriman Server Aplikasi untuk mempelajari lebih lanjut tentang pesan FCM.

Langkah berikutnya

Mengirim pesan ke aplikasi di latar depan

Setelah berhasil mengirim pesan notifikasi selagi aplikasi berjalan di latar belakang, lihat Menerima Pesan di Klien JavaScript untuk memulai pengiriman ke aplikasi di latar depan.

Mengetahui lebih lanjut tentang pesan notifikasi

Untuk mengetahui pesan notifikasi lebih lanjut dan menambahkan perilaku lainnya yang lebih canggih pada aplikasi Anda, lihat: