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

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

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

בממשק האינטרנט של FCM נעשה שימוש בפרטי כניסה לאינטרנט שנקראים מפתחות VAPID (Voluntary Application Server Identification), כדי לאשר שליחת בקשות לשירותי 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):