הגדרה של אפליקציית לקוח להעברת הודעות בענן ב-JavaScript ב-Firebase

FCM API של JavaScript מאפשר לקבל הודעות התראות ב אפליקציות אינטרנט שפועלות בדפדפנים שתומכים Push API. הרשימה כוללת את גרסאות הדפדפנים שמפורטות במטריית התמיכה הזו, ותוספים ל-Chrome דרך Push API.

יש תמיכה ב-SDK של FCM רק בדפים שמוצגים באמצעות HTTPS. הסיבה לכך היא השימוש ב-service workers, שזמינים רק באתרים עם HTTPS. אם המיקום צריך ספק, אירוח ב-Firebase מומלץ ומספק רמה ללא עלות לאירוח HTTPS בדומיין שלכם.

כדי להתחיל להשתמש ב-FCM JavaScript API, צריך להוסיף Firebase מוסיפים לוגיקה לאפליקציית האינטרנט ומוסיפים לוגיקה כדי לגשת לאסימוני רישום.

הוספה של ה-SDK של FCM והפעלה שלו

  1. אם עדיין לא עשיתם זאת, מתקינים את Firebase JS SDK ומפעילים את Firebase.

  2. מוסיפים את Firebase Cloud Messaging JS SDK ומפעילים את Firebase Cloud Messaging:

Web 

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

אם משתמשים כרגע ב-FCM לאינטרנט ורוצים לשדרג ל-SDK 6.7.0 ואילך, עליך להפעיל את ממשק API לרישום FCM לפרויקט במסוף Google Cloud. כשמפעילים את ה-API, חשוב לוודא שאתם מחוברים למסוף Cloud עם אותו חשבון Google שבו אתם משתמשים ב-Firebase, וחשוב לבחור את הפרויקט הנכון. פרויקטים חדשים שמוסיפים את ה-API הזה מופעל כברירת מחדל ב-FCM SDK.

הגדרת פרטי כניסה לאינטרנט באמצעות FCM

בממשק האינטרנט של FCM נעשה שימוש בפרטי כניסה לאינטרנט שנקראים 'Voluntary Application Server Identification' (זיהוי שרתי אפליקציות מרצון) או מפתחות VAPID, כדי לאשר שליחת בקשות לשירותי Web Push נתמכים. כדי להירשם לקבלת התראות דחיפה באפליקציה, צריך לשייך זוג מפתחות לפרויקט Firebase. אפשר לבצע אחת מהפעולות הבאות: ליצור זוג מפתחות חדש או לייבא זוג מפתחות קיים דרך Firebase מסוף.

יצירת זוג מפתחות חדש

  1. פותחים את הכרטיסייה 'העברת הודעות בענן' במסוף Firebase הגדרות וגוללים לקטע הגדרות אינטרנט.
  2. בכרטיסייה Web Push certificates, לוחצים על Generate Key Pair. במסוף תוצג הודעה על כך שזוג המפתחות נוצר, וגם המחרוזת של המפתח הציבורי והתאריך שבו הוא נוסף.

ייבוא של צמד מפתחות קיים

אם יש לכם זוג מפתחות קיים שאתם כבר משתמשים בו באפליקציית האינטרנט, תוכלו יוכל לייבא אותו אל FCM כדי להגיע לאפליקציית האינטרנט הקיימת מכונות באמצעות ממשקי API של FCM. כדי לייבא מפתחות, צריך גישה ברמת הבעלים לפרויקט Firebase. יבוא של הציבור הקיים שלך מפתח פרטי בקידוד בטוח של כתובת URL ב-base64:

  1. פותחים את הכרטיסייה 'העברת הודעות בענן' במסוף Firebase הגדרות וגוללים לקטע הגדרות אינטרנט.
  2. בכרטיסייה Web Push certificates, מחפשים את טקסט הקישור 'import an existing key pair' ובוחרים בו.
  3. בתיבת הדו-שיח ייבוא זוג מפתחות, מספקים את המפתחות הציבוריים והפרטיים בשדות המתאימים ולוחצים על ייבוא. במסוף תוצג המחרוזת של המפתח הציבורי והתאריך שבו הוא נוסף.

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

הגדרת פרטי כניסה לאינטרנט באפליקציה

השיטה getToken(): Promise<string> מאפשרת ל-FCM להשתמש בפרטי הכניסה של מפתח VAPID במהלך שליחת הודעה בקשות לשירותי Push שונים. באמצעות המפתח שיצרתם או ייבאתם לפי ההוראות במאמר הגדרת פרטי כניסה לאינטרנט באמצעות FCM, מוסיפים אותו לקוד אחרי אחזור אובייקט ההודעה:

import { getMessaging, getToken } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

גישה לאסימון הרישום

כשצריך לאחזר את אסימון הרישום הנוכחי של מופע אפליקציה, קודם עליך לבקש הרשאות לשליחת התראות מהמשתמש עם Notification.requestPermission(). כשהקריאה מוצגת כמוצג, האסימון מחזיר אסימון אם ההבטחה ניתנה או נדחתה אם נדחה: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM מחייב קובץ firebase-messaging-sw.js. עליכם ליצור קובץ ריק, אלא אם כבר יש לכם קובץ firebase-messaging-sw.js עם השם הזה והציבו אותו בתיקיית השורש של הדומיין לפני אחזור האסימון. תוכלו להוסיף תוכן משמעותי לקובץ בשלב מאוחר יותר בתהליך הגדרת הלקוח.

כדי לאחזר את האסימון הנוכחי:

Web

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
messaging_get_token.js

Web

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});
index.js

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

השלבים הבאים

אחרי שמשלימים את שלבי ההגדרה, מופיעות כמה אפשרויות להעברה העברה ב-FCM לאינטרנט (JavaScript):