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

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

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

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

הוספה ואתחול של FCM SDK

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

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

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

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

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

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

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

  1. פותחים את הכרטיסייה Cloud Messaging בחלונית Settings במסוף Firebase וגוללים לקטע Web configuration.
  2. בכרטיסייה אישורים של הודעות פוש באינטרנט, מחפשים את הטקסט של הקישור 'ייבוא של צמד מפתחות קיים' ובוחרים בו.
  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.');

נדרש קובץ firebase-messaging-sw.js ב-FCM. אלא אם כבר יש לכם קובץ 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):