Skonfiguruj aplikację kliencką JavaScript Firebase Cloud Messaging

Interfejs API JavaScript FCM umożliwia odbieranie komunikatów 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 pomocy oraz rozszerzenia Chrome za pośrednictwem interfejsu API Push.

Zestaw FCM SDK jest obsługiwany tylko na stronach obsługiwanych przez protokół HTTPS. Wynika to z wykorzystania przez niego pracowników usług, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, zalecamy Firebase Hosting , który zapewnia bezpłatną warstwę hostingu HTTPS we własnej domenie.

Aby rozpocząć korzystanie z interfejsu API JavaScript FCM, musisz dodać Firebase do swojej aplikacji internetowej i dodać logikę umożliwiającą dostęp do tokenów rejestracji.

Dodaj i zainicjuj zestaw SDK FCM

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

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

Modułowe API sieciowe

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

Internetowy interfejs API z przestrzenią nazw

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 korzystasz z FCM w internecie i chcesz dokonać aktualizacji do SDK 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 do Cloud Console przy użyciu tego samego konta Google, którego używasz w Firebase, i pamiętaj, aby wybrać właściwy projekt. W nowych projektach dodających pakiet FCM SDK ten interfejs API jest domyślnie włączony.

Skonfiguruj poświadczenia internetowe za pomocą FCM

Interfejs sieciowy FCM wykorzystuje poświadczenia internetowe zwane „dobrowolną identyfikacją serwera aplikacji” lub kluczami „VAPID” w celu autoryzacji wysyłania żądań do obsługiwanych usług web push. Aby zasubskrybować aplikację do powiadomień push, musisz powiązać parę kluczy z 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ę Wiadomości w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa .
  2. W zakładce Certyfikaty Web Push kliknij opcję Wygeneruj parę kluczy . Konsola wyświetla informację o wygenerowaniu pary kluczy oraz ciąg klucza publicznego i datę dodania.

Zaimportuj istniejącą parę kluczy

Jeśli masz istniejącą parę kluczy, której używasz już w swojej aplikacji internetowej, możesz zaimportować ją do FCM, aby uzyskać dostęp do istniejących instancji aplikacji internetowej 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 zakodowanej w formacie Base64 URL:

  1. Otwórz kartę Wiadomości w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa .
  2. W zakładce Certyfikaty Web Push znajdź i wybierz tekst linku „importuj istniejącą parę kluczy”.
  3. W oknie dialogowym Importuj parę kluczy podaj klucze publiczny i prywatny 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 . Więcej informacji na temat formatu kluczy i sposobu ich generowania można znaleźć w sekcji 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 do swojego kodu 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"});

Uzyskaj dostęp do tokena rejestracyjnego

Jeśli chcesz pobrać bieżący token rejestracji dla instancji aplikacji, najpierw poproś użytkownika o uprawnienia do powiadamiania za pomocą Notification.requestPermission() . Po wywołaniu, jak pokazano, zwraca token, jeśli zezwolenie zostało udzielone, lub odrzuca obietnicę, jeśli jest odrzucona:

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 , utwórz pusty plik o tej nazwie i umieść go w katalogu głównym swojej domeny przed pobraniem tokena. Możesz dodać znaczącą zawartość do pliku później w procesie konfiguracji klienta.

Aby odzyskać bieżący token:

Web modular API

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 namespaced API

// 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 przechowuj przy użyciu preferowanej metody.

Następne kroki

Po ukończeniu kroków konfiguracyjnych dostępnych jest kilka opcji dalszego korzystania z FCM dla Internetu (JavaScript):