Wprowadzenie do Komunikacji w chmurze Firebase w aplikacjach internetowych

Wybierz platformę:

iOS+ Android Web Flutter Unity C++

Z tego przewodnika dowiesz się, jak zacząć korzystać z Firebase Cloud Messaging w aplikacjach klienta internetowego, aby niezawodnie wysyłać wiadomości.

Interfejs JavaScript API FCM 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 obsługiwanych wersji oraz rozszerzenia do Chrome korzystające z interfejsu Push API.

Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przez HTTPS. Wynika to z użycia skryptów service worker, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, zalecamy Firebase App Hosting, który oferuje bezpłatny poziom hostingu HTTPS we własnej domenie.

Aby zacząć korzystać z interfejsu JavaScript API FCM, musisz dodać Firebase do aplikacji internetowej i dodać logikę, która umożliwi dostęp do identyfikatorów instalacji Firebase, dzięki czemu będziesz mieć możliwość wyznaczania odbiorców powiadomień.

Dodaj i zainicjuj pakiet SDK FCM

1. Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase, jeśli nie korzystasz jeszcze z tej usługi.

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

Web

Dowiedz się więcej o modułowym interfejsie Web API z funkcją tree-shaking i przejdź z interfejsu Namespaced API.

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

Dowiedz się więcej o modułowym interfejsie Web API z funkcją tree-shaking i przejdź z interfejsu Namespaced API.

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 używasz FCM w internecie i chcesz przejść na pakiet SDK w wersji 6.7.0 lub nowszej, musisz włączyć interfejs FCM Registration API dla swojego projektu w konsoli Google Cloud. Gdy włączysz interfejs API, upewnij się, że logujesz się w konsoli Google Cloud za pomocą tego samego konta Google, którego używasz w Firebase, i wybierz właściwy projekt. Nowe projekty, które dodają pakiet SDK FCM, mają ten interfejs API domyślnie włączony.

Konfigurowanie danych logowania do stron internetowych za pomocą FCM

Interfejs internetowy FCM używa danych logowania do sieci o nazwie Voluntary Application Server Identification (VAPID) do autoryzowania żądań wysyłania do obsługiwanych usług internetowych powiadomień push. Aby zasubskrybować powiadomienia push w aplikacji, musisz powiązać parę kluczy z projektem w Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy za pomocą konsoli Firebase.

Wygeneruj nową parę kluczy

1. W konsoli Firebase otwórz Ustawienia > Ogólne. Następnie kliknij kartę Komunikacja w chmurze.

2. Otwórz sekcję Konfiguracja sieci.

3. Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy.

   W konsoli pojawi się powiadomienie o wygenerowaniu pary kluczy oraz ciąg klucza publicznego i data dodania.

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 dotychczasowych instancji aplikacji internetowej za pomocą interfejsów API FCM. Aby importować klucze, musisz mieć dostęp do projektu w Firebase na poziomie właściciela. Zaimportuj istniejący klucz publiczny i klucz prywatny w formacie zakodowanym w base64 i bezpiecznym dla adresów URL:

1. W konsoli Firebase otwórz Ustawienia > Ogólne. Następnie kliknij kartę Komunikacja w chmurze.

2. Otwórz sekcję Konfiguracja sieci.

3. Na karcie Certyfikaty Web Push znajdź i kliknij tekst linku: import an existing key pair (zaimportuj istniejącą parę kluczy).

4. W oknie Importowanie pary kluczy podaj klucze publiczny i klucz prywatny w odpowiednich polach i kliknij Importuj.

   W konsoli wyświetli się ciąg klucza publicznego i data dodania.

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 stron internetowych w aplikacji

Metoda register(): Promise<void> umożliwia usłudze FCM używanie danych logowania klucza VAPID podczas wysyłania żądań wiadomości do różnych usług push. Użyj klucza wygenerowanego lub zaimportowanego zgodnie z instrukcjami podanymi w artykule Konfigurowanie danych logowania do sieci za pomocą FCM i dodaj go w kodzie po pobraniu obiektu wiadomości:

