Catch up on everything we announced at this year's Firebase Summit. Learn more

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

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

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

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

הוסף את Firebase לפרויקט JavaScript שלך

אם לא עשית זאת עדיין, להוסיף Firebase לפרויקט JavaScript שלך .

אם אתה משתמש כעת FCM עבור האינטרנט ורוצים לשדרג ל- SDK 6.7.0 או במאוחר, אתה חייב לאפשר API רישום FCM עבור הפרויקט שלך במסוף הענן של Google. כאשר אתה מפעיל את ה-API, ודא שאתה מחובר ל-Cloud Console עם אותו חשבון Google שבו אתה משתמש עבור Firebase, וודא שאתה בוחר את הפרויקט הנכון. בפרויקטים חדשים שמוסיפים את FCM SDK מופעל ממשק API זה כברירת מחדל.

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

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

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

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

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

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

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

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

אחזר אובייקט הודעות

גרסת אינטרנט 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

גרסת אינטרנט 8

const messaging = firebase.messaging();

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

השיטה getToken(): Promise<string> מאפשרת FCM להשתמש אישורי מפתח התפלים בעת שליחת בקשות מסר שירותי דחיפה שונות. באמצעות המפתח שיצר או מיובא על פי הוראות אישורי אינטרנט Configure עם FCM , להוסיף אותו בקוד שלך אחרי אובייקט ההודעות מאוחזר:

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

גש לאסימון הרישום

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

FCM דורש firebase-messaging-sw.js קובץ. אם כבר יש לך firebase-messaging-sw.js קובץ, ליצור קובץ ריק עם השם הזה ולמקם אותו שורש הדומיין שלך לפני תחזור אסימון. אתה יכול להוסיף תוכן משמעותי לקובץ מאוחר יותר בתהליך הגדרת הלקוח.

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

// 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):