FCM JavaScript API, Push API'yi destekleyen tarayıcılarda çalışan web uygulamalarında bildirim mesajları almanıza olanak tanır. Bu destek matrisinde listelenen tarayıcı sürümleri ve Push API aracılığıyla Chrome uzantıları bu kapsamdadır.
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 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
Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın.
Firebase Cloud Messaging JS SDK'sını ekleyin ve Firebase Cloud Messaging uygulamasını 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 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 etkin.
Web Kimlik Bilgilerini FCM ile Yapılandır
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
- Firebase konsolunun Ayarlar bölmesinde Cloud Mesajlaşma sekmesini açın ve Web yapılandırması bölümüne gidin.
- 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 mevcut web uygulamanıza ulaşabilmeniz için onu FCM hizmetine aktarabilirsiniz FCM API'leri aracılığıyla örnekler. Anahtarları içe aktarmak için Firebase projesine sahip düzeyinde erişiminiz olmalıdır. Mevcut herkese açık verilerinizi içe aktarın ve base64 URL güvenli kodlanmış biçimde özel anahtar:
- Firebase konsolunun Ayarlar bölmesinde Cloud Mesajlaşma sekmesini açın ve Web yapılandırması bölümüne gidin.
- Web Push sertifikaları sekmesinde bağlantı metnini bulup seçin. "mevcut bir anahtar çiftini içe aktar."
- Anahtar çiftini içe aktar iletişim kutusunda, ilgili alanlara ortak ve özel anahtarlarınızı girin ve İçe aktar'ı tıklayın. Konsolda, ortak anahtar dizesi ve eklenme tarihi gösterilir.
Anahtarı uygulamanıza ekleme 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 ürününün ileti gönderirken VAPID anahtarı kimlik bilgilerini kullanmasına izin verir
farklı push hizmetlerine gönderebilirsiniz. FCM ile web kimlik bilgilerini yapılandırma başlıklı makaledeki talimatlara göre oluşturduğunuz veya içe aktardığınız anahtarı kullanarak mesajlaşma nesnesi alındıktan sonra anahtarı 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 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 için firebase-messaging-sw.js
dosyası gerekiyor.
firebase-messaging-sw.js
dosyanız yoksa jeton almadan önce bu ada sahip boş bir dosya oluşturup 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); // ... });
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); // ... });
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, Web için FCM'ü (JavaScript) kullanmaya devam etmek üzere aşağıdaki seçeneklerden yararlanabilirsiniz:
- Uygulamanıza işlev ekleyerek mesajları alma.
- Arka Planda Çalışan Bir Uygulamaya İlk Mesajınızı Gönderme veya Birden Fazla Cihaza Mesaj Gönderme eğitimlerimizden birini deneyin.
- GitHub'da eksiksiz bir örneği inceleyin.
- JavaScript referansını inceleyin.
- API'yi uygulamayla ilgili adım adım açıklamalı videoyu izleyin.