הגדר אפליקציית לקוח JavaScript Firebase Cloud Messaging

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

FCM SDK נתמך רק בדפים המוצגים באמצעות 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:

API מודולרי אינטרנט

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);

API עם מרחב שמות אינטרנט

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

הגדר אישורי אינטרנט עם FCM

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

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

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

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

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

  1. פתח את הכרטיסייה Cloud Messaging בחלונית ההגדרות של מסוף Firebase וגלול אל הקטע תצורת אינטרנט .
  2. בכרטיסייה Web Push אישורים , מצא ובחר את טקסט הקישור, "יבא זוג מפתחות קיים".
  3. בתיבת הדו-שיח ייבוא ​​זוג מפתחות , ספק את המפתחות הציבוריים והפרטיים שלך בשדות המתאימים ולחץ על ייבוא ​​. המסוף מציג את מחרוזת המפתח הציבורי ואת התאריך שנוספו.

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

הגדר אישורי אינטרנט באפליקציה שלך

השיטה getToken(): Promise<string> מאפשרת ל-FCM להשתמש באישור מפתח VAPID בעת שליחת בקשות הודעות לשירותי דחיפה שונים. באמצעות המפתח שיצרת או ייבאת לפי ההוראות ב- Configure Web Credentials with 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 modular API

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);
  // ...
});

Web namespaced API

// 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);
  // ...
});

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

הצעדים הבאים

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