Konfigurowanie aplikacji klienckiej Komunikacja w chmurze Firebase (FCM) w języku JavaScript

Interfejs FCM JavaScript API umożliwia odbieranie powiadomień w aplikacjach internetowych działających w przeglądarkach, które obsługują interfejs Push API. Dotyczy to wersji przeglądarek wymienionych w tej tabeli pomocy i rozszerzeń do Chrome za pomocą interfejsu Push API.

Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przez HTTPS. Wynika to z wykorzystania mechanizmów Service Worker, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, zalecany jest Hosting Firebase, który zapewnia bezpłatny hosting HTTPS w Twojej domenie.

Aby zacząć korzystać z interfejsu FCM JavaScript API, musisz dodać Firebase do swojej aplikacji internetowej oraz dodać funkcje logiczne umożliwiające dostęp do tokenów rejestracji.

Dodaj i zainicjuj pakiet SDK FCM

  1. Jeśli jeszcze nie masz tego za sobą, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet SDK Firebase Cloud Messaging JS i zainicjuj Komunikację w chmurze Firebase (FCM):

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

Jeśli korzystasz obecnie z FCM w internecie i chcesz przejść na pakiet SDK 6.7.0 lub nowszy, musisz włączyć interfejs FCM Registration API w swoim projekcie w konsoli Google Cloud. Gdy włączysz interfejs API, pamiętaj, aby zalogować się w Cloud Console za pomocą tego samego konta Google, którego używasz w Firebase, i wybrać właściwy projekt. W nowych projektach, w których dodajesz pakiet SDK FCM, ten interfejs API jest domyślnie włączony.

Konfigurowanie danych logowania w przeglądarce w FCM

Interfejs internetowy FCM używa danych logowania w internecie nazywanych kluczami „Voluntary Application Server Identification” (Voluntary Application Server Identification) lub „VAPID” (VAPID), by autoryzować wysyłanie żądań do obsługiwanych usług internetowych. Aby subskrybować powiadomienia push w aplikacji, musisz powiązać parę kluczy z projektem Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą za pomocą konsoli Firebase.

Generowanie nowej pary kluczy

  1. Otwórz kartę Komunikacja w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa.
  2. Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy. W konsoli pojawi się powiadomienie o wygenerowaniu pary kluczy oraz ciąg klucza publicznego i data dodania.

Importuj istniejącą parę kluczy

Jeśli masz parę kluczy, której używasz już w swojej aplikacji internetowej, możesz zaimportować ją do FCM, by mieć dostęp do istniejących instancji aplikacji przez interfejsy FCM API. Aby zaimportować klucze, musisz mieć dostęp na poziomie właściciela do projektu Firebase. Zaimportuj swój klucz publiczny i prywatny w formacie base64 zakodowanym w bezpieczny sposób przy użyciu adresu URL:

  1. Otwórz kartę Komunikacja w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa.
  2. Na karcie Certyfikaty Web Push znajdź i wybierz tekst linku „Zaimportuj istniejącą parę kluczy”.
  3. W oknie Importowanie pary kluczy wpisz w odpowiednich polach klucze publiczne i prywatne, a następnie kliknij Importuj. Konsola wyświetli ciąg klucza publicznego i datę dodania.

Instrukcje dodawania klucza do aplikacji znajdziesz w artykule Konfigurowanie danych logowania do aplikacji internetowych w aplikacji. Więcej informacji o formacie kluczy i sposobie ich generowania znajdziesz w artykule Klucze serwera aplikacji.

Skonfiguruj dane logowania do internetu w swojej aplikacji

Metoda getToken(): Promise<string> pozwala FCM na używanie danych uwierzytelniających klucza VAPID podczas wysyłania żądań wiadomości do różnych usług push. Za pomocą klucza wygenerowanego lub zaimportowanego zgodnie z instrukcjami w artykule Konfigurowanie danych logowania internetowego w FCM dodaj go do kodu po pobraniu obiektu do przesyłania 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"});

Dostęp do tokena rejestracji

Jeśli musisz pobrać bieżący token rejestracji instancji aplikacji, najpierw poproś użytkownika o uprawnienia do wyświetlania powiadomień, używając uprawnienia Notification.requestPermission(). Gdy ta funkcja jest wywoływana, zwraca token w przypadku przyznania uprawnień lub odrzucenia obietnicy w przypadku jej odrzucenia:

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 jeszcze pliku firebase-messaging-sw.js, utwórz pusty plik o tej nazwie i przed pobraniem tokena umieść go w katalogu głównym swojej domeny. Przydatną zawartość możesz dodać do pliku na późniejszym etapie konfiguracji klienta.

Aby pobrać bieżący token:

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

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

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

Dalsze kroki

Gdy zakończysz czynności konfiguracyjne, możesz zacząć korzystać z FCM dla witryn (JavaScript) na kilka sposobów: