İletileri JavaScript istemcisinde alma

Mesajların davranışı, sayfanın ön planda (odaklanmış) olup olmadığına veya arka planda, diğer sekmelerin arkasına gizlenmiş olup olmadığına ya da tamamen kapalı olup olmadığına bağlı olarak değişir. Her durumda, sayfa onMessage geri çağırma işlemini gerçekleştirmelidir ancak arka plandaki durumlarda kullanıcının web uygulamanızı ön plana getirmesine izin vermek için onBackgroundMessage işlemini gerçekleştirmeniz veya görüntülü bildirimi yapılandırmanız gerekebilir.

Uygulama durumu Bildirim Veriler İkisi de
Ön plan onMessage onMessage onMessage
Arka plan (hizmet çalışanı) onBackgroundMessage (bildirim otomatik olarak gösterilir) onBackgroundMessage onBackgroundMessage (bildirim otomatik olarak gösterilir)

JavaScript hızlı başlangıç örneği, mesajları almak için gereken tüm kodu gösterir.

Web uygulamanız ön plandayken mesajları işleme

onMessage etkinliğini almak için uygulamanızın firebase-messaging-sw.js içinde Firebase mesajlaşma hizmeti çalışanını tanımlaması gerekir. Alternatif olarak, getToken(): Promise<string> aracılığıyla SDK'ya mevcut bir hizmet çalışanı da sağlayabilirsiniz.

Web

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);
messaging_init_in_sw.js

Web

// 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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.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();
service-worker.js

Uygulamanız ön plandayken (kullanıcı şu anda web sayfanızı görüntülüyorsa) doğrudan sayfadan veri ve bildirim yükü alabilirsiniz.

Web

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

Web

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

Web uygulamanız arka plandayken mesajları işleme

Uygulama arka plandayken alınan tüm mesajlar, tarayıcıda bir görüntüleme bildirimi tetikler. Bu bildirim için başlık veya tıklama işlemi gibi seçenekleri uygulama sunucunuzdan gönderdiğiniz istekte veya istemcide hizmet çalışanı mantığını kullanarak belirtebilirsiniz.

Gönder isteğinde bildirim seçeneklerini ayarlama

FCMJavaScript API, uygulama sunucusundan gönderilen bildirim mesajları için fcm_options.link anahtarını destekler. Bu genellikle web uygulamanızdaki bir sayfaya ayarlanır:

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"
      }
    }
  }
}

Bağlantı değeri, tarayıcı sekmesinde zaten açık olan bir sayfayı gösteriyorsa bildirim tıklandığında söz konusu sekme öne çıkarılır. Sayfa açık değilse bildirim tıklandığında sayfa yeni bir sekmede açılır.

Veri mesajları fcm_options.link'ü desteklemediğinden tüm veri mesajlarına bildirim yükü eklemeniz önerilir. Alternatif olarak, hizmet çalışanını kullanarak bildirimleri de yönetebilirsiniz.

Bildirim ve veri mesajları arasındaki farkın açıklaması için Mesaj türleri başlıklı makaleyi inceleyin.

Hizmet çalışanında bildirim seçeneklerini ayarlama

Veri mesajları için bildirim seçeneklerini hizmet çalışanında ayarlayabilirsiniz. Öncelikle uygulamanızı hizmet çalışanında başlatın:

Web

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);
messaging_init_in_sw.js

Web

// 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.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.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();
service-worker.js

Seçenekleri ayarlamak için firebase-messaging-sw.js'da onBackgroundMessage numaralı telefonu arayın. Bu örnekte başlık, gövde ve simge alanları içeren bir bildirim oluşturuyoruz.

Web

import { getMessaging } from "firebase/messaging/sw";
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);
});
messaging_on_background_message.js

Web

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);
});
service-worker.js

Bildirimler için en iyi uygulamalar

Web için push mesajlaşma hakkında bilginiz varsa iyi bir bildirimin özellikleri ile ilgili genel yönergeleri daha önce okumuş olabilirsiniz. Web için FCM aracılığıyla bildirim gönderen geliştiriciler için en önemli hususlar doğruluk ve alaka düzeyidir. Aldığınız bildirimlerin doğru ve alakalı olmasını sağlamanıza yönelik bazı özel önerileri aşağıda bulabilirsiniz:

  • Anlamlı bir resim göndermek için simge alanını kullanın. Birçok kullanım alanında bu, kullanıcılarınızın hemen tanıyacağı bir şirket veya uygulama logosu olmalıdır. Bir sohbet uygulamasında, gönderen kullanıcının profil resmi de olabilir.
  • İletinin tam yapısını ifade etmek için başlık alanını kullanın. Örneğin, "Cem yanıt verdi" ifadesi, "Yeni mesaj" ifadesinden daha net bir bilgi verir. Bu değerli alanı şirket veya uygulama adınız için kullanmayın. Bu amaç için simgeyi kullanın.
  • Web sitenizin adını veya alanınızı göstermek için bildirim başlığını ya da içeriğini kullanmayın. Bildirimler zaten alan adınızı içerir.
  • Genellikle kullanıcıyı web uygulamanıza geri bağlamak ve tarayıcıda uygulamayı odağa getirmek için fcm_options.link ekleyin. İletmeniz gereken tüm bilgilerin bildirime sığabileceği nadir durumlarda bağlantıya ihtiyacınız olmayabilir.