Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Menyiapkan aplikasi klien Firebase Cloud Messaging JavaScript

Dengan FCM JavaScript API, Anda dapat menerima pesan notifikasi di aplikasi web yang berjalan di browser yang mendukung Push API. Hal ini mencakup versi browser yang tercantum dalam matriks dukungan ini dan ekstensi Chrome melalui Push API.

FCM SDK hanya didukung di halaman yang disalurkan melalui HTTPS. Hal ini disebabkan oleh penggunaan pekerja layanan yang hanya tersedia di situs HTTPS. Jika memerlukan penyedia, sebaiknya gunakan Firebase Hosting untuk hosting HTTPS gratis di domain Anda sendiri.

Untuk memulai FCM JavaScript API, Anda harus menambahkan Firebase ke aplikasi web dan menambahkan logika untuk mengakses token pendaftaran.

Menambahkan Firebase ke project JavaScript

Jika belum melakukannya, tambahkan Firebase ke project JavaScript Anda.

Jika saat ini Anda menggunakan FCM untuk web dan ingin melakukan upgrade ke SDK 6.7.0 atau yang lebih baru, Anda harus mengaktifkan FCM Registration API untuk project Anda di Google Cloud Console. Saat Anda mengaktifkan API ini, pastikan Anda sudah login ke Cloud Console dengan akun Google yang sama seperti yang Anda gunakan untuk Firebase, dan pastikan untuk memilih project yang tepat. Project baru yang menambahkan FCM SDK mengaktifkan API ini secara default.

Mengonfigurasi Kredensial Web dengan FCM

Antarmuka Web FCM menggunakan kredensial Web yang disebut kunci "Voluntary Application Server Identification", atau "VAPID", untuk mengizinkan permintaan kirim ke layanan web push yang didukung. Untuk membuat aplikasi Anda berlangganan notifikasi push, Anda perlu menautkan sepasang kunci ke project Firebase Anda. Anda dapat membuat pasangan kunci baru atau mengimpor pasangan kunci yang ada melalui Firebase Console.

Membuat pasangan kunci baru

  1. Di panel Setelan Firebase console, buka tab Cloud Messaging, lalu scroll ke bagian Konfigurasi web.
  2. Di tab Sertifikat Web Push, klik Hasilkan Pasangan Kunci. Konsol akan menampilkan pemberitahuan bahwa pasangan kunci sudah dihasilkan, serta menampilkan string kunci publik dan tanggal penambahannya.

Mengimpor pasangan kunci yang ada

Jika sudah memiliki pasangan kunci yang digunakan dengan aplikasi web, Anda dapat mengimpornya ke FCM sehingga Anda dapat menjangkau instance aplikasi web yang ada melalui FCM API. Untuk mengimpor kunci, Anda harus memiliki akses level pemilik ke project Firebase. Impor kunci publik dan pribadi yang ada dalam format berenkode base64 yang aman untuk URL:

  1. Di panel Setelan Firebase console, buka tab Cloud Messaging, lalu scroll ke bagian Konfigurasi web.
  2. Di tab Sertifikat Web Push, temukan dan pilih teks link, "impor pasangan kunci yang ada".
  3. Dalam dialog Impor pasangan kunci, berikan kunci publik dan pribadi Anda di kolom terkait dan klik Impor. Konsol akan menampilkan string kunci publik dan tanggal penambahannya.

Untuk mengetahui petunjuk cara menambahkan kunci ke aplikasi, lihat Mengonfigurasi kredensial Web di aplikasi. Untuk informasi lebih lanjut tentang format kunci dan cara membuatnya, lihat Kunci server aplikasi.

Mengambil objek pesan

Web versi 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Web versi 8

const messaging = firebase.messaging();

Mengonfigurasi kredensial Web di aplikasi

Dengan metode getToken(): Promise<string>, FCM dapat menggunakan kredensial kunci VAPID saat mengirim permintaan pesan ke layanan push yang berbeda. Menggunakan kunci yang dihasilkan atau diimpor sesuai dengan petunjuk di Mengonfigurasi Kredensial Web dengan FCM, tambahkan kunci tersebut ke dalam kode setelah objek pesan diambil:

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Mengakses token pendaftaran

Jika perlu mengambil token pendaftaran saat ini untuk instance aplikasi, panggil getToken. Jika izin notifikasi belum diberikan, metode ini akan meminta izin notifikasi dari pengguna. Jika izin sudah diberikan, metode tersebut akan menampilkan token atau menolak promise karena terjadi error.

Layanan pesan memerlukan file firebase-messaging-sw.js. Jika belum memiliki file firebase-messaging-sw.js, buat file kosong dengan nama itu, 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:

Web versi 9

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

Web versi 8

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

Setelah memperoleh token, kirim token ke server aplikasi dan simpan menggunakan metode yang Anda pilih.

Langkah berikutnya

Setelah Anda menyelesaikan langkah-langkah penyiapan, berikut adalah beberapa opsi untuk melanjutkan penggunaan FCM untuk Web (JavaScript):