Bir JavaScript Firebase Bulut Mesajlaşma istemci uygulaması kurun

FCM JavaScript API destekleyen tarayıcılarda çalışan web uygulamaları bildirim mesajları almak sağlayan İtme API . Bu, bu listelenen tarayıcı sürümlerini içeren destek matrisi itin API üzerinden ve Chrome uzantıları.

FCM SDK, yalnızca HTTPS üzerinden sunulan sayfalarda desteklenir. Bunun nedeni, yalnızca HTTPS sitelerinde bulunan hizmet çalışanlarını kullanmasıdır. Eğer bir sağlayıcı gerekiyorsa, Firebase Hosting ücretsiz HTTPS kendi alanınızda ev sahipliği için tavsiye edilir.

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.

JavaScript projenize Firebase ekleyin

Eğer henüz yapmadıysanız, JavaScript projeye Firebase ekleyin .

Şu anda web için FCM'yi kullanarak ve SDK 6.7.0 veya sonraki bir yükseltme istiyorsanız, etkinleştirmek gerekir FCM Kayıt API Google Bulut Konsolu proje için. 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. Bulut Mesajlaşma Firebase konsol Ayarları bölmesinin sekmesini ve Web yapılandırma bölümüne kaydırın.
  2. Web itin sertifikaları sekmesinde, tık Anahtar Çifti oluşturun. 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. Bulut Mesajlaşma Firebase konsol Ayarları bölmesinin sekmesini ve Web yapılandırma bölümüne kaydırın.
  2. Web itin sertifikaları sekmesinde, bulup, bağlantı metni seçin "varolan anahtar çiftini içe."
  3. İthalat ise bir anahtar çifti iletişim, ilgili alanlara kamu ve özel anahtarlar sağlamak ve Al'ı tıklatın. Konsol, ortak anahtar dizesini ve eklenme tarihini görüntüler.

Uygulamanıza anahtarı eklemek için ilgili talimatlar için bkz uygulamanızda Yapılandırma Web kimlik . Tuşların biçimi ve bunların nasıl oluşturulduğu konusunda daha fazla bilgi için bkz Uygulama sunucusu tuşları .

Bir mesajlaşma nesnesi alın

Web sürümü 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Web sürümü 8

const messaging = firebase.messaging();

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

Yöntem getToken(): Promise<string> farklı itme hizmetlerine mesaj istekleri gönderirken FCM yavan anahtar kimlik kullanmasına olanak sağlar. Eğer talimatlara göre üretilen veya ithal tuşunu kullanarak FCM ile yapılandır Web Kimlik mesajlaşma nesne alınır sonra kodunuzda 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 belirteci geçerli kayıt almak gerektiğinde, çağrı getToken . Bildirim izni verilmemişse, bu yöntem kullanıcıdan bildirim izinleri isteyecektir. Aksi takdirde, bir jeton döndürür veya bir hata nedeniyle vaadi reddeder.

Mesaj servisi bir gerektiriyor firebase-messaging-sw.js dosyasını. Zaten bir yoksa firebase-messaging-sw.js dosyasını, bu adı taşıyan boş bir dosya oluşturmak ve jeton almadan önce alanınızın köküne yerleştirin. Dosyaya daha sonra istemci kurulum sürecinde anlamlı içerik ekleyebilirsiniz.

Geçerli jetonu almak için:

Web sürümü 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 sürümü 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: