Menerima pesan di klien JavaScript

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

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 messaging 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/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/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 dapat menerima payload data dan notification 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(function(payload) {
  console.log('Message received. ', payload);
  // ...
});

Menangani pesan saat aplikasi web ada di latar belakang

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

Mengatur pilihan notification dalam permintaan pengiriman

Untuk pesan notifikasi yang dikirim dari server aplikasi, FCM JavaScript API mendukung kunci click_action. 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 tindakan klik menunjuk ke halaman yang sudah terbuka di tab browser, klik pada notifikasi akan membawa tab tersebut ke latar depan. Jika halaman belum terbuka, klik pada notifikasi akan membuka halaman di tab baru.

Karena pesan data tidak mendukung click_action, sebaiknya Anda menambahkan payload notifikasi ke semua pesan data. Atau Anda dapat menangani notification 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 notification dan pesan data, Anda dapat menyetel pilihan notification dalam 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/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/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 mengatur pilihan, panggil setBackgroundMessageHandler di firebase-messaging-sw.js. Dalam contoh ini, kita menetapkan pilihan untuk judul, isi, ikon, dan tindakan klik.

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

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

Praktik terbaik untuk notification

Jika Anda mengetahui messaging push untuk web, Anda mungkin sudah membaca panduan yang luas mengenai kriteria notification 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 click_action, biasanya untuk menghubungkan 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 tindakan klik.

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.