Firebase Cloud Messaging'i kullanmaya başlama


Bu hızlı başlangıç kılavuzunda, mesajları güvenilir bir şekilde gönderebilmeniz için Firebase Cloud Messaging özelliğini mobil ve web istemci uygulamalarınızda nasıl ayarlayacağınız açıklanmaktadır. Sunucu ortamları için Sunucu ortamınız ve FCM başlıklı makaleyi inceleyin.

JavaScript Firebase Cloud Messaging istemci uygulaması oluşturma

FCM JavaScript API'si, Push API'yi destekleyen tarayıcılarda çalışan web uygulamalarında bildirim mesajları almanıza olanak tanır. Bu kapsamda, bu destek matrisinde listelenen tarayıcı sürümleri ve Push API'yi kullanan Chrome uzantıları yer alır.

FCM SDK yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir. Bunun nedeni, yalnızca HTTPS sitelerinde kullanılabilen hizmet çalışanlarını kullanmasıdır. Bir sağlayıcıya ihtiyacınız varsa Firebase App Hosting önerilir ve kendi alanınızda HTTPS barındırma için ücretsiz bir katman sunar.

FCM JavaScript API'yi kullanmaya başlamak için web uygulamanıza Firebase'i eklemeniz ve kayıt jetonlarına erişmek için mantık eklemeniz gerekir.

FCM SDK'sını ekleme ve başlatma

  1. Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın.

  2. Firebase Cloud Messaging JS SDK'sını ekleyin ve Firebase Cloud Messaging başlatın:

Web 

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

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Web için FCM kullanıyorsanız ve SDK 6.7.0 veya sonraki sürümlere yükseltmek istiyorsanız Google Cloud'da projeniz için FCM Registration API'yi etkinleştirmeniz gerekir. API'yi etkinleştirirken Cloud Console'a Firebase için kullandığınız Google Hesabı ile giriş yaptığınızdan ve doğru projeyi seçtiğinizden emin olun. FCM SDK'sını ekleyen yeni projelerde bu API varsayılan olarak etkindir.

Web kimlik bilgilerini FCM ile yapılandırma

FCM Web arayüzü, desteklenen web push hizmetlerine gönderme isteklerini yetkilendirmek için Voluntary Application Server Identification (Gönüllü Uygulama Sunucusu Tanımlama) veya VAPID anahtarları adı verilen web kimlik bilgilerini kullanır. Uygulamanızı push bildirimlerine abone etmek için Firebase projenizle bir anahtar çifti ilişkilendirmeniz gerekir. Firebase konsolu üzerinden yeni bir anahtar çifti oluşturabilir veya mevcut anahtar çiftinizi içe aktarabilirsiniz.

Yeni bir anahtar çifti oluşturma

  1. Firebase konsolunun Ayarlar bölmesindeki Cloud Messaging sekmesini açın ve Web yapılandırması bölümüne gidin.
  2. Web Push sertifikaları sekmesinde Anahtar Çifti Oluştur'u tıklayın. Konsolda, anahtar çiftinin oluşturulduğuyla ilgili bir bildirim ve ortak anahtar dizesi ile eklenme tarihi gösterilir.

Mevcut bir anahtar çiftini içe aktarma

Web uygulamanızla zaten kullandığınız mevcut bir anahtar çiftiniz varsa FCM API'leri aracılığıyla mevcut web uygulaması örneklerinize ulaşabilmek için bu anahtar çiftini FCM'ya aktarabilirsiniz. Anahtarları içe aktarmak için Firebase projesine sahip düzeyinde erişiminiz olmalıdır. Mevcut ortak ve özel anahtarınızı Base64 URL güvenli kodlu biçimde içe aktarın:

  1. Firebase konsolunun Ayarlar bölmesindeki Cloud Messaging sekmesini açın ve Web yapılandırması bölümüne gidin.
  2. Web Push sertifikaları sekmesinde bağlantı metnini bulun ve seçin: Mevcut bir anahtar çiftini içe aktar.
  3. Anahtar çiftini içe aktar iletişim kutusunda, ortak ve özel anahtarlarınızı ilgili alanlara girin ve İçe aktar'ı tıklayın. Konsolda ortak anahtar dizesi ve eklenme tarihi gösterilir.

Anahtarı uygulamanıza nasıl ekleyeceğinizle ilgili talimatlar için Uygulamanızda web kimlik bilgilerini yapılandırma başlıklı makaleyi inceleyin. Anahtarların biçimi ve nasıl oluşturulacağı hakkında daha fazla bilgi için Uygulama sunucusu anahtarları başlıklı makaleyi inceleyin.

Uygulamanızda web kimlik bilgilerini yapılandırma

getToken(): Promise<string> yöntemi, FCM'nin farklı push hizmetlerine mesaj isteği gönderirken VAPID anahtarı kimlik bilgisini kullanmasına olanak tanır. Web Kimlik Bilgilerini FCM bölümündeki talimatlara göre oluşturduğunuz veya içe aktardığınız anahtarı kullanarak, mesajlaşma nesnesi alındıktan sonra kodunuza ekleyin:

import { getMessaging, getToken } from "firebase/messaging";

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

Kayıt jetonuna erişme

Bir uygulama örneğinin mevcut kayıt jetonunu almanız gerektiğinde önce Notification.requestPermission() ile kullanıcıdan bildirim izinleri isteyin. Gösterildiği gibi çağrıldığında, izin verilirse jeton döndürür veya izin verilmezse sözü reddeder: 

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM için firebase-messaging-sw.js dosyası gerekir. Henüz bir firebase-messaging-sw.js dosyanız yoksa bu ada sahip boş bir dosya oluşturun ve jeton almadan önce alanınızın kök dizinine yerleştirin. Daha sonra istemci kurulumu sırasında dosyaya anlamlı içerik ekleyebilirsiniz.

Mevcut jetonu almak için:

Web

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

Web

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

Jetonu aldıktan sonra uygulama sunucunuza gönderin ve tercih ettiğiniz yöntemi kullanarak saklayın.

Test bildirimi mesajı gönderme

  1. Uygulamayı hedef cihaza yükleyip çalıştırın. Apple cihazlarda, uzaktan bildirim alma izni isteğini kabul etmeniz gerekir.
  2. Uygulamanın cihazda arka planda çalıştığından emin olun.
  3. Firebase konsolunda Messaging sayfasını açın.
  4. Bu ilk mesajınızsa İlk kampanyanızı oluşturun'u seçin.
    1. Firebase Notification mesajları'nı ve Oluştur'u seçin.
  5. Aksi takdirde, Kampanyalar sekmesinde Yeni kampanya'yı ve ardından Bildirimler'i seçin.
  6. Mesaj metnini girin.
  7. Sağ bölmede Test mesajı gönder'i seçin.
  8. Add an FCM registration token (FCM kayıt jetonu ekleyin) etiketli alana kayıt jetonunuzu girin.
  9. Test et'i seçin.

Test'i seçtikten sonra, uygulama arka planda çalışırken hedeflenen istemci cihaz bildirimi almalıdır.

Sonraki adımlar

Kurulum adımlarını tamamladıktan sonra FCM for Web (JavaScript) ile ilerlemek için kullanabileceğiniz birkaç seçenek aşağıda verilmiştir: