Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

קבל הודעות בלקוח JavaScript

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

מצב אפליקציה הוֹדָעָה נתונים שניהם
חֲזִית onMessage onMessage onMessage
רקע (עובד שירות) onBackgroundMessage (הודעת תצוגה מוצגת באופן אוטומטי) onBackgroundMessage onBackgroundMessage (הודעת תצוגה מוצגת באופן אוטומטי)

ה- JavaScript מדגם QuickStart מדגים את כל הקוד הדרוש כדי לקבל הודעות.

טפל בהודעות כאשר אפליקציית האינטרנט שלך נמצאת בחזית

על מנת לקבל את onMessage האירוע, האפליקציה חייבת להגדיר לעובד שירות הודעות Firebase ב firebase-messaging-sw.js . לחלופין, אתה יכול לספק לעובד שירות קיים ל- SDK דרך getToken(): Promise<string> .

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

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

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

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

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

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

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});

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

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

טפל בהודעות כאשר אפליקציית האינטרנט שלך נמצאת ברקע

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

הגדרת אפשרויות התראה בבקשת השליחה

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

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

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

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

לקבלת הסבר על ההבדל בין הודעות הודעה ונתונים, לראות סוגי מסר .

הגדרת אפשרויות התראה אצל עובד השירות

עבור הודעות נתונים, באפשרותך להגדיר אפשרויות התראה אצל עובד השירות. ראשית, אתחל את האפליקציה שלך בשירות העובדים:

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

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

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

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

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

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

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

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

messaging.onBackgroundMessage((payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});

שיטות מומלצות להודעות

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

  • השתמש בשדה הסמלים כדי לשלוח תמונה בעלת משמעות. במקרי שימוש רבים, זה צריך להיות לוגו של חברה או אפליקציה שהמשתמשים שלך מזהים מיד. לחלופין, עבור יישום צ'אט, ייתכן שמדובר בתמונת הפרופיל של המשתמש השולח.
  • השתמש בשדה הכותרת כדי לבטא את האופי המדויק של ההודעה. למשל, "השיב ג'ימי" מעביר מידע מדויק יותר מאשר "הודעה חדשה". אל תשתמש במרחב היקר הזה לשם החברה או האפליקציה שלך - השתמש בסמל למטרה זו.
  • אל תשתמש בכותרת או בגוף ההודעות להצגת שם האתר או הדומיין שלך; ההודעות כבר מכילות את שם הדומיין שלך.
  • להוסיף fcm_options.link , בדרך כלל לקשר האחורי המשתמשים ביישום האינטרנט שלך ולהביא אותו אל המוקד בדפדפן. במקרים נדירים בהם כל המידע שאתה צריך להעביר יכול להתאים להודעה, ייתכן שלא תזדקק לקישור.