Wprowadzenie do Komunikacji w chmurze Firebase


Ten przewodnik zawiera informacje o konfigurowaniu Firebase Cloud Messaging w aplikacjach klienckich na urządzenia mobilne i w internecie, aby można było niezawodnie wysyłać wiadomości. W przypadku środowisk serwerowych zapoznaj się z sekcją Środowisko serwerowe i FCM.

Konfigurowanie aplikacji klienckiej Firebase Cloud Messaging w JavaScript

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. Dotyczy to wersji przeglądarek wymienionych w tej tabeli pomocy i rozszerzeń Chrome korzystających z Push API.

Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przez HTTPS. Wynika to z używania przez nią service workerów, 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 rozpocząć korzystanie 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 zrobiono, zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase.

  2. Dodaj Firebase Cloud Messaging pakiet SDK w JavaScript 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 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 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 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 dobrowolną identyfikacją serwera aplikacji lub kluczami VAPID, 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 Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy za pomocą Firebasekonsoli.

Generowanie nowej pary kluczy

  1. Otwórz kartę Cloud Messaging w panelu Ustawienia konsoli Firebase i przejdź do sekcji Konfiguracja internetowa.
  2. Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy. W konsoli pojawi się komunikat 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 mieć dostęp do istniejących instancji aplikacji internetowej za pomocą interfejsów API FCM. Aby zaimportować klucze, musisz mieć dostęp do projektu Firebase na poziomie właściciela. Zaimportuj istniejący klucz publiczny i prywatny w formacie zakodowanym w base64, który jest bezpieczny w przypadku adresów URL:

  1. Otwórz kartę Cloud Messaging w panelu Ustawienia konsoli Firebase i przejdź do sekcji Konfiguracja internetowa.
  2. Na karcie Certyfikaty powiadomień push w internecie odszukaj i kliknij tekst linku: import an existing key pair (zaimportuj istniejącą parę kluczy).
  3. W oknie Import a key pair (Importuj parę 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 getToken(): Promise<string> 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 artykule Konfigurowanie danych logowania w internecie za pomocą FCM, dodaj go w kodzie po pobraniu obiektu wiadomości:

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

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

Dostęp do tokena rejestracji

Jeśli chcesz pobrać bieżący token rejestracji instancji aplikacji, najpierw poproś użytkownika o przyznanie uprawnień do wysyłania powiadomień za pomocą funkcji Notification.requestPermission(). Jeśli wywołasz tę funkcję w podany sposób, zwróci ona token, jeśli użytkownik przyzna uprawnienia, 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 przed pobraniem tokena. W późniejszym etapie konfiguracji klienta możesz dodać do pliku istotne treści.

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 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 stronę Wiadomości.
  4. Jeśli to Twoja pierwsza wiadomość, kliknij Utwórz pierwszą kampanię.
    1. Wybierz Wiadomości z powiadomieniami Firebase i kliknij Utwórz.
  5. W przeciwnym razie na karcie Kampanie kliknij Nowa kampania, a potem Powiadomienia.
  6. Wpisz tekst wiadomości.
  7. W panelu po prawej stronie kliknij Wyślij wiadomość testową.
  8. W polu Dodaj token rejestracji FCM wpisz token rejestracji.
  9. 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 przejść do FCM for Web (JavaScript) na kilka sposobów: