Catch up on highlights from Firebase at Google I/O 2023. Learn more

Skonfiguruj aplikację kliencką JavaScript Firebase Cloud Messaging

Interfejs API JavaScript FCM umożliwia odbieranie powiadomień w aplikacjach internetowych działających w przeglądarkach obsługujących interfejs Push API . Obejmuje to wersje przeglądarek wymienione w tej tabeli pomocy technicznej oraz rozszerzenia Chrome za pośrednictwem interfejsu Push API.

Pakiet FCM SDK jest obsługiwany tylko na stronach obsługiwanych przez HTTPS. Wynika to z korzystania z pracowników usług, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, zalecamy Hosting Firebase , który zapewnia bezpłatny poziom hostingu HTTPS we własnej domenie.

Aby rozpocząć korzystanie z interfejsu FCM JavaScript API, musisz dodać Firebase do swojej aplikacji internetowej i dodać logikę, aby uzyskać dostęp do tokenów rejestracji.

Dodaj i zainicjuj zestaw SDK FCM

  1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj Firebase JS SDK i zainicjuj Firebase .

  2. Dodaj Firebase Cloud Messaging JS SDK i zainicjuj Firebase Cloud Messaging:

Modułowy interfejs API sieci 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);

Internetowy interfejs API z przestrzenią nazw

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

Jeśli obecnie korzystasz z FCM w przeglądarce i chcesz przejść na pakiet SDK 6.7.0 lub nowszy, musisz włączyć interfejs API rejestracji FCM dla swojego projektu w Google Cloud Console. Po włączeniu interfejsu API upewnij się, że jesteś zalogowany w Cloud Console przy użyciu tego samego konta Google, którego używasz w Firebase, i upewnij się, że wybrałeś właściwy projekt. Nowe projekty, w których dodaje się pakiet FCM SDK, mają domyślnie włączony ten interfejs API.

Skonfiguruj poświadczenia internetowe za pomocą FCM

Interfejs sieciowy FCM używa poświadczeń sieciowych zwanych kluczami „Voluntary Application Server Identification” lub „VAPID” w celu autoryzacji wysyłania żądań do obsługiwanych usług web push. Aby subskrybować powiadomienia push w aplikacji, musisz powiązać parę kluczy z projektem Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy za pomocą konsoli Firebase.

Wygeneruj nową parę kluczy

  1. Otwórz kartę Cloud Messaging w okienku Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa .
  2. W zakładce Certyfikaty Web Push kliknij Generuj parę kluczy . Konsola wyświetla powiadomienie, że para kluczy została wygenerowana, oraz ciąg klucza publicznego i datę dodania.

Zaimportuj istniejącą parę kluczy

Jeśli masz istniejącą parę kluczy, której już używasz w swojej aplikacji internetowej, możesz zaimportować ją do FCM, aby uzyskać dostęp do istniejących instancji aplikacji internetowej za pośrednictwem interfejsów API FCM. Aby importować klucze, musisz mieć dostęp do projektu Firebase na poziomie właściciela. Zaimportuj swój istniejący klucz publiczny i prywatny w bezpiecznej formie zakodowanej w adresie URL base64:

  1. Otwórz kartę Cloud Messaging w okienku Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa .
  2. W zakładce Certyfikaty Web Push znajdź i zaznacz tekst linku „importuj istniejącą parę kluczy”.
  3. W oknie dialogowym Importuj parę kluczy podaj klucze publiczny i prywatny w odpowiednich polach i kliknij przycisk Importuj . Konsola wyświetla ciąg klucza publicznego i datę dodania.

Aby uzyskać instrukcje dotyczące dodawania klucza do aplikacji, zobacz Konfigurowanie poświadczeń internetowych w aplikacji . Aby uzyskać więcej informacji na temat formatu kluczy i sposobu ich generowania, zobacz Klucze serwera aplikacji .

Skonfiguruj poświadczenia internetowe w swojej aplikacji

Metoda getToken(): Promise<string> umożliwia FCM używanie poświadczeń klucza VAPID podczas wysyłania żądań wiadomości do różnych usług push. Korzystając z klucza wygenerowanego lub zaimportowanego zgodnie z instrukcjami w sekcji Konfigurowanie poświadczeń sieciowych za pomocą FCM , dodaj go do swojego kodu po pobraniu obiektu wiadomości:

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

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

Uzyskaj dostęp do tokena rejestracji

Gdy musisz pobrać bieżący token rejestracji dla wystąpienia aplikacji, najpierw poproś użytkownika o uprawnienia do powiadomień za pomocą Notification.requestPermission() . Po wywołaniu, jak pokazano, zwraca token, jeśli zezwolenie zostało udzielone lub odrzuca obietnicę, jeśli zostanie odrzucona:

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

FCM wymaga pliku firebase-messaging-sw.js . Jeśli nie masz już pliku firebase-messaging-sw.js , przed pobraniem tokena utwórz pusty plik o tej nazwie i umieść go w katalogu głównym domeny. Możesz dodać znaczącą zawartość do pliku później w procesie instalacji klienta.

Aby pobrać bieżący token:

Web modular API

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 namespaced API

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

Po uzyskaniu tokena wyślij go na serwer aplikacji i przechowuj przy użyciu preferowanej metody.

Następne kroki

Po wykonaniu kroków konfiguracji oto kilka opcji dalszego korzystania z FCM dla Internetu (JavaScript):