Pelajari cara memanfaatkan fitur Firebase Cloud Messaging (FCM) untuk memasukkan notifikasi push ke dalam aplikasi React.
Pemberitahuan push memungkinkan aplikasi untuk mengirim pembaruan, peringatan, atau pesan yang dipersonalisasi secara tepat waktu langsung ke perangkat pengguna, terlepas dari penggunaan aplikasi secara aktif. Notifikasi ini memastikan keterlibatan pengguna yang berkelanjutan dan konektivitas instan.
Dalam hal aplikasi web, browser menangkap pemberitahuan ini pada awalnya dan selanjutnya meneruskannya ke aplikasi yang sesuai.
Menyiapkan Proyek Firebase
Ikuti langkah-langkah di bawah ini untuk memulai dan menyiapkan proyek Firebase:
- Pergilah ke Konsol Pengembang Firebase, masuk menggunakan alamat email Google Anda, dan klik Pergi ke Konsol tombol untuk menavigasi ke halaman ikhtisar konsol.
- Pada halaman ikhtisar konsol, klik Buat proyek tombol untuk membuat proyek baru. Kemudian berikan nama proyek.
- Setelah proyek berhasil dibuat, navigasikan ke halaman ikhtisar proyek. Anda perlu mendaftarkan aplikasi di Firebase untuk menghasilkan kunci API. Untuk mendaftarkan aplikasi, klik pada Web ikon, berikan nama aplikasi, dan klik Daftarkan aplikasi tombol.
- Salin kode konfigurasi Firebase setelah mendaftarkan aplikasi React Anda.
Mengonfigurasi Layanan Firebase Cloud Messaging (FCM).
Setelah Anda mendaftarkan aplikasi Anda di Firebase, langkah selanjutnya adalah mengonfigurasi layanan Firebase Cloud Messaging (FCM).
- Arahkan ke Pengaturan proyek halaman.
- Selanjutnya, klik pada Pesan Awan tab pada Pengaturan proyek halaman. Firebase Cloud Messaging menggunakan pasangan kunci Identitas Aplikasi untuk terhubung dengan layanan push eksternal. Untuk alasan ini, Anda perlu membuat kunci identitas unik Anda.
- Di Pesan Awan pengaturan, arahkan ke konfigurasi web bagian, dan klik pada Hasilkan pasangan kunci tombol untuk menghasilkan kunci unik Anda.
Siapkan Aplikasi React
Pertama, membuat aplikasi Bereaksi. Setelah diinstal, lanjutkan dan instal firebase Dan reaksi-panas-bersulang paket yang akan Anda gunakan untuk mengimplementasikan notifikasi push di aplikasi React.
npm install firebase react-hot-toastAnda dapat menemukan kode sumber proyek ini di sini repositori GitHub.
Konfigurasikan Firebase dan Layanan Pesan Cloud
Kepala ke Anda Pengaturan proyek di konsol pengembang, dan salin objek konfigurasi Firebase yang disediakan. Dalam src direktori, buat yang baru firebase.js file dan tambahkan kode berikut.
impor { initializeApp } dari"firebase/aplikasi";
impor { getMessaging, getToken, onMessage } dari'firebase/perpesanan';
const firebaseConfig = {
kunci API: "",
domain auth: "",
id proyek: "",
ember penyimpanan: "",
messagingSenderId: "",
appId: ""
};
const aplikasi = initializeApp (firebaseConfig);
const perpesanan = getMessaging (aplikasi);Ganti yang di atas firebaseConfig objek dengan yang Anda salin dari Pengaturan proyek halaman. Kode ini akan menyiapkan instance Firebase dan menginisialisasi objek perpesanan cloud untuk mengaktifkan fungsionalitas FCM di aplikasi Anda.
Kelola Permintaan Izin Pengguna Notifikasi
Untuk mengizinkan aplikasi React menerima pemberitahuan push dari layanan Cloud Messaging Firebase, Anda perlu menangani izin pengguna.
Ini melibatkan mendefinisikan dan memanggil requestPermission metode yang disediakan oleh objek perpesanan, yang telah Anda konfigurasikan sebelumnya. Ini memastikan bahwa Anda menangani respons pengguna terhadap permintaan izin pemberitahuan dengan benar.
Tambahkan kode berikut ke firebase.js file setelah menginisialisasi objek perpesanan.
eksporconst permintaanPermission = () => {menghibur.catatan("Meminta Izin Pengguna...");
Notification.requestPermission().then((izin) => {jika (izin "diberikan") {
menghibur.catatan("Izin Pengguna Pemberitahuan Diberikan.");
kembali getToken (pesan, { vapidKey: `Pemberitahuan_key_pair` })
.Kemudian((Token saat ini) => {jika (Token saat ini) {
menghibur.catatan('Token Klien:', Token saat ini);
} kalau tidak {
menghibur.catatan('Gagal membuat token pendaftaran aplikasi.');
}
})
.menangkap((berbuat salah) => {menghibur.catatan('Terjadi kesalahan saat meminta untuk menerima token.', salah);
});
} kalau tidak {menghibur.catatan("Izin Pengguna Ditolak.");
}
});}
requestPermission();
Kode yang diberikan meminta izin pengguna untuk notifikasi dan menangani respons izin. Jika izin diberikan, ia melanjutkan untuk mendapatkan token pendaftaran untuk aplikasi menggunakan Dapat token fungsi.
Token pendaftaran berfungsi sebagai pengidentifikasi untuk perangkat atau browser yang menerima notifikasi. Anda kemudian dapat menggunakan token ini untuk menyiapkan kampanye notifikasi di halaman setelan Firebase Cloud Messaging.
Pastikan Anda mengganti placeholder Notification_key_pair dengan pasangan kunci aktual yang Anda buat sebelumnya di Konfigurasi Web bagian.
Tentukan Pendengar Notifikasi
Untuk menangani segala jenis notifikasi masuk, Anda perlu menyiapkan pendengar pesan untuk melacak notifikasi masuk dan fungsi panggilan balik untuk memicu peristiwa perpesanan apa pun.
Di Anda firebase.js file, tambahkan kode berikut.
eksporconst onMessageListener = () =>
baruJanji((menyelesaikan) => {
onMessage (pesan, (muatan) => {
menyelesaikan (muatan);
});
});Fungsi ini menyiapkan pendengar pesan khusus untuk pemberitahuan push. Itu onMessage berfungsi di dalam onMessageListener dipicu setiap kali aplikasi menerima pemberitahuan push dan fokus.
Saat notifikasi diterima, payload pesan akan berisi data relevan yang terkait dengan notifikasi, seperti judul dan isi pesan.
Menentukan Pekerja Layanan Perpesanan Firebase
FCM memerlukan Firebase Messaging pekerja layanan untuk menangani notifikasi push yang masuk.
Pekerja layanan adalah file JavaScript yang berjalan di latar belakang dan menangani pemberitahuan push—ini memungkinkan web aplikasi untuk menerima dan menampilkan notifikasi, meskipun pengguna telah menutup aplikasi atau beralih ke tab lain atau jendela.
Dalam /public direktori, buat yang baru firebase-messaging-sw.js file dan sertakan kode berikut.
importScripts(" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
importScripts(" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");//objek konfigurasi Firebase
const firebaseConfig = {
"informasi konfigurasi"
};firebase.initializeApp (firebaseConfig);
const perpesanan = firebase.messaging();messaging.onBackgroundMessage(fungsi(muatan) {
menghibur.catatan('Menerima pesan latar belakang', muatan);
const notificationTitle = payload.notification.title;
const notifikasiOptions = {
body: payload.notification.body,
};
self.registration.showNotification (notificationTitle,
NotificationOptions);
});
Kode ini menyiapkan pekerja layanan untuk Firebase Cloud Messaging di aplikasi React, memungkinkan penanganan dan tampilan notifikasi.
Buat Komponen Notifikasi
Buat yang baru komponen/Pemberitahuan.js berkas di /src direktori dan tambahkan kode berikut.
impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { Pemanggang roti, roti panggang } dari'bereaksi-panas-bersulang';
impor { requestPermission, onMessageListener } dari'../firebase';
fungsiPemberitahuan() {
const [pemberitahuan, setNotifikasi] = useState({ judul: '', tubuh: '' });
gunakanEfek(() => {
requestPermission();
const berhenti berlangganan = onMessageListener().kemudian((muatan) => {
setNotifikasi({
judul: muatan?.pemberitahuan?.judul,
body: payload?.pemberitahuan?.body,
});
bersulang.sukses(`${payload?.pemberitahuan?.title}: ${payload?.notification?.body}`, {
durasi: 60000,
posisi: 'kanan atas', bagian dari halaman peramban
});
});
kembali() => {
berhenti berlangganan.menangkap((berbuat salah) =>menghibur.catatan('gagal: ', salah));
};
}, []);
kembali (
</div>
);
}
eksporbawaan Pemberitahuan;
Kode ini mendefinisikan komponen yang menangani pemberitahuan push. Ini menggunakan reaksi-panas-bersulang library untuk menampilkan notifikasi kepada pengguna.
Komponen meminta izin pengguna, mendengarkan pesan masuk menggunakan onMessageListener fungsi, dan secara default menampilkan pemberitahuan bersulang dengan judul dan isi yang diterima selama satu menit di bagian kanan atas halaman browser. Anda selanjutnya dapat menyesuaikan notifikasi dengan bantuan resmi reaksi-panas-bersulang dokumentasi dan properti posisi CSS.
Terakhir, perbarui Aplikasi.js file untuk mengimpor Pemberitahuan komponen.
impor'./App.css';
impor Pemberitahuan dari'./komponen/Pemberitahuan';
fungsiAplikasi() {
kembali (
"Aplikasi">
"Tajuk-aplikasi">
</header>
</div>
);
}
eksporbawaan Aplikasi;
Uji Fitur Push Notification
Silakan putar server pengembangan dan buka http://locahlhost: 3000 di browser Anda untuk mengakses aplikasi. Anda harus mendapatkan pop-up berikut untuk memungkinkan aplikasi menerima pemberitahuan.
Klik Mengizinkan. Itu token klien harus dibuat dan login konsol peramban. Anda akan menggunakan token untuk mengirimkan kampanye notifikasi ke aplikasi React Anda.
Salin token klien dan buka konsol pengembang Firebase Ulasan Proyek halaman. Klik Pesan Awan kartu di bawah Kembangkan & libatkan audiens Anda bagian.
Klik Buat kampanye pertama Anda, Pilih Pesan Pemberitahuan Firebase, dan berikan judul dan pesan untuk notifikasi Anda. Di bawah Pratinjau perangkat bagian, klik Kirim pesan percobaan.
Tempel dan tambahkan token klien di jendela pop-up yang mengikuti dan klik Tes untuk mengirim pemberitahuan push.
Jika Anda menggunakan aplikasi, Anda akan menerima pemberitahuan push. Jika tidak, Anda akan menerima pemberitahuan latar belakang.
Mengirim Notifikasi Push Menggunakan Layanan Firebase Cloud Messaging
Pemberitahuan push adalah fitur berharga untuk meningkatkan pengalaman pengguna untuk aplikasi web dan seluler. Panduan ini menyoroti langkah-langkah untuk mengintegrasikan notifikasi push menggunakan Firebase, termasuk menangani izin pengguna dan menyiapkan pemroses pesan.
Dengan memanfaatkan API Firebase Cloud Messaging, Anda dapat secara efektif mengirimkan pembaruan tepat waktu dan pesan yang dipersonalisasi ke aplikasi React Anda.
