Check out what’s new from Firebase at Google I/O 2022. Learn more

Skonfiguruj aplikację kliencką JavaScript Firebase Cloud Messaging

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 obsługi 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:

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

Wersja internetowa 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 korzystasz z 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 postaci 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 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, wywołaj getToken . Jeśli uprawnienia do powiadomień nie zostały przyznane, ta metoda poprosi użytkownika o uprawnienia do powiadomień. W przeciwnym razie zwraca token lub odrzuca obietnicę z powodu błędu.

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