Anlık bildirimleri bir React uygulamasına dahil etmek için Firebase Cloud Messaging (FCM) özelliğini nasıl kullanacağınızı öğrenin.

Anlık bildirimler, uygulamaların, uygulamayı aktif kullanımlarından bağımsız olarak kullanıcıların cihazlarına zamanında güncellemeler, uyarılar veya kişiselleştirilmiş mesajlar göndermesine olanak tanır. Bu bildirimler, sürekli kullanıcı etkileşimi ve anında bağlantı sağlar.

Web uygulamaları söz konusu olduğunda, tarayıcı bu bildirimleri başlangıçta yakalar ve ardından bunları ilgili uygulamaya iletir.

Bir Firebase Projesi Kurun

Başlamak ve bir Firebase projesi oluşturmak için aşağıdaki adımları izleyin:

  1. Başını aşmak Firebase Geliştirici Konsolu, Google e-posta adresinizi kullanarak oturum açın ve Konsola Git Konsola genel bakış sayfasına gitmek için düğme.
  2. Konsola genel bakış sayfasında, proje oluştur Yeni bir proje oluşturmak için düğmesine basın. Ardından projenin adını girin.
  3. Proje başarıyla oluşturulduktan sonra, projenin genel bakış sayfasına gidin. API anahtarları oluşturmak için Firebase'de bir uygulama kaydetmeniz gerekir. Bir uygulamayı kaydetmek için tıklayın
    instagram viewer
    ağ simgesine tıklayın, uygulama adını girin ve Uygulamayı kaydet düğme.
  4. React uygulamanızı kaydettikten sonra Firebase yapılandırma kodunu kopyalayın.

Firebase Bulut Mesajlaşma (FCM) Hizmetini Yapılandırma

Uygulamanızı Firebase'e kaydettirdikten sonraki adım, Firebase Cloud Messaging (FCM) hizmetini yapılandırmaktır.

  1. Şuraya git: Proje ayarları sayfa.
  2. Ardından, Bulut Mesajlaşma sekmesi Proje ayarları sayfa. Firebase Cloud Messaging, harici push hizmetlerine bağlanmak için Application Identity anahtar çiftlerini kullanır. Bu nedenle, benzersiz kimlik anahtarınızı oluşturmanız gerekir.
  3. Üzerinde Bulut Mesajlaşma ayarlar, şuraya gidin: Web yapılandırması bölümüne tıklayın ve Anahtar çifti oluştur benzersiz anahtarınızı oluşturmak için düğmesine basın.

React Uygulamasını Kurun

Birinci, bir React uygulaması oluştur. Yüklendikten sonra, devam edin ve yükleyin ateş üssü Ve tepki-sıcak-tost React uygulamasında push bildirimlerini uygulamak için kullanacağınız paketler.

npm install firebase tepki-sıcak-tost

Bu projenin kaynak kodunu burada bulabilirsiniz. GitHub deposu.

Firebase'i ve Bulut Mesajlaşma Hizmetini Yapılandırma

senin yanına git Proje ayarları geliştirici konsolundaki sayfa ve sağlanan Firebase yapılandırma nesnesini kopyalayın. İçinde kaynak dizin, yeni bir tane oluştur firebase.js dosyasını açın ve aşağıdaki kodu ekleyin.

içe aktarmak { Uygulamayı başlat } itibaren"ateş tabanı/uygulama";
içe aktarmak { getMessaging, getToken, onMessage } itibaren"firebase/mesajlaşma";
sabit firebaseConfig = {
 apiKey: "",
 yetki alanı: "",
 proje kimliği: "",
 depolamaBucket: "",
 mesajlaşmaSenderId: "",
 uygulama kimliği: ""
};
sabit uygulama = Uygulamayı başlat (firebaseConfig);
sabit mesajlaşma = getMessaging (uygulama);

Yukarıdakileri değiştirin firebaseConfig kopyaladığınız ile nesne Proje ayarları sayfa. Bu kod, Firebase örneğini kurar ve uygulamanızda FCM işlevselliğini etkinleştirmek için bulut mesajlaşma nesnesini başlatır.

Bildirimlerin Kullanıcı İzin İsteklerini Yönetin

