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

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

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 layanan, yang hanya tersedia di situs HTTPS. Jika Anda memerlukan penyedia, Firebase Hosting direkomendasikan dan memberikan tingkat gratis untuk hosting HTTPS di domain Anda sendiri.

Untuk memulai FCM JavaScript API, Anda perlu 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 mengupgrade ke SDK 6.7.0 atau lebih baru, Anda harus mengaktifkan FCM Registration API untuk project Anda di Google Cloud Console. Saat Anda 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 mengaktifkan API ini secara default.

Konfigurasikan Kredensial Web dengan FCM

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

Hasilkan pasangan kunci baru

  1. Buka tab Cloud Messaging di panel Pengaturan Firebase console dan gulir ke bagian konfigurasi Web .
  2. Di tab Web Push certificates , klik Generate Key Pair . Konsol menampilkan pemberitahuan bahwa pasangan kunci dibuat, dan menampilkan string kunci publik dan tanggal ditambahkan.

Impor pasangan kunci yang ada

Jika Anda 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 API FCM. Untuk mengimpor kunci, Anda harus memiliki akses tingkat pemilik ke proyek Firebase. Impor kunci publik dan pribadi Anda yang ada dalam bentuk berenkode aman URL base64:

  1. Buka tab Cloud Messaging di panel Pengaturan Firebase console dan gulir ke bagian konfigurasi Web .
  2. Di tab Sertifikat Push Web , 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 berbagai layanan push. Menggunakan kunci yang Anda buat atau impor sesuai petunjuk di Konfigurasi Kredensial Web dengan FCM , tambahkan kunci itu ke dalam kode Anda setelah objek perpesanan 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"});

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 membutuhkan file firebase-messaging-sw.js . Kecuali Anda sudah memiliki file firebase-messaging-sw.js , buat file kosong dengan nama tersebut dan letakkan di root domain Anda sebelum mengambil token. Anda dapat menambahkan konten yang bermakna 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 mendapatkan token, kirimkan ke server aplikasi Anda dan simpan menggunakan metode pilihan Anda.

Langkah selanjutnya

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