JavaScript Firebase Cloud Messaging istemci uygulaması kurma

FCM JavaScript API, Push API'sini destekleyen tarayıcılarda çalışan web uygulamalarında bildirim mesajları almanıza olanak tanır. Buna, bu destek matrisinde listelenen tarayıcı sürümleri ve Push API'si aracılığıyla Chrome uzantıları dahildir.

FCM SDK'sı yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir. Bunun nedeni, yalnızca HTTPS sitelerinde bulunan Service Worker'ları kullanmasıdır. Sağlayıcıya ihtiyacınız varsa Firebase Hosting önerilir ve kendi alanınızda HTTPS barındırma için ücretsiz bir katman sağlar.

FCM JavaScript API'yi kullanmaya başlamak için web uygulamanıza Firebase'i eklemeniz ve kayıt jetonlarına erişim mantığı 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'yı ekleyin ve Firebase Cloud Messaging'i 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();

Şu anda web için FCM'yi kullanıyor ve SDK 6.7.0 veya sonraki bir sürüme geçmek istiyorsanız Google Cloud Console'da projeniz için FCM Registration API'yi etkinleştirmeniz gerekir. API'yi etkinleştirdiğinizde 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ın eklendiği 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 "Gönüllü Uygulama Sunucusu Kimliği" veya "VAPID" anahtarları adı verilen web kimlik bilgilerini kullanır. Uygulamanızı push bildirimlerine abone olmak için Firebase projenizle bir çift anahtarı ilişkilendirmeniz gerekir. Yeni bir anahtar çifti oluşturabilir veya mevcut anahtar çiftinizi Firebase konsolu üzerinden içe aktarabilirsiniz.

Yeni bir anahtar çifti oluştur

  1. Firebase konsolunun Ayarlar bölmesindeki Cloud Messaging sekmesini açın ve sayfayı kaydırarak 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ğuna dair bir bildirim, ortak anahtar dizesi ve eklendiği tarih gösterilir.

Mevcut bir anahtar çiftini içe aktarma

Web uygulamanızla halihazırda kullandığınız mevcut bir anahtar çiftiniz varsa bunu FCM'ye aktarabilirsiniz. Böylece, FCM API'leri aracılığıyla mevcut web uygulaması örneklerinize erişebilirsiniz. Anahtarları içe aktarmak için Firebase projesine sahip düzeyinde erişiminizin olması gerekir. Mevcut ortak ve özel anahtarınızı base64 URL güvenli kodlanmış biçimde içe aktarın:

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

Anahtarı uygulamanıza eklemeyle ilgili talimatlar için Uygulamanızda Web kimlik bilgilerini yapılandırma bölümüne bakın. Anahtarların biçimi ve nasıl oluşturulacağı hakkında daha fazla bilgi için Uygulama sunucusu anahtarları bölümüne bakın.

Uygulamanızda web kimlik bilgilerini yapılandırma

getToken(): Promise<string> yöntemi, FCM'nin farklı push hizmetlerine mesaj istekleri gönderirken VAPID anahtarı kimlik bilgilerini kullanmasına izin verir. Web Kimlik Bilgilerini FCM ile Yapılandırma sayfasındaki 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ği için geçerli 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 bir jeton döndürülür veya reddedildiğinde taahhüt reddedilir: 

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

FCM, firebase-messaging-sw.js dosyası gerektirir. Hâlihazırda firebase-messaging-sw.js dosyanız yoksa bu ada sahip boş bir dosya oluşturun ve jetonu almadan önce bu dosyayı alanınızın kök dizinine yerleştirin. Daha sonra istemci kurulum işleminin ardından dosyaya anlamlı içerikler ekleyebilirsiniz.

Geçerli 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.

Sonraki adımlar

Kurulum adımlarını tamamladıktan sonra Web için FCM (JavaScript) kullanmaya başlamak için aşağıdaki seçenekleri kullanabilirsiniz: