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

Interfejs FCM JavaScript API umożliwia otrzymywanie powiadomień w aplikacjach internetowych w przeglądarkach obsługujących interfejs Push API. Dotyczy to wersji przeglądarek wymienionych w tej macierzce obsługi oraz rozszerzeń Chrome za pomocą interfejsu Push API.

Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przez HTTPS. Wynika to z używania przez tę usługę usług po stronie klienta, które są dostępne tylko w witrynach z protokołem HTTPS. Jeśli potrzebujesz dostawcy, zalecamy Hosting Firebase, który oferuje bezpłatny poziom hostingu HTTPS w Twojej domenie.

Aby zacząć korzystać z interfejsu JavaScript API FCM, musisz dodać Firebase do swojej aplikacji internetowej i dodać logikę, która będzie uzyskiwać dostęp do tokenów rejestracji.

Dodawanie i inicjowanie pakietu SDK FCM

  1. Jeśli jeszcze tego nie zrobiono, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

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

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 obecnie używasz pakietu FCM w wersji na potrzeby internetu i chcesz przejść na wersję SDK 6.7.0 lub nowszą, musisz włączyć interfejs Registration API FCM w swojej projekcie w Google Cloud Console. Pamiętaj, aby podczas włączania interfejsu API zalogować się w konsoli Cloud za pomocą tego samego konta Google, którego używasz w Firebase. Pamiętaj też, aby wybrać odpowiedni projekt. W nowych projektach, które dodają pakiet SDK FCM, ten interfejs API jest domyślnie włączony.

Konfigurowanie danych logowania do sieci za pomocą FCM

Interfejs internetowy FCM używa danych logowania do internetu, zwanych „identyfikatorami serwera aplikacji” lub kluczami „VAPID”, do autoryzowania wysyłania żądań do obsługiwanych usług przesyłania danych przez internet. Aby subskrybować powiadomienia push w aplikacji, musisz powiązać z projektem Firebase parę kluczy. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy w Konsoli Firebase.

Generowanie nowej pary kluczy

  1. Otwórz kartę Cloud Messaging w konsoli Firebase Ustawienia i przewiń do sekcji Konfiguracja w witrynie.
  2. Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy. Konsola wyświetli powiadomienie o wygenerowaniu pary kluczy oraz ciąg znaków klucza publicznego i dodaną datę.

Importowanie istniejącej pary kluczy

Jeśli masz już parę kluczy, której używasz w aplikacji internetowej, możesz ją zaimportować do FCM, aby uzyskać dostęp do istniejących instancji aplikacji internetowej za pomocą interfejsów API FCM. Aby zaimportować klucze, musisz mieć dostęp na poziomie właściciela do projektu Firebase. Zaimportuj istniejący klucz publiczny i prywatny w formacie zakodowanym w standardzie base64 do bezpiecznego adresu URL:

  1. Otwórz kartę Cloud Messaging w konsoli Firebase Ustawienia i przewiń do sekcji Konfiguracja w witrynie.
  2. Na karcie Certyfikaty Web Push odszukaj i kliknij tekst linku „Importuj istniejący klucz publiczny i prywatny”.
  3. W oknie Importuj parę kluczy podaj klucze publiczny i prywatny w odpowiednich polach i kliknij Importuj. Konsola wyświetla ciąg znaków klucza publicznego i dodaną datę.

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

Konfigurowanie danych logowania do internetu w aplikacji

Metoda getToken(): Promise<string> pozwala FCM używać 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 Konfigurowanie danych logowania do usługi internetowej za pomocą FCM, dodaj go w kodzie 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"});

Dostęp do tokena rejestracji

Jeśli chcesz pobrać bieżący token rejestracji dla instancji aplikacji, najpierw poproś użytkownika o przyznanie uprawnień do wysyłania powiadomień (Notification.requestPermission()). Gdy jest wywoływany w taki sposób, zwraca token, jeśli pozwolenie zostało przyznane, lub odrzuca obietnicę, jeśli zostało odrzucone:

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 umieść go w katalogu głównym domeny, zanim pobierzesz token. Treść możesz dodać później, na 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 za pomocą preferowanej metody.

Dalsze kroki

Po wykonaniu czynności konfiguracyjnych masz kilka opcji dalszego działania w przypadku FCM na potrzeby wersji internetowej (JavaScript):