React uygulamalarının Firebase'in Bulut Mesajlaşma hizmetinden anlık bildirimler almasına izin vermek için kullanıcı izinlerini yönetmeniz gerekir.

Bu, tanımlamayı ve çağırmayı içerir. istek izni önceden yapılandırdığınız mesajlaşma nesnesi tarafından sağlanan yöntem. Kullanıcının bildirimlerin izin isteklerine verdiği yanıtları doğru bir şekilde işlemenizi sağlar.

içine aşağıdaki kodu ekleyin firebase.js mesajlaşma nesnesini başlattıktan sonra dosya.

ihracatsabit istekİzin = () => {
konsol.kayıt("Kullanıcı İzni İsteniyor...");
 Bildirim.requestPermission().then((izin) => {


eğer (izin "imtiyazlı") {


konsol.kayıt("Bildirim Kullanıcı İzni Verildi."); 
geri dönmek getToken (mesajlaşma, { vapidKey: "Notification_key_pair" })
 .Daha sonra((akım belirteci) => {


eğer (geçerli Jeton) {


konsol.kayıt("Müşteri Jetonu:", geçerli Belirteç);
 } başka {

konsol.kayıt('Uygulama kayıt belirteci oluşturulamadı.');
 }
 })
 .yakalamak((hata) => {


konsol.kayıt('Belirteci alma isteğinde bulunurken bir hata oluştu.', hata);
 });
 } başka {


konsol.kayıt("Kullanıcı İzni Reddedildi.");
 }
 });


 }
requestPermission();

Sağlanan kod, bildirimler için kullanıcı izni ister ve izin yanıtını işler. İzin verilirse, aşağıdakileri kullanarak uygulama için bir kayıt belirteci almaya devam eder: Token Al işlev.

Kayıt belirteci, bildirimleri alan cihaz veya tarayıcı için bir tanımlayıcı görevi görür. Ardından, Firebase Bulut Mesajlaşma ayarları sayfasında bir bildirim kampanyası oluşturmak için bu belirteci kullanabilirsiniz.

Yer tutucuyu değiştirdiğinizden emin olun Bildirim_key_pair daha önce oluşturduğunuz gerçek anahtar çifti ile Web Yapılandırması bölüm.

Bildirim Dinleyicilerini Tanımla

Her türlü gelen bildirimi işlemek için, gelen bildirimleri izlemek üzere mesaj dinleyicileri ve herhangi bir mesajlaşma olayını tetiklemek için geri arama işlevleri ayarlamak gerekir.

senin içinde firebase.js dosyasına aşağıdaki kodu ekleyin.

ihracatsabit onMessageListener = () =>
yeniSöz((çözmek) => {
 onMessage (mesajlaşma, (yük) => {
 çözmek (yük);
 });
});

Bu işlev, özellikle push bildirimleri için bir mesaj dinleyicisi kurar. bu onMessage içinde işlev onMessageListener uygulama bir push bildirimi aldığında ve odaklandığında tetiklenir.

Bir bildirim alındığında, mesaj yükü, mesajın başlığı ve gövdesi gibi bildirimle ilişkili verileri içerecektir.

Bir Firebase Mesajlaşma Hizmeti Çalışanı Tanımlayın

FCM, bir Firebase Mesajlaşması gerektirir hizmet çalışanı gelen push bildirimlerini işlemek için.

Hizmet çalışanı, arka planda çalışan ve push bildirimlerini işleyen bir JavaScript dosyasıdır; kullanıcı uygulamayı kapatmış veya farklı bir sekmeye geçmiş olsa bile bildirimleri almak ve görüntülemek için uygulama pencere.

İçinde /public dizin, yeni bir tane oluştur firebase-messaging-sw.js dosyasını açın ve aşağıdaki kodu ekleyin.

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");
//Firebase yapılandırma nesnesi 
sabit firebaseConfig = {
"yapılandırma bilgileri"
 };


firebase.initializeApp (firebaseConfig);
sabit mesajlaşma = firebase.messaging();


mesajlaşma.onBackgroundMessage(işlev(yük) {
konsol.kayıt('Arka planda mesaj alındı', yük);
sabit bildirimTitle = payload.notification.title;
sabit bildirim Seçenekleri = {
 gövde: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 bildirim Seçenekleri);
});

