Wysyłanie wiadomości testowej do aplikacji działającej w tle

Aby zacząć korzystać z FCM, opracuj najprostszy przypadek użycia: wysłanie powiadomienia do określonego użytkownika, gdy aplikacja działa w tle na urządzeniu. Na tej stronie znajdziesz listę wszystkich czynności wymaganych do osiągnięcia tego celu – od konfiguracji po weryfikację – może ona obejmować czynności, które zostały już wykonane, jeśli masz skonfigurowaną aplikację kliencką JavaScript na potrzeby FCM.

Konfigurowanie pakietu SDK

Dodaj Firebase do swojego projektu JavaScript, chyba że masz to już za sobą.

Dostęp do tokena rejestracji

Jeśli musisz pobrać bieżący token rejestracji instancji aplikacji, najpierw poproś użytkownika o uprawnienia do wyświetlania powiadomień, używając uprawnienia Notification.requestPermission(). Gdy ta funkcja jest wywoływana, zwraca token w przypadku przyznania uprawnień lub odrzucenia obietnicy w przypadku jej odrzucenia:

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 przed pobraniem tokena umieść go w katalogu głównym swojej domeny. Przydatną zawartość możesz dodać do pliku na późniejszym etapie konfiguracji 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 przy użyciu preferowanej metody.

Wyślij powiadomienie testowe

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

  2. Upewnij się, że aplikacja na urządzeniu działa w tle.

  3. W konsoli Firebase otwórz stronę Wiadomości.

  4. Jeśli to Twoja pierwsza wiadomość, kliknij Utwórz pierwszą kampanię.

    1. Wybierz Powiadomienia Firebase i kliknij Utwórz.

  5. Jeśli nie, na karcie Kampanie wybierz Nowa kampania, a potem Powiadomienia.

  6. Wpisz tekst wiadomości. Wszystkie pozostałe pola są opcjonalne.

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

  8. W polu Dodaj token rejestracji FCM wpisz token rejestracji uzyskany w poprzedniej sekcji tego przewodnika.

  9. Kliknij Przetestuj.

Gdy klikniesz Przetestuj, powiadomienie powinno dotrzeć do docelowego urządzenia klienckiego (z aplikacją w tle).

Dalsze kroki

Wysyłaj wiadomości do aplikacji na pierwszym planie

Gdy wyślesz powiadomienia, gdy aplikacja działa w tle, przeczytaj artykuł Odbieranie wiadomości w kliencie JavaScriptu, aby zacząć wysyłać wiadomości do aplikacji działających na pierwszym planie.

Więcej niż powiadomienia

Jeśli chcesz wyjść poza powiadomienia i dodać do aplikacji inne, bardziej zaawansowane funkcje, przeczytaj te artykuły: