JavaScript Firebase Cloud Messaging istemci uygulaması kurma

FCM JavaScript API, bildirim mesajlarını şurada almanıza olanak tanır: destekleyen tarayıcılarda çalışan web uygulamalarını Push API'si. Bu, destek matrisi ve Chrome uzantıları Push API'si aracılığıyla.

FCM SDK'sı yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir. Bu hizmet çalışanıdır. Eğer bir sağlayıcı gerekiyorsa 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 Firebase'i web uygulamanıza ekleyin ve kayıt jetonlarına erişmek için mantık ekleyin.

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'ya geçmek istiyorsanız 6.7.0 veya sonraki sürümlerden birini kullanıyorsanız FCM Kayıt API'sı Google Cloud Console'da görüntüleyebilirsiniz. API'yi etkinleştirdiğinizde Cloud Console'a, için kullandığınız Google Hesabı ile giriş yapmış olmanız gerekir. ve doğru projeyi seçtiğinizden emin olun. Yeni projeler, FCM SDK'sında bu API varsayılan olarak etkindir.

Web Kimlik Bilgilerini FCM ile yapılandırma

FCM Web arayüzü, "Voluntary" (Gönüllü) adı verilen Web kimlik bilgilerini kullanır Uygulama Sunucusu Kimliği," veya "VAPID" anahtarları (gönderme isteklerini yetkilendirmek için) ve desteklenen web push hizmetlerine. Uygulamanızı push bildirimlerine abone olmak için Firebase projenizle bir anahtar çifti ilişkilendirmeniz gerekir. Aşağıdaki yöntemlerden birini uygulayabilirsiniz yeni bir anahtar çifti oluşturun veya mevcut anahtar çiftinizi Firebase üzerinden içe aktarın Konsol.

Yeni bir anahtar çifti oluştur

  1. Firebase konsolunun Ayarlar sayfasındaki Cloud Messaging sekmesi bölmesini tıklayın ve Web yapılandırması bölümüne gidin.
  2. Web Push sertifikaları sekmesinde Anahtar Çifti Oluştur'u tıklayın. İlgili içeriği oluşturmak için kullanılan konsolunda, anahtar çiftinin oluşturulduğuna dair bir bildirim ve ortak anahtar dizesi ve eklenme tarihi.

Mevcut bir anahtar çiftini içe aktarma

Web uygulamanızla halihazırda kullandığınız bir anahtar çiftiniz varsa FCM'ye aktarabilir ve böylece mevcut web uygulamanıza erişebilirsiniz örnekler. Anahtarları içe aktarmak için Firebase projesine sahip düzeyinde erişim. Mevcut herkese açık verilerinizi içe aktarın ve base64 URL güvenli kodlanmış biçimde özel anahtar:

  1. Firebase konsolunun Ayarlar sayfasındaki Cloud Messaging sekmesi bölmesini tıklayın ve Web yapılandırması bölümüne gidin.
  2. Web Push sertifikaları sekmesinde bağlantı metnini bulup seçin. "mevcut bir anahtar çiftini içe aktar."
  3. Bir anahtar çiftini içe aktarın iletişim kutusunda, ortak ve özel anahtarlarınızı ilgili alanları doldurun ve İçe Aktar'ı tıklayın. Konsolda anahtar dizesi ve eklendiği tarihi gösterir.

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

Uygulamanızda web kimlik bilgilerini yapılandırma

getToken(): Promise<string> yöntemi FCM'nin ileti gönderirken VAPID anahtarı kimlik bilgisini kullanmasına izin verir farklı push hizmetlerine gönderebilirsiniz. Oluşturduğunuz veya içe aktardığınız anahtarı kullanma buradaki talimatlara göre Web kimlik bilgilerini FCM ile yapılandırın, mesajlaşma nesnesi alındıktan sonra bunu 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() olan kullanıcıdan bildirim izinleri iste. Gösterildiği gibi çağrıldığında, izin verilirse veya sözü reddederse bir jeton döndürür reddediliyorsa: 

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. Önceden bir firebase-messaging-sw.js dosyanız yoksa boş bir dosya oluşturun ifadesini girmeniz ve jetonu almadan önce kodu alanınızın köküne 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 ve mağazanıza gönderin tercih ettiğiniz yöntemi kullanarak yapabilirsiniz.

Sonraki adımlar

Kurulum adımlarını tamamladıktan sonra taşımayla ilgili bazı seçenekleri aşağıda bulabilirsiniz Web için FCM ile yönlendirin (JavaScript):