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 stronach internetowych , aby móc niezawodnie wysyłać wiadomości.

Interfejs FCM JavaScript API umożliwia odbieranie 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ługi oraz rozszerzenia Chrome korzystające z Push API.

Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przy użyciu protokołu HTTPS. Wynika to z tego, że korzysta on z service workerów, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, Firebase App Hosting jest zalecany i oferuje bezpłatny pakiet do hostowania HTTPS we własnej domenie.

Aby zacząć korzystać z interfejsu FCM JavaScript API, musisz dodać Firebase do aplikacji internetowej i dodać logikę umożliwiającą dostęp do identyfikatorów instalacji Firebase, co pozwoli Ci określić odbiorcę powiadomień.

Dodawanie i inicjowanie pakietu SDK FCM

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

2. Dodaj pakiet Firebase Cloud Messaging 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 w przypadku stron internetowych i chcesz przejść na pakiet SDK w wersji 6.7.0 lub nowszej, musisz włączyć interfejs FCM Registration API w przypadku swojego projektu w konsoli Google Cloud. Gdy włączasz interfejs API, upewnij się, że jesteś zalogowany w konsoli Google Cloud na to samo konto Google, którego używasz w Firebase, i wybierz odpowiedni projekt. W nowych projektach dodających FCM SDK ten interfejs API jest domyślnie włączony.

Konfigurowanie danych logowania do stron internetowych w FCM

Interfejs FCM Web korzysta z danych logowania do stron internetowych, zwanych kluczami VAPID (Voluntary Application Server Identification), aby autoryzować żądania wysyłania do obsługiwanych usług Web Push. Aby subskrybować aplikację na powiadomienia push, musisz powiązać parę kluczy z projektem w Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy w Firebase konsoli.

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 stron internetowych.

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

   W konsoli wyświetli 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 móc docierać 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 postaci zakodowanej w base64 URL safe:

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

2. Otwórz sekcję Konfiguracja stron internetowych.

3. Na karcie Certyfikaty Web Push znajdź i kliknij tekst linku: importuj istniejącą parę kluczy.

4. W oknie Importuj parę kluczy podaj klucz publiczny i 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 stron internetowych w aplikacji. Więcej informacji o formacie kluczy i sposobach ich generowania znajdziesz w artykule Klucze serwera aplikacji.

Konfigurowanie danych logowania do stron internetowych 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. Używając klucza wygenerowanego lub zaimportowanego zgodnie z instrukcjami w Konfigurowanie danych logowania do stron internetowych w FCM, dodaj go do kodu po pobraniu obiektu messaging:

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

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

Gdy chcesz kierować reklamy na instancję aplikacji za pomocą FCM, najpierw poproś użytkownika o zgodę na wyświetlanie powiadomień za pomocą Notification.requestPermission(). Jeśli wywołasz tę metodę w sposób pokazany poniżej, zwróci ona 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 zarejestrowaniem. Znaczącą treść możesz dodać do pliku później w procesie konfiguracji klienta.

Uzyskiwanie dostępu do identyfikatora instalacji Firebase

Aby zarejestrować instancję aplikacji i pobrać identyfikator instalacji Firebase (FID) do kierowania reklam na 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 przypadkach:

1. Za każdym razem, gdy zakończy się ręczne register() wywołanie.
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 za pomocą preferowanej metody.

Uzyskiwanie dostępu do tokena rejestracji (wycofane)

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 za pomocą preferowanej metody.

Wysyłanie testowego powiadomienia

1. Zainstaluj i uruchom aplikację na urządzeniu docelowym. Na urządzeniach Apple musisz zaakceptować prośbę o zgodę 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. Kliknij Powiadomienia Firebase i 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 prawym panelu kliknij Wyślij wiadomość testową.

7. W polu Dodaj FCMtoken rejestracji wpisz token rejestracji.

8. Kliknij Przetestuj.

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

Dalsze kroki

Po wykonaniu czynności konfiguracyjnych możesz przejść do korzystania 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