Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Bir JavaScript Firebase Bulut Mesajlaşma istemci uygulaması kurun

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

FCM JavaScript API, Push API'yi destekleyen tarayıcılarda çalışan web uygulamalarında bildirim mesajları almanıza olanak tanır. Bu, bu destek matrisinde listelenen tarayıcı sürümlerini ve Push API aracılığıyla Chrome uzantılarını içerir.

FCM SDK, yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir. Bunun nedeni, yalnızca HTTPS sitelerinde bulunan hizmet çalışanlarını kullanmasıdır. Bir 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'sini kullanmaya başlamak için web uygulamanıza Firebase eklemeniz ve kayıt belirteçlerine erişmek için mantık eklemeniz gerekir.

FCM SDK'yı ekleyin ve başlatın

  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 version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


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

Şu anda web için FCM kullanıyorsanız ve SDK 6.7.0 veya sonraki bir sürümüne yükseltmek istiyorsanız, Google Cloud Console'da projeniz için FCM Kayıt API'sini etkinleştirmeniz gerekir. API'yi etkinleştirdiğinizde, Firebase için kullandığınız Google hesabıyla Cloud Console'da oturum açtığınızdan ve doğru projeyi seçtiğinizden emin olun. FCM SDK'sını ekleyen yeni projelerde bu API varsayılan olarak etkindir.

FCM ile Web Kimlik Bilgilerini Yapılandırma

FCM Web arabirimi, desteklenen web push hizmetlerine gönderme isteklerini yetkilendirmek için "Gönüllü Uygulama Sunucusu Kimliği" veya "VAPID" anahtarları olarak adlandırılan Web kimlik bilgilerini kullanır. Uygulamanızı push bildirimlerine abone olmak için Firebase projenizle bir çift anahtarı ilişkilendirmeniz gerekir. Firebase Konsolu aracılığıyla yeni bir anahtar çifti oluşturabilir veya mevcut anahtar çiftinizi içe aktarabilirsiniz.

Yeni bir anahtar çifti oluşturun

  1. Firebase konsolu Ayarlar bölmesinin Bulut Mesajlaşma sekmesini açın ve Web yapılandırması bölümüne gidin.
  2. Web Push sertifikaları sekmesinde Anahtar Çifti Oluştur öğesine tıklayın. Konsol, anahtar çiftinin oluşturulduğuna dair bir bildirim görüntüler ve ortak anahtar dizesini ve eklenme tarihini görüntüler.

Mevcut bir anahtar çiftini içe aktarın

Web uygulamanızla halihazırda kullanmakta olduğunuz bir anahtar çiftiniz varsa, FCM API'leri aracılığıyla mevcut web uygulaması örneklerinize ulaşabilmek için bunu FCM'ye aktarabilirsiniz. Anahtarları içe aktarmak için Firebase projesine sahip düzeyinde erişiminiz olmalıdır. Mevcut genel ve özel anahtarınızı base64 URL güvenli kodlanmış biçimde içe aktarın:

  1. Firebase konsolu Ayarlar bölmesinin Bulut Mesajlaşma sekmesini açın ve Web yapılandırması bölümüne gidin.
  2. Web Push sertifikaları sekmesinde, "mevcut bir anahtar çiftini içe aktar" bağlantı metnini bulun ve seçin.
  3. Bir anahtar çiftini içe aktar iletişim kutusunda, ilgili alanlara genel ve özel anahtarlarınızı girin ve İçe Aktar'ı tıklayın. Konsol, ortak anahtar dizesini ve eklenme tarihini görüntüler.

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

Uygulamanızda Web kimlik bilgilerini yapılandırın

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 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:

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

Kayıt belirtecine erişin

Bir uygulama örneği için geçerli kayıt belirtecini 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 belirteç döndürür veya reddedilirse vaadi reddeder:

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

FCM, bir firebase-messaging-sw.js dosyası gerektirir. Zaten bir firebase-messaging-sw.js dosyanız yoksa, bu ada sahip boş bir dosya oluşturun ve bir jeton almadan önce onu alanınızın kök dizinine yerleştirin. Dosyaya daha sonra istemci kurulum sürecinde anlamlı içerik ekleyebilirsiniz.

Geçerli jetonu almak için:

Web version 9

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

Web version 8

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

Belirteci 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) ile ilerlemek için birkaç seçenek: