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

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

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

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

  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 . אם לא ניתנה הרשאת התראה, שיטה זו תבקש מהמשתמש הרשאות התראה. אחרת, הוא מחזיר אסימון או דוחה את ההבטחה עקב טעות.

שירות שליחת ההודעות דורש 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 לאינטרנט (JavaScript):