למד כיצד להשתמש בתכונת Firebase Cloud Messaging (FCM) כדי לשלב הודעות דחיפה בתוך אפליקציית React.

הודעות דחיפה מאפשרות ליישומים לשלוח עדכונים, התראות או הודעות מותאמות בזמן ישירות למכשירים של המשתמשים, ללא קשר לשימוש הפעיל שלהם באפליקציה. הודעות אלו מבטיחות מעורבות משתמש מתמשכת וקישוריות מיידית.

במקרה של אפליקציות אינטרנט, הדפדפן לוכד את ההתראות הללו בתחילה ולאחר מכן מעביר אותן לאפליקציה המתאימה.

הגדר פרויקט Firebase

בצע את השלבים הבאים כדי להתחיל ולהגדיר פרויקט Firebase:

  1. פנה אל Firebase Developer Console, היכנס באמצעות כתובת הדוא"ל שלך ב-Google ולחץ על עבור אל קונסולה לחצן כדי לנווט לדף סקירת המסוף.
  2. בדף סקירת המסוף, לחץ על צור פרויקט לחצן כדי ליצור פרויקט חדש. לאחר מכן ספק את שם הפרויקט.
  3. לאחר שהפרויקט נוצר בהצלחה, נווט אל דף הסקירה הכללית של הפרויקט. עליך לרשום אפליקציה ב-Firebase כדי ליצור מפתחות API. כדי לרשום אפליקציה, לחץ על אינטרנט סמל, ספק את שם האפליקציה ולחץ על הרשמה אפליקציה לַחְצָן.
  4. העתק את קוד התצורה של Firebase לאחר רישום אפליקציית React שלך.

הגדר את שירות Firebase Cloud Messaging (FCM).

instagram viewer

לאחר שרשמת את האפליקציה שלך ב-Firebase, השלב הבא הוא להגדיר את שירות Firebase Cloud Messaging (FCM).

  1. נווט אל הגדרות הפרויקט עמוד.
  2. לאחר מכן, לחץ על העברת הודעות בענן לשונית ב- הגדרות הפרויקט עמוד. Firebase Cloud Messaging משתמש בצמדי מפתחות של Application Identity כדי להתחבר לשירותי דחיפה חיצוניים. מסיבה זו, עליך ליצור את מפתח הזהות הייחודי שלך.
  3. על העברת הודעות בענן הגדרות, נווט אל תצורת אינטרנט סעיף, ולחץ על צור זוג מפתחות לחצן כדי ליצור את המפתח הייחודי שלך.

הגדר את אפליקציית React

ראשון, ליצור אפליקציית React. לאחר ההתקנה, קדימה להתקין את בסיס אש ו להגיב-טוסט-חם חבילות בהן תשתמש כדי ליישם הודעות דחיפה באפליקציית React.

npm להתקין את Firebase react-hot-toast

אתה יכול למצוא את קוד המקור של הפרויקט הזה בזה מאגר GitHub.

הגדר את Firebase ואת שירות הודעות הענן

פנה אל שלך הגדרות הפרויקט הדף במסוף המפתחים, והעתק את אובייקט התצורה של Firebase שסופק. בתוך ה src ספרייה, צור חדש firebase.js קובץ והוסיפו את הקוד הבא.

יְבוּא { initializeApp } מ"firebase/app";
יְבוּא { getMessaging, getToken, onMessage } מ'firebase/הודעות';
const firebaseConfig = {
 apiKey: "",
 authDomain: "",
 מזהה פרויקט: "",
 דלי אחסון: "",
 messagingSenderId: "",
 appId: ""
};
const app = initializeApp (firebaseConfig);
const messaging = getMessaging (אפליקציה);

החלף את האמור לעיל firebaseConfig אובייקט עם זה שהעתקת ממנו הגדרות הפרויקט עמוד. קוד זה יגדיר את מופע Firebase ויאתחל את אובייקט העברת ההודעות בענן כדי לאפשר פונקציונליות FCM באפליקציה שלך.

נהל את בקשות הרשאת משתמש של הודעות

כדי לאפשר לאפליקציות React לקבל הודעות דחיפה משירות הודעות הענן של Firebase, עליך לטפל בהרשאות המשתמש.

זה כרוך בהגדרה וקריאה ל- requestPermission שיטה שסופקה על ידי אובייקט ההודעות, שהגדרת בעבר. זה מבטיח שאתה מטפל כראוי בתגובות המשתמש לבקשות ההרשאה של ההתראות.

הוסף את הקוד הבא ל- firebase.js קובץ לאחר אתחול אובייקט ההודעות.

יְצוּאconst requestPermission = () => {
לְנַחֵם.עֵץ("מבקש הרשאת משתמש...");
 Notification.requestPermission().then((רְשׁוּת) => {


אם (רְשׁוּת "ניתן") {


לְנַחֵם.עֵץ("הרשאת משתמש להודעה ניתנה."); 
לַחֲזוֹר getToken (הודעות, { vapidKey: 'זוג_מפתח_הודעה' })
 .לאחר מכן((currentToken) => {


אם (currentToken) {


לְנַחֵם.עֵץ('אסימון לקוח:', currentToken);
 } אַחֵר {

לְנַחֵם.עֵץ('הפקת אסימון הרישום של האפליקציה נכשלה.');
 }
 })
 .לתפוס((לִטְעוֹת) => {


לְנַחֵם.עֵץ('אירעה שגיאה בעת בקשת קבלת האסימון.', טעות);
 });
 } אַחֵר {


לְנַחֵם.עֵץ("הרשאת משתמש נדחתה.");
 }
 });


 }
requestPermission();

הקוד שסופק מבקש הרשאת משתמש להתראות ומטפל בתגובת ההרשאה. אם ניתנת הרשאה, הוא ממשיך לקבל אסימון רישום עבור הבקשה באמצעות ה- getToken פוּנקצִיָה.

אסימון הרישום משמש כמזהה עבור המכשיר או הדפדפן המקבלים את ההתראות. לאחר מכן תוכל להשתמש באסימון הזה כדי להגדיר מסע פרסום של התראות בדף ההגדרות של Firebase Cloud Messaging.

ודא שאתה מחליף את מציין המיקום זוג_מפתחות_הודעה עם צמד המפתחות בפועל שיצרת קודם לכן ב תצורת אינטרנט סָעִיף.

הגדר מאזיני התראות

כדי לטפל בכל סוג של התראות נכנסות, יש צורך להגדיר מאזיני הודעות כדי לעקוב אחר התראות נכנסות ופונקציות התקשרות חזרה כדי להפעיל אירועי הודעות.

אצלך firebase.js קובץ, הוסף את הקוד הבא.

יְצוּאconst onMessageListener = () =>
חָדָשׁהַבטָחָה((לִפְתוֹר) => {
 onMessage (הודעות, (עומס) => {
 פתרון (מטען);
 });
});

פונקציה זו מגדירה מאזין הודעות במיוחד עבור הודעות דחיפה. ה onMessage לתפקד בפנים onMessageListener מופעל בכל פעם שהאפליקציה מקבלת הודעת דחיפה ונמצאת בפוקוס.

כאשר מתקבלת הודעה, מטען ההודעה יכיל נתונים רלוונטיים הקשורים להתראה, כגון כותרת וגוף ההודעה.

הגדר Firebase Messaging Service Worker

FCM דורש הודעות Firebase עובד שירות כדי לטפל בהודעות דחיפה נכנסות.

ה-Service Worker הוא קובץ JavaScript שפועל ברקע ומטפל בהודעות דחיפה - הוא מאפשר את האינטרנט אפליקציה כדי לקבל ולהציג התראות, גם אם המשתמש סגר את האפליקציה או עבר ללשונית אחרת או חַלוֹן.

בתוך ה /public ספרייה, צור חדש firebase-messaging-sw.js קובץ וכלול את הקוד הבא.

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 
const firebaseConfig = {
"מידע תצורה"
 };


firebase.initializeApp (firebaseConfig);
const messaging = firebase.messaging();


messaging.onBackgroundMessage(פוּנקצִיָה(מטען) {
לְנַחֵם.עֵץ('התקבלה הודעת רקע', מטען);
const notificationTitle = payload.notification.title;
const notificationOptions = {
 body: payload.notification.body,
 };
 self.registration.showNotification (notificationTitle,
 הודעות אפשרויות);
});

קוד זה מגדיר שירות עובד עבור Firebase Cloud Messaging באפליקציית React, ומאפשר טיפול והצגה של התראות.

צור רכיב הודעה

ליצור חדש רכיבים/Notification.js קובץ ב- /src ספרייה והוסף את הקוד הבא.

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא { טוסטר, טוסט } מ'להגיב-טוסט-חם';
יְבוּא { requestPermission, onMessageListener } מ'../firebase';
פוּנקצִיָההוֹדָעָה() {
const [הודעה, setNotification] = useState({ כותרת: '', גוּף: '' });
 useEffect(() => {
 requestPermission();
const unsubscribe = onMessageListener().then((מטען) => {
 setNotification({
 כותרת: מטען?.הודעה?.כותרת,
 body: מטען?.הודעה?.גוף,
 });
 toast.success(`${payload?.notification?.title}: ${payload?.notification?.body}`, {
 מֶשֶׁך: 60000, 
 עמדה: 'למעלה מימין', קטע שֶׁל דף הדפדפן
 });
});
לַחֲזוֹר() => {
 unsubscribe.catch((לִטְעוֹת) =>לְנַחֵם.עֵץ('נכשל:', טעות));
 };
 }, []);
לַחֲזוֹר (



 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל הוֹדָעָה;

קוד זה מגדיר רכיב המטפל בהודעות דחיפה. הוא מנצל את להגיב-טוסט-חם ספריה כדי להציג התראות למשתמש.

הרכיב מבקש הרשאת משתמש, מאזין להודעות נכנסות באמצעות onMessageListener פונקציה, וכברירת מחדל מציגה הודעת טוסט עם הכותרת והגוף שהתקבלו למשך דקה אחת בחלק הימני העליון של דף הדפדפן. אתה יכול להמשיך להתאים אישית את ההודעה בעזרת הפקיד להגיב-טוסט-חם תיעוד ו מאפיין מיקום ה-CSS.

לבסוף, עדכן את ה App.js קובץ לייבא את הוֹדָעָה רְכִיב.

יְבוּא'./App.css';
יְבוּא הוֹדָעָה מ'./components/Notification';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
"אפליקציה">
"כותרת אפליקציה"> 

 </header> 
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בדוק את תכונת ה-Push Notification

קדימה, הפוך את שרת הפיתוח ופתח http://locahlhost: 3000 בדפדפן שלך כדי לגשת לאפליקציה. אתה אמור לקבל את החלון הקופץ הבא כדי לאפשר לאפליקציה לקבל הודעות.

נְקִישָׁה להתיר. ה אסימון לקוח יש ליצור ולהתחבר ל- קונסולת הדפדפן. אתה תשתמש באסימון כדי לשלוח קמפיינים של התראות לאפליקציית React שלך.

העתק את אסימון לקוח ועבור לקונסולת המפתחים של Firebase סקירת פרוייקט עמוד. לחץ על העברת הודעות בענן כרטיס מתחת ל הגדל וערב את הקהל שלך סָעִיף.

נְקִישָׁה צור את מסע הפרסום הראשון שלך, בחר הודעות התראה של Firebase, וספק כותרת והודעה להתראה שלך. תחת תצוגה מקדימה של המכשיר מקטע, לחץ שלח הודעת בדיקה.

הדבק והוסף את אסימון הלקוח בחלון המוקפץ שאחריו ולחץ מִבְחָן כדי לשלוח את הודעת הדחיפה.

אם אתה נמצא באפליקציה, תקבל הודעת דחיפה. אם לא, תקבל הודעה ברקע.

שליחת הודעות דחיפה באמצעות Firebase Cloud Messaging Service

הודעות דחיפה הן תכונה חשובה לשיפור חווית המשתמש עבור אפליקציות אינטרנט והן לנייד. מדריך זה הדגיש את השלבים לשילוב התראות דחיפה באמצעות Firebase, כולל טיפול בהרשאות משתמש והגדרת מאזיני הודעות.

על ידי מינוף ממשקי ה-API של Firebase Cloud Messaging, אתה יכול להעביר ביעילות עדכונים בזמן והודעות מותאמות אישית ליישומי React שלך.