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

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

יש תמיכה ב-SDK של FCM רק בדפים שמוצגים באמצעות HTTPS. הסיבה לכך היא השימוש ב-service workers, שזמינים רק באתרים עם HTTPS. אם אתם זקוקים לספק, מומלץ להשתמש ב-Firebase Hosting, שמציע שכבה ללא עלות לאירוח 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 נעשה שימוש בפרטי כניסה לאינטרנט שנקראים 'Voluntary Application Server Identification' (זיהוי שרתי אפליקציות מרצון) או מפתחות VAPID, כדי לאשר שליחת בקשות לשירותי Web Push נתמכים. כדי להירשם לקבלת התראות דחיפה באפליקציה, צריך לשייך זוג מפתחות לפרויקט 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 כששולחים בקשות להעברת הודעות לשירותי דחיפה שונים. באמצעות המפתח שיצרתם או ייבאתם לפי ההוראות במאמר הגדרת פרטי כניסה לאינטרנט באמצעות 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) בכמה דרכים: