Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Skonfiguruj aplikację kliencką JavaScript Firebase Cloud Messaging

FCM JavaScript API umożliwia otrzymywanie powiadomień w aplikacjach internetowych działających w przeglądarkach obsługujących Push API . Obejmuje to wersje przeglądarek wymienione w tej tabeli pomocy oraz rozszerzenia Chrome za pośrednictwem interfejsu API Push.

FCM SDK jest obsługiwany tylko na stronach udostępnianych 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, zalecany jest hosting Firebase do bezpłatnego 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 Firebase do swojego projektu JavaScript

Jeśli jeszcze tego nie zrobiłeś, dodaj Firebase do swojego projektu JavaScript .

Jeśli obecnie używasz FCM dla sieci i chcesz uaktualnić do SDK 6.7.0 lub nowszej, musisz włączyć FCM Registration API 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 wybierz właściwy projekt. W nowych projektach, w których jest dodawany pakiet FCM SDK, ten interfejs API jest domyślnie włączony.

Skonfiguruj poświadczenia sieci Web za pomocą FCM

Interfejs sieciowy FCM wykorzystuje poświadczenia sieci Web zwane „Dobrowolną identyfikacją serwera aplikacji” lub „kluczami VAPID”, aby autoryzować wysyłanie żądań do obsługiwanych usług web push. Aby zasubskrybować powiadomienia push w swojej aplikacji, musisz powiązać parę kluczy z projektem Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy za pośrednictwem konsoli Firebase.

Wygeneruj nową parę kluczy

  1. Otwórz kartę Komunikacja w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja sieciowa .
  2. Na karcie Certyfikaty Web Push kliknij opcję Generuj parę kluczy . Konsola wyświetla powiadomienie, że para kluczy została wygenerowana, i wyświetla ciąg klucza publicznego i datę dodania.

Zaimportuj istniejącą parę kluczy

Jeśli masz istniejącą parę kluczy, której już używasz 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, zakodowanej postaci adresu URL base64:

  1. Otwórz kartę Komunikacja w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja sieciowa .
  2. Na karcie certyfikaty Web Push znajdź i wybierz tekst łącza „zaimportuj 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ń sieci Web w aplikacji . Aby uzyskać więcej informacji na temat formatu kluczy i sposobu ich generowania, zobacz klucze serwera aplikacji .

Pobierz obiekt wiadomości

Web v8

const messaging = firebase.messaging();

Web v9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Skonfiguruj poświadczenia internetowe w swojej aplikacji

Metoda getToken(): Promise<string> umożliwia FCM użycie poświadczenia klucza VAPID podczas wysyłania żądań wiadomości do różnych usług push. Używając wygenerowanego lub zaimportowanego klucza zgodnie z instrukcjami w sekcji Konfigurowanie poświadczeń sieci Web za pomocą FCM , dodaj go do kodu 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 rejestracyjnego

Gdy musisz pobrać bieżący token rejestracji dla wystąpienia aplikacji, wywołaj getToken . Jeśli uprawnienie do powiadamiania nie zostało przyznane, ta metoda zapyta użytkownika o uprawnienia do powiadamiania. W przeciwnym razie zwraca token lub odrzuca obietnicę z powodu błędu.

Usługa przesyłania wiadomości 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 tokenu. Znaczącą zawartość można dodać do pliku później w procesie konfiguracji klienta.

Aby pobrać aktualny token:

Web v8

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

Web v9

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

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

Następne kroki

Po ukończeniu czynności konfiguracyjnych, oto kilka możliwości przejścia dalej z FCM dla sieci Web (JavaScript):