Bu kod, React uygulamasında Firebase Cloud Messaging için bir hizmet çalışanı kurarak bildirimlerin işlenmesini ve görüntülenmesini sağlar.

Bir Bildirim Bileşeni Oluşturun

Yeni bir tane oluştur bileşenler/Bildirim.js dosya /src dizin ve aşağıdaki kodu ekleyin.

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Tost makinesi, tost } itibaren"tepki-sıcak-tost";
içe aktarmak { requestPermission, onMessageListener } itibaren'../ateş tabanı';
işlevBildiri() {
sabit [bildirim, setNotification] = useState({ başlık: '', vücut: '' });
 useEffect(() => {
 requestPermission();
sabit aboneliği iptal et = onMessageListener().then((yük) => {
 bildirim ayarla({
 başlık: yük?.bildirim?.başlık,
 gövde: yük?.bildirim?.vücut,
 });
 tost.başarı(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 süre: 60000, 
 konum: 'sağ üst', bölüm ile ilgili tarayıcı sayfası
 });
});
geri dönmek() => {
 abonelikten çık.catch((hata) =>konsol.kayıt('arızalı: ', hata));
 };
 }, []);
geri dönmek (



 </div>
 );
}
ihracatvarsayılan Bildiri;

Bu kod, push bildirimlerini işleyen bir bileşeni tanımlar. kullanır tepki-sıcak-tost kullanıcıya bildirimleri görüntülemek için kitaplık.

Bileşen, kullanıcı izni ister, kullanarak gelen mesajları dinler. onMessageListener işlevini kullanır ve varsayılan olarak tarayıcı sayfasının sağ üst bölümünde alınan başlık ve gövdeyle birlikte bir dakikalık bir bildirim görüntüler. Resmin yardımıyla bildirimi daha da özelleştirebilirsiniz. tepki-sıcak-tost dokümantasyon ve CSS konumu özelliği.

Son olarak, güncelleyin Uygulama.js içe aktarmak için dosya Bildiri bileşen.

içe aktarmak'./Uygulama.css';
içe aktarmak Bildiri itibaren'./bileşenler/Bildirim';
işlevUygulama() {
geri dönmek (
"Uygulama">
"Uygulama başlığı"> 

 </header> 
 </div>
 );
}
ihracatvarsayılan Uygulama;

Push Bildirim Özelliğini Test Edin

Devam edin ve geliştirme sunucusunu çalıştırın ve açın http://locahlhost: Uygulamaya erişmek için tarayıcınızda 3000. Uygulamanın bildirim almasına izin vermek için aşağıdaki açılır pencereyi almalısınız.

Tıklamak İzin vermek. bu müşteri jetonu oluşturulmalı ve oturum açılmalıdır. tarayıcı konsolu. Jetonu, React uygulamanıza bildirim kampanyaları göndermek için kullanacaksınız.

Kopyala müşteri jetonu ve Firebase'in geliştirici konsoluna gidin Projeye Genel Bakış sayfa. Tıkla Bulut Mesajlaşma altındaki kart Kitlenizi büyütün ve etkileşim kurun bölüm.

Tıklamak İlk kampanyanızı oluşturun, seçme Firebase Bildirim mesajlarıve bildiriminiz için bir başlık ve mesaj girin. Altında Cihaz önizlemesi bölüm, tıklayın Test mesajı gönder.

Aşağıdaki açılır pencereye istemci belirtecini yapıştırın ve ekleyin ve tıklayın Ölçek itme bildirimi göndermek için.

Uygulamadaysanız, bir push bildirimi alacaksınız. Değilse, bir arka plan bildirimi alacaksınız.

Firebase Bulut Mesajlaşma Hizmetini Kullanarak Anlık Bildirimler Gönderme

Anlık bildirimler, hem web hem de mobil uygulamalar için kullanıcı deneyimini geliştirmek için değerli bir özelliktir. Bu kılavuz, Firebase kullanarak push bildirimlerini entegre etmeye yönelik kullanıcı izinlerini işleme ve mesaj dinleyicileri ayarlama adımlarını vurguladı.

Firebase Cloud Messaging API'lerinden yararlanarak, React uygulamalarınıza etkili bir şekilde zamanında güncellemeler ve kişiselleştirilmiş mesajlar sunabilirsiniz.