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

Interfejs FCM JavaScript API pozwala otrzymywać powiadomienia w aplikacje internetowe działające w przeglądarkach, które obsługują Interfejs API Push. 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 wykorzystywania 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, Hosting Firebase to jest zalecany i obejmuje bezpłatny poziom hostingu HTTPS we własnej domenie.

Aby zacząć korzystać z interfejsu FCM JavaScript API, musisz dodać Firebase do swojej aplikacji internetowej i dodać logikę do uzyskiwania dostępu do tokenów rejestracji.

Dodawanie i inicjowanie pakietu SDK FCM

  1. zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet JS SDK Firebase Cloud Messaging i zainicjuj 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. Po włączeniu interfejsu API upewnij się, korzystasz z tego samego konta Google, którego używasz do logowania się w Cloud Console. Firebase i wybierz właściwy projekt. W nowych projektach, które dodają pakiet SDK FCM, ten interfejs API jest domyślnie włączony.

Skonfiguruj dane logowania w przeglądarce 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 zasubskrybować powiadomienia push w aplikacji: musisz powiązać parę kluczy z projektem Firebase. Możesz: wygeneruj nową parę kluczy lub zaimportuj istniejącą za pomocą Firebase Konsola.

Generowanie nowej pary kluczy

  1. Otwórz Karta Komunikacja w chmurze w Ustawieniach konsoli Firebase i przewiń do sekcji Konfiguracja internetowa.
  2. Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy. wyświetli się powiadomienie o wygenerowaniu pary kluczy oraz ciągu klucza publicznego i daty dodania.

Importuj istniejącą parę kluczy

Jeśli masz parę kluczy, której używasz już w swojej aplikacji internetowej, możesz zaimportować go do usługi FCM, aby umożliwić Ci korzystanie z istniejącej aplikacji internetowej instancji za pomocą interfejsów API FCM. Aby zaimportować klucze, musisz mieć dostęp do projektu Firebase na poziomie właściciela. Zaimportuj swoje publiczne pliki oraz klucz prywatny w formie bezpiecznego zakodowanego adresu URL w base64:

  1. Otwórz Karta Komunikacja w chmurze w Ustawieniach 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 Importuj parę kluczy wpisz klucz publiczny i prywatny w odpowiednich polach, a następnie kliknij Importuj. Konsola wyświetla ciąg znaków klucza publicznego i dodaną datę.

Instrukcje dodawania kluczyka do aplikacji znajdziesz tutaj Skonfiguruj w aplikacji dane logowania do witryny. Więcej informacji o formacie kluczy i sposobie ich generowania znajdziesz w artykule zobacz Klucze serwera aplikacji.

Skonfiguruj dane logowania do internetu w swojej aplikacji

Metoda getToken(): Promise<string> pozwala FCM używać klucza VAPID podczas wysyłania żądań wiadomości do różnych usług push. Przy użyciu wygenerowanego lub zaimportowanego klucza zgodnie z instrukcjami podanymi w artykule Skonfiguruj dane logowania w przeglądarce za pomocą FCM, dodaj go w kodzie 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

Aby pobrać bieżący token rejestracji instancji aplikacji, poproś użytkownika o zgodę na wyświetlanie powiadomień z Notification.requestPermission(). Gdy ta funkcja jest wywoływana, zwraca token, jeśli uprawnienie zostanie przyznane lub odrzuci obietnicę. jeśli odmowa: 

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 tę nazwą i umieść go w katalogu głównym swojej domeny przed pobraniem tokena. 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 za pomocą preferowanej metody.

Dalsze kroki

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