Web uygulamalarında Firebase Cloud Messaging'i kullanmaya başlama

Bu kılavuzda, mesajları güvenilir bir şekilde gönderebilmek için web istemci uygulamalarınızda Firebase Cloud Messaging kullanmaya nasıl başlayacağınız açıklanmaktadır.

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'yi kullanan Chrome uzantılarını içerir.

FCM SDK'sı yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir. Bunun nedeni, yalnızca HTTPS sitelerinde kullanılabilen hizmet çalışanlarının kullanılmasıdır. Bir sağlayıcıya ihtiyacınız varsa Firebase App Hosting önerilir. Bu sağlayıcı, 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 bildirimlerinizin alıcısını belirlemenize olanak tanıyan Firebase kurulum kimliklerine 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'sını yükleyin ve Firebase'i başlatın.

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

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);

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 bir sürüme yükseltmek istiyorsanız Google Cloud konsolunda projeniz için FCM Registration API'yi etkinleştirmeniz gerekir. API'yi etkinleştirirken Google Cloud konsoluna 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 Gönüllü Uygulama Sunucusu Kimliği 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 konsolunda settings Ayarlar > Genel'e gidin. Ardından Cloud Messaging sekmesini tıklayın.

2. Web yapılandırması bölümüne gidin.

3. Web Push sertifikaları sekmesinde Anahtar Çifti Oluştur'u tıklayın.

   Konsolda, anahtar çiftinin oluşturulduğuyla ilgili bir bildirim gösterilir. Ayrıca, ortak anahtar dizesi ve eklenme tarihi de gösterilir.

Mevcut bir anahtar çiftini içe aktarma

Web uygulamanızla kullandığınız bir anahtar çiftiniz varsa bunu FCM hizmetine aktararak mevcut web uygulaması örneklerinize FCM API'leri üzerinden erişebilirsiniz. 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 için güvenli kodlanmış biçimde içe aktarın:

1. Firebase konsolunda settings Ayarlar > Genel'e gidin. Ardından Cloud Messaging sekmesini tıklayın.

2. Web yapılandırması bölümüne gidin.

3. Web Push certificates (Web Push sertifikaları) sekmesinde bağlantı metnini bulun ve seçin: import an existing key pair (Mevcut bir anahtar çiftini içe aktar).

4. Anahtar çiftini içe aktar iletişim kutusunda, ortak ve özel anahtarlarınızı ilgili alanlara girip İç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

register(): Promise<void> yöntemi, FCM uygulamasının farklı push hizmetlerine mesaj istekleri gönderirken VAPID anahtar kimlik bilgilerini kullanmasına olanak tanır. 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ı, mesajlaşma nesnesi alındıktan sonra kodunuza ekleyin:

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

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

Bildirim izni isteme ve hizmet çalışanını yapılandırma

FCM ile bir uygulama örneğini hedeflemeniz gerektiğinde önce Notification.requestPermission() ile kullanıcıdan bildirim izinleri isteyin. Gösterildiği gibi çağrıldığında, izin verildiyse bu işlev izin durumunu döndürür:

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. Zaten bir firebase-messaging-sw.js dosyanız yoksa bu adla boş bir dosya oluşturun ve kaydolmadan önce alanınızın kök dizinine yerleştirin. Daha sonra istemci kurulumu sürecinde dosyaya anlamlı içerikler ekleyebilirsiniz.

Firebase yükleme kimliğine erişme

Uygulama örneğini kaydetmek ve mesaj hedefleme için Firebase yükleme kimliğini (FID) almak üzere:

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

onRegistered geri çağırma işlevi üç senaryoda tetiklenir:

1. Manuel register() arama her bittiğinde.
2. Firebase yükleme kimliği değişikliği algılandığında
3. Bir pushsubscriptionchange etkinlik tetiklenir.

Firebase Kurulum Kimliği'ni aldıktan sonra uygulama sunucunuza gönderin ve tercih ettiğiniz yöntemi kullanarak depolayın.

Kayıt jetonuna erişme (desteği sonlandırıldı)

Mevcut jetonu almak için:

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

// 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 bildirim 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 DevOps & Engagement (DevOps ve Etkileşim) > Messaging'e (Mesajlaşma) gidin.

4. Kampanya oluşturun.

   • Bu ilk mesajınızsa:

     1. İlk kampanyanızı oluşturun'u seçin.

     2. Firebase Notifications'ı ve Oluştur'u seçin.

   • Daha önce kampanya oluşturduysanız:

     1. Kampanyalar sekmesinde Yeni kampanya'yı seçin.

     2. Bildirimler'i tıklayın.

5. Mesaj metnini girin.

6. Sağ bölmeden Test mesajı gönder'i seçin.

7. FCM kayıt jetonu ekle etiketli alana kayıt jetonunuzu girin.

8. Test et'i seçin.

Test'i seçtikten sonra, uygulamanın arka planda olduğu hedef istemci cihaz bildirimi alır.

Sonraki adımlar

Kurulum adımlarını tamamladıktan sonra Web için FCM (JavaScript) ile devam etmek için birkaç seçeneğiniz vardır:

• Cihazlara mesaj gönderme
• JavaScript istemcisinde mesaj alma
• Konulara mesaj gönderme