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

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

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

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

הוספה והפעלה של ערכת ה-SDK FCM

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

  2. מוסיפים את ה-SDK של Firebase Cloud Messaging JS ומפעילים את 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 ואילך, עליכם להפעיל את FCM Registration API בפרויקט שלכם במסוף Google Cloud. כשמפעילים את ה-API, חשוב לוודא שאתם מחוברים למסוף Cloud עם אותו חשבון Google שבו אתם משתמשים ב-Firebase, וחשוב לבחור את הפרויקט הנכון. בפרויקטים חדשים שמוסיפים את ה-SDK של FCM, ה-API הזה מופעל כברירת מחדל.

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

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

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

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

ייבוא של זוג מפתחות קיים

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

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

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

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

השיטה 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, עליכם ליצור קובץ ריק בשם הזה ולהציב אותו ברמה הבסיסית (root) של הדומיין לפני שאתם מאחזרים אסימון. תוכלו להוסיף תוכן משמעותי לקובץ בשלב מאוחר יותר בתהליך הגדרת הלקוח.

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

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) בכמה דרכים: