Buka konsol

Mengirim pesan pertama ke aplikasi di latar belakang

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 Notification.requestPermission() dari Web Notification API menampilkan dialog persetujuan untuk memungkinkan pengguna memberikan izin aplikasi Anda untuk menerima pemberitahuan di browser. Jika izin ditolak, permintaan token pendaftaran FCM akan mengalami error.

Notification.requestPermission().then(function(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 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

Untuk mengirim ke satu perangkat tertentu, berikan token pendaftaran perangkat seperti yang ditunjukkan. Lihat informasi penyiapan klien untuk platform Anda guna mempelajari lebih jauh tentang token pendaftaran.

Node.js

// This registration token comes from the client FCM SDKs.
var registrationToken = 'YOUR_REGISTRATION_TOKEN';

var message = {
  data: {
    score: '850',
    time: '2:45'
  },
  token: registrationToken
};

// Send a message to the device corresponding to the provided
// registration token.
admin.messaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

Java

// This registration token comes from the client FCM SDKs.
String registrationToken = "YOUR_REGISTRATION_TOKEN";

// See documentation on defining a message payload.
Message message = Message.builder()
    .putData("score", "850")
    .putData("time", "2:45")
    .setToken(registrationToken)
    .build();

// Send a message to the device corresponding to the provided
// registration token.
String response = FirebaseMessaging.getInstance().send(message);
// Response is a message ID string.
System.out.println("Successfully sent message: " + response);

Python

# This registration token comes from the client FCM SDKs.
registration_token = 'YOUR_REGISTRATION_TOKEN'

# See documentation on defining a message payload.
message = messaging.Message(
    data={
        'score': '850',
        'time': '2:45',
    },
    token=registration_token,
)

# Send a message to the device corresponding to the provided
# registration token.
response = messaging.send(message)
# Response is a message ID string.
print('Successfully sent message:', response)

Go

// Obtain a messaging.Client from the App.
ctx := context.Background()
client, err := app.Messaging(ctx)
if err != nil {
	log.Fatalf("error getting Messaging client: %v\n", err)
}

// This registration token comes from the client FCM SDKs.
registrationToken := "YOUR_REGISTRATION_TOKEN"

// See documentation on defining a message payload.
message := &messaging.Message{
	Data: map[string]string{
		"score": "850",
		"time":  "2:45",
	},
	Token: registrationToken,
}

// Send a message to the device corresponding to the provided
// registration token.
response, err := client.Send(ctx, message)
if err != nil {
	log.Fatalln(err)
}
// Response is a message ID string.
fmt.Println("Successfully sent message:", response)

C#

// This registration token comes from the client FCM SDKs.
var registrationToken = "YOUR_REGISTRATION_TOKEN";

// See documentation on defining a message payload.
var message = new Message()
{
    Data = new Dictionary<string, string>()
    {
        { "score", "850" },
        { "time", "2:45" },
    },
    Token = registrationToken,
};

// Send a message to the device corresponding to the provided
// registration token.
string response = await FirebaseMessaging.DefaultInstance.SendAsync(message);
// Response is a message ID string.
Console.WriteLine("Successfully sent message: " + response);

REST

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",
      }
   }
}

Perintah 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

Jika berhasil, setiap metode pengiriman mengembalikan ID pesan. Firebase Admin SDK mengembalikan string ID dalam format projects/{project_id}/messages/{message_id}. Respons protokol HTTP adalah kunci JSON tunggal:

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

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, menggantikan kolom google.firebase.fcm.v1.Notification.title dan google.firebase.fcm.v1.Notification.body.

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: