Wprowadzenie do Komunikacji w chmurze Firebase w aplikacjach internetowych

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

FCM JavaScript API umożliwia odbieranie wiadomości z powiadomieniami w aplikacjach internetowych działających w przeglądarkach obsługujących Push API. Dotyczy to wersji przeglądarek wymienionych w tej tabeli obsługi oraz rozszerzeń Chrome korzystających z Push API.

Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przez HTTPS. Wynika to z faktu, że korzysta ona z technologii service worker, która jest dostępna tylko w przypadku witryn 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 FCM JavaScript API, musisz dodać Firebase do aplikacji internetowej i logikę umożliwiającą dostęp do identyfikatorów instalacji Firebase, które pozwalają określać odbiorców powiadomień.

Dodawanie i inicjowanie pakietu SDK FCM

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

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

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

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 na potrzeby internetu i chcesz uaktualnić pakiet SDK do wersji 6.7.0 lub nowszej, musisz włączyć interfejs FCM Registration API w projekcie w konsoli Google Cloud. Gdy włączysz interfejs API, upewnij się, że logujesz się w Google Cloud konsoli za pomocą tego samego konta Google, którego używasz w Firebase, i wybierz właściwy projekt. W przypadku nowych projektów, w których dodano pakiet SDK FCM, ten interfejs API jest domyślnie włączony.

Konfigurowanie danych logowania w internecie za pomocą FCM

FCM Interfejs internetowy używa danych logowania w internecie, zwanych kluczami VAPID (Voluntary Application Server Identification), do autoryzowania żądań wysyłanych do obsługiwanych usług powiadomień push w internecie. Aby subskrybować 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ą Firebasekonsoli.

Generowanie nowej pary kluczy

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

2. Otwórz sekcję Konfiguracja w internecie.

3. Na karcie Certyfikaty powiadomień push w internecie kliknij Wygeneruj parę kluczy.

   W konsoli wyświetli się powiadomienie o wygenerowaniu pary kluczy, a także 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 istniejących 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 prywatny w formie zakodowanej w standardzie base64 bezpiecznej dla adresów URL:

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

2. Otwórz sekcję Konfiguracja w internecie.

3. Na karcie Certyfikaty powiadomień push w internecie odszukaj i kliknij tekst linku: import an existing key pair (zaimportuj istniejącą parę kluczy).

4. W oknie Import a key pair (Importowanie pary kluczy) podaj klucze publiczny i prywatny w odpowiednich polach i kliknij Import (Importuj).

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

Instrukcje dodawania klucza do aplikacji znajdziesz w artykule Konfigurowanie danych logowania w aplikacji. Więcej informacji o formacie kluczy i sposobie ich generowania znajdziesz w artykule Klucze serwera aplikacji.

Konfigurowanie danych logowania w aplikacji

Metoda register(): Promise<void> umożliwia FCM używanie klucza VAPID podczas wysyłania żądań wiadomości do różnych usług push. Korzystając z klucza wygenerowanego lub zaimportowanego zgodnie z instrukcjami w artykule Konfigurowanie danych logowania w internecie za pomocą FCM, dodaj go do kodu 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"});

Poproś o zgodę na wyświetlanie powiadomień i skonfiguruj service worker

Jeśli chcesz kierować reklamy na instancję aplikacji za pomocą FCM, najpierw poproś użytkownika o przyznanie uprawnień do powiadomień za pomocą Notification.requestPermission(). Jeśli wywołasz tę funkcję w podany sposób, zwróci ona stan uprawnień, jeśli zostały one 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ą. Możesz dodać do pliku istotne treści później, podczas konfigurowania klienta.

Dostęp do identyfikatora instalacji Firebase

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 wywoływane w 3 sytuacjach:

1. Za każdym razem, gdy zakończy się połączenie ręczneregister().
2. wykryto zmianę identyfikatora instalacji Firebase.
3. Wysyłane jest zdarzenie A pushsubscriptionchange.

Po uzyskaniu identyfikatora instalacji Firebase wyślij go na serwer aplikacji i zapisz za pomocą wybranej metody.

Dostęp do tokena rejestracji (wycofany)

Aby pobrać bieżący token:

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

// 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 wybraną metodą.

Wysyłanie testowej wiadomości z powiadomieniem

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

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

3. W konsoli Firebase otwórz DevOps i zaangażowanie > Wiadomości.

4. Utwórz kampanię.

   • Jeśli to Twoja pierwsza wiadomość:

     1. Kliknij Utwórz pierwszą kampanię.

     2. Wybierz Wiadomości z powiadomieniami 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 kliknij Wyślij wiadomość testową.

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

8. Kliknij Przetestuj.

Po kliknięciu Testuj docelowe urządzenie klienta z aplikacją działającą w tle powinno otrzymać powiadomienie.

Dalsze kroki

Po wykonaniu czynności konfiguracyjnych możesz skorzystać z tych opcji, aby kontynuować korzystanie z FCM w kampaniach internetowych (JavaScript):

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