Mengirim pesan pertama ke aplikasi di background

Untuk memulai FCM, buatlah 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 messaging.requestPermission() menampilkan dialog persetujuan untuk memberikan wewenang kepada pengguna untuk mengizinkan aplikasi Anda menerima notifikasi di browser. Jika izin ditolak, permintaan token pendaftaran FCM akan mengalami error.

messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');
  // TODO(developer): Retrieve an Instance ID token for use with FCM.
  // ...
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

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 saat ini

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

Layanan pengiriman pesan membutuhkan file firebase-messaging-sw.js. Kecuali Anda sudah memiliki file firebase-messaging-sw.js, buat file kosong dengan nama tersebut, 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 saat ini:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then(function(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(function(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 konteksnya akan memastikan bahwa Anda mengakses token pendaftaran yang tersedia saat ini.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(function() {
  messaging.getToken().then(function(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(function(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

Pada isi permintaan, tetapkan kunci token dalam objek message ke token pendaftaran untuk instance aplikasi tertentu yang ingin ditargetkan. Lihat informasi penyiapan klien untuk platform Anda guna mempelajari lebih jauh tentang token pendaftaran.

Semua permintaan HTTP ke v1 API harus diotorisasi dengan token akses. Lihat Mengotorisasi Permintaan Send untuk mempelajari cara mendapatkan token akses dari kredensial akun layanan Anda.

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

{
  "message":{
    "token" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "notification" : {
      "body" : "This is an FCM notification message!",
      "title" : "FCM Message",
      }
   }
}

cURL

curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...HnS_uNreA" -H "Content-Type: application/json" -d '{
"message":{
  "notification": {
    "title": "FCM Message",
    "body": "This is an FCM Message",
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send

Respons HTTP

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

Menambahkan properti push web 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, menggantikan kolom google.firebase.fcm.v1.Notification.title dan google.firebase.fcm.v1.Notification.body yang sama.

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 native 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 diperhatikan 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 lebih lanjut tentang pesan notifikasi dan menambahkan perilaku lainnya yang lebih canggih pada aplikasi Anda, lihat:

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.