import { getMessaging, register } from "firebase/messaging";

const messaging = getMessaging();
// Add the public key generated from the Firebase console here.
register(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

Uwaga: jeśli używasz wycofanych interfejsów API tokenów, musisz przekazać klucz VAPID do getToken() zamiast do register().

Prośba o zgodę na wyświetlanie powiadomień i konfigurowanie skryptu service worker

Jeśli chcesz kierować reklamy na instancję aplikacji za pomocą FCM, najpierw poproś użytkownika o zgodę na wyświetlanie powiadomień za pomocą Notification.requestPermission(). Wywołanie w pokazany sposób zwraca stan uprawnień, jeśli zostały przyznane:

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 przed rejestracją. Później, podczas konfigurowania klienta, możesz dodać do pliku odpowiednią treść.

Dostęp do identyfikatora instalacji Firebase

Uwaga: nie używaj jednocześnie interfejsów API identyfikatora instalacji Firebase i wycofanych interfejsów API tokena rejestracji do zarządzania rejestracją. Zalecamy używanie identyfikatorów instalacji Firebase (FID) do segmentowania lub kierowania instancji aplikacji.

Wskazówka: wskazówki dotyczące zarządzania rejestracjami znajdziesz w artykule Sprawdzone metody zarządzania rejestracjami FCM.

Aby zarejestrować instancję aplikacji i pobrać identyfikator instalacji Firebase (FID) na potrzeby kierowania wiadomości:

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

Wywołanie zwrotne onRegistered jest aktywowane w 3 przypadkach:

1. Za każdym razem, gdy zakończy się ręczne połączenie register().
2. wykryto zmianę identyfikatora instalacji Firebase.
3. Zostanie wywołane zdarzenie pushsubscriptionchange.

Po uzyskaniu identyfikatora instalacji Firebase wyślij go na serwer aplikacji i zapisz, używając preferowanej metody.

Uzyskiwanie dostępu do tokena rejestracji (wycofane)

Uwaga: ta funkcja została wycofana. Używaj identyfikatorów instalacji Firebase, ponieważ ta metoda zostanie usunięta w przyszłej wersji.

Wskazówka: wskazówki dotyczące zarządzania rejestracjami znajdziesz w artykule Sprawdzone metody zarządzania rejestracjami FCM.

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, używając preferowanej metody.

Wysyłanie testowego powiadomienia

1. Zainstaluj i uruchom aplikację na urządzeniu docelowym. Na urządzeniach Apple musisz zaakceptować prośbę o uprawnienia do otrzymywania powiadomień zdalnych.

2. Sprawdź, czy aplikacja działa w tle na urządzeniu.

3. W konsoli Firebase kliknij DevOps i zaangażowanie > Komunikacja.

4. Utworzenie kampanii.

   • Jeśli to Twoja pierwsza wiadomość:

     1. Kliknij Utwórz pierwszą kampanię.

     2. Wybierz Powiadomienia Firebase i kliknij Utwórz.

   • Jeśli masz już utworzone kampanie:

     1. Na karcie Kampanie kliknij Nowa kampania.

     2. Kliknij Powiadomienia.

5. Wpisz tekst wiadomości.

6. W panelu po prawej stronie wybierz Wyślij wiadomość testową.

7. W polu Dodaj token rejestracji FCM wpisz token rejestracji.

8. Kliknij Przetestuj.

Gdy klikniesz Test, docelowe urządzenie klienta z aplikacją działającą w tle powinno otrzymać powiadomienie.

Dalsze kroki

Po wykonaniu czynności konfiguracyjnych możesz kontynuować korzystanie z FCM w przypadku stron internetowych (JavaScript) na kilka sposobów:

• Wysyłanie wiadomości na urządzenia
• Odbieranie wiadomości w kliencie JavaScript
• Wysyłanie wiadomości do tematów