Buka konsol

Menerima pesan di klien JavaScript

Perilaku pesan berbeda-beda, tergantung pada apakah halaman berada di latar depan (difokus), di latar belakang, tersembunyi di balik tab lain, atau tertutup sepenuhnya. Dalam semua kasus, halaman harus menangani callback onMessage. Namun dalam kasus latar belakang, Anda juga harus mengonfigurasi setBackgroundMessageHandler atau mengonfigurasi notifikasi tampilan untuk memungkinkan pengguna memindahkan aplikasi web Anda ke latar depan.

Status aplikasi Notification Data Keduanya
Latar depan onMessage onMessage onMessage
Latar belakang (pekerja layanan) Notifikasi yang ditampilkan oleh SDK setBackgroundMessageHandler Notifikasi yang ditampilkan oleh SDK

Contoh panduan memulai JavaScript menunjukkan semua kode yang dibutuhkan untuk menerima pesan.

Menangani pesan saat aplikasi web ada di latar depan

Untuk menerima peristiwa onMessage, aplikasi Anda harus menentukan pekerja layanan pengiriman pesan Firebase dalam firebase-messaging-sw.js. Atau, Anda dapat menentukan pekerja layanan yang ada dengan useServiceWorker.

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Ketika aplikasi Anda ada di latar depan (pengguna melihat halaman web Anda), Anda dapat menerima payload data dan notifikasi secara langsung di halaman.

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.setBackgroundMessageHandler` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

Menangani pesan saat aplikasi web ada di background

Semua pesan yang diterima saat aplikasi ada di background memicu notification tampilan di browser. Anda dapat menentukan pilihan untuk notification ini, seperti judul atau tindakan klik, baik dalam permintaan kirim dari server aplikasi Anda, atau menggunakan logika pekerja layanan pada klien.

Mengatur pilihan notifikasi dalam permintaan kirim

Untuk pesan notifikasi yang dikirim dari server aplikasi, FCM JavaScript API mendukung kunci fcm_options.link. Biasanya hal ini diatur ke halaman dalam aplikasi web Anda:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ..."
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

Jika nilai link menunjuk ke halaman yang sudah terbuka di tab browser, klik pada notification akan membawa tab tersebut ke foreground. Jika halaman belum terbuka, klik pada notifikasi akan membuka halaman di tab baru.

Karena pesan data tidak mendukung fcm_options.link, sebaiknya Anda menambahkan payload notifikasi ke semua pesan data. Atau Anda dapat menangani notifikasi menggunakan pekerja layanan.

Penjelasan mengenai perbedaan antara pesan notifikasi dan pesan data dapat dibaca di bagian Jenis pesan.

Menetapkan opsi notifikasi dalam pekerja layanan

Untuk pesan data, Anda dapat menyetel opsi notifikasi di pekerja layanan. Pertama, inisialisasikan aplikasi Anda dalam pekerja layanan:

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Untuk menyetel pilihan, panggil setBackgroundMessageHandler di firebase-messaging-sw.js. Dalam contoh ini, kami membuat notifikasi dengan kolom judul, isi, dan ikon.

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

Praktik terbaik untuk notifikasi

Jika Anda mengetahui pengiriman pesan push untuk web, Anda mungkin sudah membaca panduan yang luas mengenai kriteria notifikasi yang bagus. Untuk developer yang mengirimkan notification melalui FCM untuk Web, pertimbangan yang paling penting adalah ketepatan dan relevansi. Berikut adalah beberapa rekomendasi khusus untuk menjaga notification Anda tetap tepat dan relevan:

  • Gunakan kolom ikon untuk mengirim gambar yang bermakna. Sering kali, gambar bermakna adalah logo perusahaan atau logo aplikasi yang dapat langsung dikenali pengguna. Atau, untuk aplikasi chat, mungkin gambar profil pengguna yang melakukan kiriman.
  • Gunakan kolom judul untuk mengungkapkan sifat pesan yang tepat. Misalnya, "Jimmy menjawab" menyampaikan informasi yang tepat daripada "Pesan baru". Jangan gunakan ruang berharga ini untuk nama perusahaan atau nama aplikasi Anda — sebaiknya gunakan ikon saja.
  • Jangan gunakan judul atau isi notification untuk menampilkan nama situs web atau domain; notification telah berisi nama domain Anda.
  • Tambahkan fcm_options.link, biasanya untuk menghubungkan kembali pengguna ke aplikasi web Anda dan membawanya ke dalam fokus pada browser. Terkadang, meskipun sangat jarang terjadi, saat semua informasi yang perlu Anda sampaikan dapat masuk ke dalam notifikasi, Anda tidak memerlukan link.