Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Skonfiguruj aplikację kliencką JavaScript Firebase Cloud Messaging

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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

Pakiet FCM SDK jest obsługiwany tylko na stronach obsługiwanych przez HTTPS. Wynika to z korzystania przez niego 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 API JavaScript FCM, musisz dodać Firebase do swojej aplikacji internetowej i dodać logikę dostępu do tokenów rejestracji.

Dodaj i zainicjuj pakiet FCM SDK

  1. Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase , jeśli jeszcze tego nie zrobiłeś.

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

Web version 9

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 version 8

import firebase from "firebase/app";
import "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
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

Jeśli obecnie używasz FCM w przeglądarce i chcesz uaktualnić pakiet SDK do wersji 6.7.0 lub nowszej, 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 na to samo konto Google, którego używasz w Firebase, i wybierz właściwy projekt. Nowe projekty, które dodają pakiet SDK FCM, mają domyślnie włączony ten interfejs API.

Skonfiguruj poświadczenia internetowe za pomocą FCM

Interfejs sieciowy FCM wykorzystuje poświadczenia sieciowe zwane kluczami „dobrowolnej identyfikacji serwera aplikacji” lub „VAPID”, aby autoryzować wysyłanie żądań do obsługiwanych usług web push. Aby zasubskrybować aplikację do powiadomień push, musisz powiązać parę kluczy ze swoim 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 panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja sieciowa .
  2. Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy . Konsola wyświetla informację, że para kluczy została wygenerowana i wyświetla ciąg klucza publicznego oraz datę dodania.

Importuj istniejącą parę kluczy

Jeśli masz istniejącą parę kluczy, z której już korzystasz w swojej aplikacji internetowej, możesz ją zaimportować do FCM, aby uzyskać dostęp do istniejących wystąpień aplikacji sieci Web za pośrednictwem interfejsów API FCM. Aby zaimportować 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 zakodowanego adresu URL base64:

  1. Otwórz kartę Cloud Messaging w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja sieciowa .
  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 publiczne i prywatne w odpowiednich polach i kliknij 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 o formacie kluczy i sposobie 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. Używając klucza wygenerowanego lub zaimportowanego zgodnie z instrukcjami w sekcji Konfigurowanie poświadczeń internetowych za pomocą FCM , dodaj go w kodzie po pobraniu obiektu wiadomości:

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

Uzyskaj dostęp do tokena rejestracji

Gdy musisz pobrać bieżący token rejestracji dla wystąpienia aplikacji, najpierw zażądaj uprawnień do powiadomień od użytkownika za pomocą Notification.requestPermission() . Po wywołaniu, jak pokazano, zwraca token, jeśli zezwolenie zostanie udzielone lub odrzuci obietnicę, jeśli zostanie odmówiona:

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 version 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 version 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);
  // ...
});

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

Następne kroki

Po zakończeniu czynności konfiguracyjnych dostępnych jest kilka opcji przejścia do przodu z FCM for Web (JavaScript):