پیام ها را در یک سرویس گیرنده JavaScript دریافت کنید

بسته به اینکه صفحه در پیش زمینه باشد (فوکوس داشته باشد) ، یا در پس زمینه ، در پشت زبانه های دیگر پنهان شده یا کاملاً بسته شود ، رفتار پیام ها متفاوت است. در تمام موارد صفحه باید رسیدگی onMessage پاسخ به تماس، اما در موارد پس زمینه شما همچنین ممکن است نیاز به رسیدگی onBackgroundMessage یا پیکربندی اطلاع رسانی صفحه نمایش به کاربر اجازه می دهد به برنامه وب خود را به پیش زمینه.

حالت برنامه اطلاع داده ها هر دو
پیش زمینه onMessage onMessage onMessage
سابقه (کارگر خدمات) onBackgroundMessage (اطلاع رسانی صفحه نمایش به طور خودکار نشان داده شده است) onBackgroundMessage onBackgroundMessage (اطلاع رسانی صفحه نمایش به طور خودکار نشان داده شده است)

جاوا اسکریپت نمونه شروع سریع نشان می دهد تمام کد مورد نیاز برای دریافت پیام است.

وقتی برنامه وب شما در پیش زمینه قرار دارد ، پیام ها را مدیریت کنید

به منظور دریافت onMessage رویداد، برنامه خود را باید فایربیس پیام کارگر خدماتی در تعریف 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/9.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.2/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 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/9.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.2/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 برای وب اعلان ارسال می کنند ، مهمترین ملاحظات دقت و ارتباط هستند. در اینجا چند توصیه خاص برای حفظ دقیق و مرتبط بودن اعلان ها آورده شده است:

  • از قسمت نماد برای ارسال یک تصویر معنی دار استفاده کنید. برای بسیاری از موارد استفاده ، این باید نشان شرکت یا برنامه ای باشد که کاربران شما بلافاصله تشخیص می دهند. یا ، برای یک برنامه چت ، ممکن است تصویر نمایه کاربر ارسال کننده باشد.
  • از قسمت عنوان برای بیان ماهیت دقیق پیام استفاده کنید. به عنوان مثال ، "جیمی پاسخ داد" اطلاعات دقیق تری را نسبت به "پیام جدید" منتقل می کند. از این فضای ارزشمند برای نام شرکت یا برنامه خود استفاده نکنید - برای این منظور از نماد استفاده کنید.
  • از عنوان یا متن اعلان برای نمایش نام وب سایت یا دامنه خود استفاده نکنید. اعلان ها از قبل حاوی نام دامنه شما هستند.
  • اضافه کردن fcm_options.link ، معمولا به لینک تماس کاربر را به برنامه وب خود را آورد و آن را به تمرکز در مرورگر. در موارد نادری که تمام اطلاعات مورد نیاز برای انتقال می تواند در اعلان قرار گیرد ، ممکن است نیازی به پیوند نداشته باشید.