Menyiapkan aplikasi klien JavaScript Firebase Cloud Messaging

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

Kirim pesan ke klien JavaScript menggunakan protokol server aplikasi HTTP dan XMPP, seperti yang dijelaskan di Mengirim Pesan. Pengiriman pesan dari Firebase console tidak didukung.

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.

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.

Mengonfigurasi browser untuk menerima pesan

Anda harus menambahkan manifes aplikasi web yang menentukan gcm_sender_id, nilai hard code yang menunjukkan bahwa FCM diizinkan untuk mengirim pesan ke aplikasi ini. Jika aplikasi telah memiliki file konfigurasi manifest.json, pastikan Anda menambahkan ID pengirim browser sama persis seperti yang terlihat (jangan ubah nilainya):

{
  "gcm_sender_id": "103953800507"
}

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 notification

Metode messaging.requestPermission() menampilkan dialog persetujuan untuk memberikan wewenang kepada pengguna untuk mengizinkan aplikasi Anda menerima notifikasi di browser. Jika izin ditolak, permintaan token pendaftaran FCM akan mengalami error.

messaging.requestPermission().then(function() {
  console.log('Notification permission granted.');
  // TODO(developer): Retrieve an Instance ID token for use with FCM.
  // ...
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

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 saat ini

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. Kecuali Anda sudah 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 saat ini:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then(function(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(function(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(function() {
  messaging.getToken().then(function(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(function(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):

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.