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 klienckich na platformie internetowej , aby móc niezawodnie wysyłać wiadomości.

Interfejs FCM JavaScript API umożliwia odbieranie wiadomości z powiadomieniami 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 FCM SDK jest obsługiwany tylko na stronach wyświetlanych przez 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 tokenów rejestracji.

Dodawanie i inicjowanie pakietu FCM SDK

  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:

Web 

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 

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 w swoim projekcie w Google Cloud. Gdy włączasz interfejs API, zaloguj się w konsoli Cloud za pomocą tego samego konta Google, którego używasz w Firebase, i wybierz odpowiedni projekt. W nowych projektach, w których dodawany jest pakiet FCM SDK, ten interfejs API jest domyślnie włączony.

Konfigurowanie danych logowania w internecie za pomocą FCM

Interfejs FCM Web korzysta z danych logowania w internecie, 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 Ustawienia > Ogólne. Następnie kliknij kartę Komunikacja w chmurze.

  2. Otwórz sekcję Konfiguracja internetowa.

  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 FCM API. 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 Ustawienia > Ogólne. Następnie kliknij kartę Komunikacja w chmurze.

  2. Otwórz sekcję Konfiguracja internetowa.

  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 w internecie w aplikacji. Więcej informacji o formacie kluczy i sposobach ich generowania znajdziesz w artykule Klucze serwera aplikacji.

Konfigurowanie danych logowania w internecie w aplikacji

Metoda getToken(): Promise<string> umożliwia FCM używanie poświadczeń 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 w internecie za pomocą FCM, dodaj go w kodzie po pobraniu obiektu przesyłania wiadomości:

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

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

Uzyskiwanie dostępu do tokena rejestracji

Gdy musisz pobrać bieżący token rejestracji dla instancji aplikacji, najpierw poproś użytkownika o zgodę na otrzymywanie powiadomień za pomocą funkcji Notification.requestPermission(). Jeśli wywołasz ją w pokazany sposób, zwróci token, jeśli użytkownik wyrazi zgodę, lub odrzuci obietnicę, jeśli odmówi: 

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, zanim pobierzesz token. Możesz dodać do pliku odpowiednią treść później, podczas konfigurowania klienta.

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

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 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 > Przesyłanie wiadomości.

  4. Utwórz kampanię.

    • Jeśli to Twoja pierwsza wiadomość:

      1. Kliknij Utwórz pierwszą kampanię.

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

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

  8. Kliknij Testuj.

Gdy klikniesz Testuj, urządzenie docelowe 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 internecie (JavaScript) na kilka sposobów: