Cara Menerapkan Notifikasi Push di React Menggunakan Firebase
Table of content:
- Menyiapkan Proyek Firebase
- Siapkan Aplikasi React
- Konfigurasikan Firebase dan Layanan Pesan Cloud
- Kelola Permintaan Izin Pengguna Notifikasi
- Tentukan Pendengar Notifikasi
- Menentukan Pekerja Layanan Perpesanan Firebase
- Buat Komponen Notifikasi
- Uji Fitur Push Notification
- Mengirim Notifikasi Push Menggunakan Layanan Firebase Cloud Messaging
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:
Baca Juga:
- Pergilah ke Konsol Pengembang Firebasemasuk 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, buat aplikasi React. 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-toast 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.
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app); 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.
export const requestPermission = () => { console.log("Requesting User Permission......");
Notification.requestPermission().then((permission) => {
if (permission === "granted") {
console.log("Notification User Permission Granted.");
return getToken(messaging, { vapidKey: `Notification_key_pair` })
.then((currentToken) => {
if (currentToken) {
console.log('Client Token: ', currentToken);
} else {
console.log('Failed to generate the app registration token.');
}
})
.catch((err) => {
console.log('An error occurred when requesting to receive the token.', err);
});
} else {
console.log("User Permission Denied.");
}
});
}
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 semua jenis notifikasi yang masuk, Anda perlu menyiapkan pendengar pesan untuk melacak notifikasi yang masuk dan fungsi panggilan balik untuk memicu peristiwa perpesanan apa pun.
Di Anda firebase.js file, tambahkan kode berikut.
export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
resolve(payload);
});
}); 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 badan pesan.
Menentukan Pekerja Layanan Perpesanan Firebase
FCM membutuhkan service worker Firebase Messaging untuk menangani notifikasi push yang masuk.
Pekerja layanan adalah file JavaScript yang berjalan di latar belakang dan menangani pemberitahuan push—ini memungkinkan aplikasi web untuk menerima dan menampilkan pemberitahuan, meskipun pengguna telah menutup aplikasi atau beralih ke tab atau jendela lain.
Dalam /publik 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");
const firebaseConfig = {
"configuration information"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
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.
import React, { useState, useEffect } from 'react';
import { Toaster, toast } from 'react-hot-toast';
import { requestPermission, onMessageListener } from '../firebase';function Notification() {
const [notification, setNotification] = useState({ title: '', body: '' });
useEffect(() => {
requestPermission();
const unsubscribe = onMessageListener().then((payload) => {
setNotification({
title: payload?.notification?.title,
body: payload?.notification?.body,
});
toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
duration: 60000,
position: 'top-right', section of the browser page
});
});
return () => {
unsubscribe.catch((err) => console.log('failed: ', err));
};
}, []);
return (
<div>
<Toaster />
</div>
);
}
export default Notification;
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.
import './App.css';
import Notification from './components/Notification';
function App() {
return (
<div className="App">
<header className="App-header">
<Notification />
</header>
</div>
);
}
export default App; Uji Fitur Push Notification
Silakan jalankan 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 AndaPilih 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.
Artikel Terkait
