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

Siapkan aplikasi klien JavaScript Firebase Cloud Messaging

FCM JavaScript API memungkinkan Anda menerima pesan notifikasi di aplikasi web yang berjalan di browser yang mendukung Push API . Ini termasuk versi browser yang tercantum dalam matriks dukungan ini dan ekstensi Chrome melalui Push API.

FCM SDK hanya didukung di halaman yang ditayangkan melalui HTTPS. Ini karena penggunaan pekerja layanannya, yang hanya tersedia di situs HTTPS. Jika Anda memerlukan penyedia, Firebase Hosting direkomendasikan dan menyediakan tingkat tanpa biaya untuk hosting HTTPS di domain Anda sendiri.

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

Tambahkan dan inisialisasi FCM SDK

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

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

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
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 meningkatkan versi ke SDK 6.7.0 atau yang lebih baru, Anda harus mengaktifkan API Pendaftaran FCM untuk proyek Anda di Google Cloud Console. Saat mengaktifkan API, pastikan Anda masuk ke Cloud Console dengan akun Google yang sama dengan yang Anda gunakan untuk Firebase, dan pastikan untuk memilih proyek yang benar. Proyek baru yang menambahkan FCM SDK telah mengaktifkan API ini secara default.

Konfigurasikan Kredensial Web dengan FCM

Antarmuka Web FCM menggunakan kredensial Web yang disebut kunci "Identifikasi Server Aplikasi Sukarela", atau "VAPID", untuk mengotorisasi permintaan pengiriman ke layanan push web yang didukung. Untuk berlangganan aplikasi Anda ke pemberitahuan push, Anda perlu mengaitkan sepasang kunci dengan proyek Firebase Anda. Anda dapat membuat pasangan kunci baru atau mengimpor pasangan kunci yang ada melalui Firebase Console.

Buat pasangan kunci baru

  1. Buka tab Cloud Messaging pada panel Setelan konsol Firebase dan gulir ke bagian konfigurasi Web .
  2. Di tab Sertifikat Push Web , klik Buat Pasangan Kunci . Konsol menampilkan pemberitahuan bahwa pasangan kunci telah dibuat, dan menampilkan string kunci publik dan tanggal ditambahkan.

Impor pasangan kunci yang ada

Jika Anda sudah memiliki pasangan kunci yang sudah Anda gunakan 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 tingkat pemilik ke proyek Firebase. Impor kunci publik dan pribadi Anda yang ada dalam bentuk enkode aman URL base64:

  1. Buka tab Cloud Messaging pada panel Setelan konsol Firebase dan gulir ke bagian konfigurasi Web .
  2. Di tab sertifikat Web Push , temukan dan pilih teks tautan, "impor pasangan kunci yang ada."
  3. Dalam dialog Impor pasangan kunci , berikan kunci publik dan pribadi Anda di bidang yang sesuai dan klik Impor . Konsol menampilkan string kunci publik dan tanggal ditambahkan.

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

Konfigurasikan kredensial Web di aplikasi Anda

Metode getToken(): Promise<string> memungkinkan FCM menggunakan kredensial kunci VAPID saat mengirim permintaan pesan ke layanan push yang berbeda. Menggunakan kunci yang Anda buat atau impor sesuai petunjuk di Mengonfigurasi Kredensial Web dengan FCM , tambahkan dalam kode Anda setelah objek perpesanan diambil:

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

Akses token pendaftaran

Saat Anda perlu mengambil token pendaftaran saat ini untuk instance aplikasi, pertama-tama minta izin notifikasi dari pengguna dengan Notification.requestPermission() . Saat dipanggil seperti yang ditunjukkan, ini mengembalikan token jika izin diberikan atau menolak janji 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 . Kecuali Anda sudah memiliki file firebase-messaging-sw.js , buat file kosong dengan nama itu dan letakkan di root domain Anda sebelum mengambil token. Anda dapat menambahkan konten yang berarti ke file nanti dalam proses penyiapan klien.

Untuk mengambil token saat ini:

Web version 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 version 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 Anda mendapatkan token, kirimkan ke server aplikasi Anda dan simpan menggunakan metode pilihan Anda.

Langkah selanjutnya

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