Ikuti semua informasi yang diumumkan di Firebase Summit, dan pelajari bagaimana Firebase dapat membantu Anda mempercepat pengembangan aplikasi dan menjalankan aplikasi dengan percaya diri. Pelajari Lebih Lanjut

Terima pesan di klien JavaScript

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Perilaku pesan berbeda tergantung pada apakah halaman berada di latar depan (memiliki fokus), atau di latar belakang, tersembunyi di balik tab lain, atau tertutup sepenuhnya. Dalam semua kasus, halaman harus menangani panggilan balik onMessage , tetapi dalam kasus latar belakang Anda mungkin juga perlu menangani onBackgroundMessage atau mengonfigurasi pemberitahuan tampilan untuk memungkinkan pengguna membawa aplikasi web Anda ke latar depan.

Status aplikasi Pemberitahuan Data Keduanya
Latar depan onMessage onMessage onMessage
Latar belakang (pekerja layanan) onBackgroundMessage (pemberitahuan tampilan otomatis ditampilkan) onBackgroundMessage onBackgroundMessage (pemberitahuan tampilan otomatis ditampilkan)

Contoh memulai cepat JavaScript menunjukkan semua kode yang diperlukan untuk menerima pesan.

Tangani pesan saat aplikasi web Anda berada di latar depan

Untuk menerima peristiwa onMessage , aplikasi Anda harus mendefinisikan pekerja layanan perpesanan Firebase di firebase-messaging-sw.js . Atau, Anda dapat memberikan service worker yang ada ke SDK melalui getToken(): Promise<string> .

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Web version 8

// 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/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Saat aplikasi Anda berada di latar depan (pengguna sedang melihat halaman web Anda), Anda dapat menerima muatan data dan notifikasi langsung di halaman.

Web version 9

// 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.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

Web version 8

// 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.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

Menangani pesan saat aplikasi web Anda berada di latar belakang

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

Menyetel opsi notifikasi dalam permintaan kirim

Untuk pesan notifikasi yang dikirim dari server aplikasi, FCM JavaScript API mendukung kunci fcm_options.link . Biasanya ini disetel ke halaman di 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 tautan mengarah ke halaman yang sudah terbuka di tab browser, klik pada notifikasi akan membawa tab itu ke latar depan. Jika halaman belum terbuka, klik notifikasi akan membuka halaman di tab baru.

Karena pesan data tidak mendukung fcm_options.link , Anda disarankan untuk menambahkan payload notifikasi ke semua pesan data. Atau, Anda dapat menangani notifikasi menggunakan service worker.

Untuk penjelasan tentang perbedaan antara pesan notifikasi dan data, lihat Jenis pesan .

Menyetel opsi notifikasi di service worker

Untuk pesan data, Anda dapat menyetel opsi notifikasi di service worker. Pertama, inisialisasi aplikasi Anda di service worker:

Web version 9

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Web version 8

// 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/9.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

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

Untuk menyetel opsi, panggil onBackgroundMessage di firebase-messaging-sw.js . Dalam contoh ini, kami membuat notifikasi dengan bidang judul, isi, dan ikon.

Web version 9

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (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'
  };

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

Web version 8

messaging.onBackgroundMessage((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'
  };

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

Praktik terbaik untuk notifikasi

Jika Anda terbiasa dengan pesan push untuk web, Anda mungkin sudah membaca panduan umum tentang apa yang membuat notifikasi bagus . Untuk pengembang yang mengirimkan pemberitahuan melalui FCM untuk Web, pertimbangan terpenting adalah ketepatan dan relevansi. Berikut adalah beberapa rekomendasi khusus untuk menjaga agar notifikasi Anda tetap akurat dan relevan:

  • Gunakan bidang ikon untuk mengirim gambar yang bermakna. Untuk banyak kasus penggunaan, ini harus berupa logo perusahaan atau aplikasi yang langsung dikenali pengguna Anda. Atau, untuk aplikasi chat, mungkin itu adalah gambar profil pengguna pengirim.
  • Gunakan bidang judul untuk mengekspresikan sifat pesan yang tepat. Misalnya, "Jimmy menjawab" menyampaikan informasi yang lebih tepat daripada "Pesan baru". Jangan gunakan ruang berharga ini untuk nama perusahaan atau aplikasi Anda — gunakan ikon untuk tujuan itu.
  • Jangan gunakan judul atau isi pemberitahuan untuk menampilkan nama atau domain situs web Anda; notifikasi sudah berisi nama domain Anda.
  • Tambahkan fcm_options.link , biasanya untuk menautkan pengguna kembali ke aplikasi web Anda dan menjadikannya fokus di browser. Dalam kasus yang jarang terjadi di mana semua informasi yang perlu Anda sampaikan dapat masuk ke dalam notifikasi, Anda mungkin tidak memerlukan tautan.