Buka konsol

Menyiapkan aplikasi klien JavaScript Firebase Cloud Messaging

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

FCM SDK hanya didukung di halaman yang disajikan melalui HTTPS. Hal ini disebabkan oleh penggunaan pekerja layanan yang hanya tersedia di situs HTTPS. Jika Anda 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 mengupgrade versi 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, 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 mengotorisasi permintaan pengiriman ke layanan push web yang didukung. Untuk mensubscribe aplikasi Anda ke 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.

Membuat pasangan kunci baru

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

Mengimpor pasangan kunci yang ada

Jika Anda sudah memiliki sepasang kunci yang sedang Anda gunakan dengan aplikasi web, Anda dapat mengimpornya ke FCM agar dapat menjangkau instance aplikasi web yang ada melalui FCM API. Untuk mengimpor kunci, Anda harus memiliki akses tingkat pemilik ke project Firebase. Impor kunci publik dan pribadi yang sudah Anda miliki dalam format URL base64 yang dikodekan dengan aman:

  1. Buka tab Cloud Messaging dari panel Setelan Firebase console, 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 ini menampilkan string kunci publik dan tanggal penambahannya.

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

Mengambil objek messaging

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

Mengonfigurasikan kredensial Web di aplikasi Anda

Dengan metode usePublicVapidKey, FCM dapat menggunakan kredensial kunci VAPID ketika mengirim permintaan pesan ke layanan push berbeda. Dengan menggunakan kunci yang Anda hasilkan atau Anda impor sesuai dengan petunjuk di Mengonfigurasi Kredensial Web dengan FCM, tambahkan ke dalam kode Anda setelah objek messaging diambil:

// Add the public key generated from the console here.
messaging.usePublicVapidKey("BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu");

Meminta izin untuk menerima notifikasi

Metode Notification.requestPermission() dari Web Notifications API menampilkan dialog persetujuan agar pengguna dapat mengizinkan aplikasi Anda untuk menerima notifikasi di browser. Jika izin ditolak, permintaan token pendaftaran FCM akan mengalami error.

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // TODO(developer): Retrieve an Instance ID token for use with FCM.
    // ...
  } else {
    console.log('Unable to get permission to notify.');
  }
});

Mengakses token pendaftaran

Bagian ini menjelaskan cara pengambilan token pendaftaran untuk instance aplikasi, serta cara memantau peristiwa refresh pada token. Karena token bisa diputar setelah startup awal, Anda harus memantau peristiwa refresh pada token dan selalu mengambil token pendaftaran terbaru.

Token pendaftaran dapat berubah jika:

  • Aplikasi web menghapus token pendaftaran.
  • Pengguna membersihkan data browser. Jika ini terjadi, panggil getToken untuk mengambil token baru.

Mengambil token pendaftaran terbaru

Jika Anda perlu mengambil token saat ini, panggil getToken. Jika izin tidak diberikan, metode ini menampilkan null. Jika izin diberikan, metode tersebut akan menampilkan token atau menolak promise karena terjadi error.

Layanan pengiriman pesan membutuhkan file firebase-messaging-sw.js. Kalau 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:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

Memantau refresh pada token

Callback onTokenRefresh aktif setiap kali token baru dibuat, sehingga memanggil getToken sesuai konteksnya akan memastikan bahwa Anda mengakses token pendaftaran yang tersedia saat ini.

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

Setelah token didapatkan, kirim token ke server aplikasi dan simpan menggunakan metode yang dipilih. Anda dapat menggunakan API server ID Instance untuk mendapatkan informasi tentang langganan

Langkah berikutnya

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