Catch up on everthing we announced at this year's Firebase Summit. Learn more

Skonfiguruj aplikację kliencką JavaScript Firebase Cloud Messaging

FCM API JavaScript pozwala odbierać powiadomienia w aplikacji internetowych działających w przeglądarkach obsługujących API push . Dotyczy to wersji przeglądarek wymienionych w tej matrycy nośnej i rozszerzeń Chrome poprzez API Push.

Pakiet FCM SDK jest obsługiwany tylko na stronach obsługiwanych 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, Firebase Hosting zaleca się za darmo HTTPS gospodarzem na 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 tego nie zrobiłeś, dodaj Firebase do projektu JavaScript .

Jeśli używasz FCM dla sieci web i chcesz uaktualnić do SDK 6.7.0 lub nowszej, należy włączyć FCM Registration API dla swojego projektu w konsoli Google Cloud. Po włączeniu interfejsu API upewnij się, że jesteś zalogowany w Cloud Console na to samo konto Google, którego używasz w Firebase, i wybierz właściwy projekt. Nowe projekty, które dodają pakiet SDK FCM, mają domyślnie włączony ten interfejs API.

Skonfiguruj poświadczenia internetowe za pomocą FCM

Interfejs sieciowy FCM wykorzystuje poświadczenia sieciowe zwane kluczami „dobrowolnej identyfikacji serwera aplikacji” lub „VAPID”, aby autoryzować wysyłanie żądań do obsługiwanych usług web push. Aby zasubskrybować aplikację do powiadomień push, musisz powiązać parę kluczy ze swoim 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 Cloud Messaging zakładkę panelu Firebase ustawienia konsoli i przejdź do sekcji konfiguracji sieci.
  2. W zakładce certyfikaty Web Push, kliknij Generowanie pary kluczy. Konsola wyświetla informację, że para kluczy została wygenerowana i wyświetla ciąg klucza publicznego oraz datę dodania.

Importuj istniejącą parę kluczy

Jeśli masz istniejącą parę kluczy, z której już korzystasz w swojej aplikacji internetowej, możesz ją zaimportować do FCM, aby uzyskać dostęp do istniejących wystąpień aplikacji sieci Web 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 postaci zakodowanego adresu URL base64:

  1. Otwórz Cloud Messaging zakładkę panelu Firebase ustawienia konsoli i przejdź do sekcji konfiguracji sieci.
  2. W zakładce certyfikaty push internetowej, znaleźć i zaznaczyć tekst linku „importować istniejącej pary kluczy”.
  3. W Import okno dialogowe parę kluczy, podanie kluczy publicznych i prywatnych w odpowiednich polach i kliknij przycisk Importuj. Konsola wyświetla ciąg klucza publicznego i datę dodania.

Instrukcje dotyczące sposobu, aby dodać klucz do aplikacji, zobacz referencje Konfiguracja sieci w aplikacji . Aby uzyskać więcej informacji na temat formatu kluczy i jak je wygenerować, zobaczyć klucze serwer aplikacji .

Pobierz obiekt wiadomości

Wersja internetowa 9

import { getMessaging } from "firebase/messaging";

const messaging = getMessaging();

Wersja internetowa 8

const messaging = firebase.messaging();

Skonfiguruj poświadczenia internetowe w swojej aplikacji

Metoda getToken(): Promise<string> pozwala FCM użyć klucza poświadczenia vapid podczas wysyłania żądania wiadomość do różnych usług pchania. Używając klucza wygenerowany lub importowane zgodnie z instrukcją w Poświadczenia Konfiguracja Web z FCM , dodaj go w kodzie po przedmiot wiadomości są pobierane:

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Uzyskaj dostęp do tokena rejestracji

Kiedy trzeba pobrać bieżący token rejestracji dla instancji aplikacji, zadzwoń getToken . Jeśli uprawnienia do powiadomień nie zostały przyznane, ta metoda poprosi użytkownika o uprawnienia do powiadomień. W przeciwnym razie zwraca token lub odrzuca obietnicę z powodu błędu.

FCM wymaga firebase-messaging-sw.js pliku. O ile nie masz już firebase-messaging-sw.js pliku, utwórz pusty plik o tej nazwie i umieścić go w katalogu głównym domeny przed pobraniem token. Możesz dodać znaczącą zawartość do pliku później w procesie instalacji klienta.

Aby pobrać bieżący token:

Wersja internetowa 9

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

Wersja internetowa 8

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

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

Następne kroki

Po zakończeniu czynności konfiguracyjnych dostępnych jest kilka opcji przejścia do przodu z FCM for Web (JavaScript):