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 Anda memerlukan penyedia, sebaiknya gunakan Firebase Hosting dan sediakan paket gratis untuk hosting HTTPS di domain Anda.

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

Menambahkan dan melakukan inisialisasi FCM SDK

  1. Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase.

  2. Tambahkan Firebase Cloud Messaging JS SDK dan lakukan inisialisasi Firebase Cloud Messaging:

Web 

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

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Jika saat ini Anda menggunakan FCM untuk web dan ingin mengupgrade ke SDK 6.7.0 atau yang lebih baru, Anda harus mengaktifkan FCM Registration API untuk project Anda di Google Cloud Console. Saat 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.

Konfigurasi 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, tautkan 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 Settings Firebase console, buka tab Cloud Messaging, lalu scroll ke bagian Web configuration.
  2. Di tab Web Push certificates, klik Generate Key Pair. Console akan menampilkan pemberitahuan bahwa pasangan kunci berhasil dibuat, 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 Settings Firebase console, buka tab Cloud Messaging, lalu scroll ke bagian Web configuration.
  2. Di tab Web Push certificates, temukan dan pilih teks link, "import an existing key pair".
  3. Dalam dialog Import a key pair, berikan kunci publik dan pribadi Anda di kolom terkait dan klik Import. Console 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.

Mengonfigurasi kredensial Web di aplikasi

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

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

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

Mengakses token pendaftaran

Jika perlu mengambil token pendaftaran saat ini untuk instance aplikasi, pertama-tama minta izin notifikasi dari pengguna dengan Notification.requestPermission(). Jika dipanggil seperti yang ditampilkan, token akan ditampilkan jika izin diberikan atau menolak promise jika ditolak: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM memerlukan file firebase-messaging-sw.js. Jika Anda belum 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 terbaru:

Web

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);
  // ...
});
messaging_get_token.js

Web

// 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);
  // ...
});
index.js

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):