Interfejs FCM JavaScript API umożliwia otrzymywanie powiadomień w aplikacje internetowe działające w przeglądarkach, które obsługują Interfejs API usługi Push. Dotyczy to wersji przeglądarek wymienionych w matrix i rozszerzenia do Chrome za pomocą interfejsu Push API.
Pakiet SDK FCM jest obsługiwany tylko na stronach wyświetlanych przez HTTPS. To jest ze względu na wykorzystanie mechanizmów Service Worker, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, Hosting Firebase to jest zalecany i obejmuje bezpłatny poziom hostingu HTTPS we własnej domenie.
Aby zacząć korzystać z FCM JavaScript API, musisz dodać Firebase do swojej aplikacji internetowej i dodaj logikę dostępu do tokenów rejestracji.
Dodaj i zainicjuj pakiet SDK FCM
Dodaj pakiet SDK Firebase Cloud Messaging JS i zainicjuj Komunikację w chmurze Firebase (FCM):
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 korzystasz obecnie z FCM w przeglądarce i chcesz przejść na pakiet SDK 6.7.0 lub nowszej, należy włączyć Interfejs API rejestracji FCM swojego projektu w konsoli Google Cloud. Po włączeniu interfejsu API upewnij się, korzystasz z tego samego konta Google, którego używasz do logowania się w Cloud Console. Firebase i wybierz właściwy projekt. Nowe projekty, w których dodano atrybuty Ten interfejs API jest domyślnie włączony w pakiecie SDK FCM.
Konfigurowanie danych logowania w przeglądarce w FCM
Interfejs internetowy FCM używa danych logowania w przeglądarce o nazwie „Voluntary”. Application Server Identification” (Identyfikator serwera aplikacji), lub „VAPID” klucze, do autoryzowania żądań wysyłania w obsługiwanych usługach web push. Aby zasubskrybować powiadomienia push w aplikacji: musisz powiązać parę kluczy z projektem Firebase. Możesz: wygeneruj nową parę kluczy lub zaimportuj istniejącą za pomocą Firebase Konsola.
Generowanie nowej pary kluczy
- Otwórz Karta Komunikacja w chmurze w konsoli Firebase Ustawienia i przewiń do sekcji Konfiguracja internetowa.
- Na karcie Certyfikaty Web Push kliknij Wygeneruj parę kluczy. wyświetli się powiadomienie o wygenerowaniu pary kluczy oraz ciągu klucza publicznego i daty dodania.
Importuj istniejącą parę kluczy
Jeśli masz parę kluczy, której używasz już w swojej aplikacji internetowej, możesz zaimportować go do FCM, aby mieć dostęp do istniejącej aplikacji internetowej przez interfejsy FCM API. Aby zaimportować klucze, musisz mieć dostęp do projektu Firebase na poziomie właściciela. Zaimportuj swoje publiczne pliki oraz klucz prywatny w formie bezpiecznego zakodowanego adresu URL w base64:
- Otwórz Karta Komunikacja w chmurze w konsoli Firebase Ustawienia i przewiń do sekcji Konfiguracja internetowa.
- Na karcie Certyfikaty Web Push znajdź i wybierz tekst linku. „zaimportuj istniejącą parę kluczy”.
- W oknie Importuj parę kluczy podaj klucz publiczny i prywatny w odpowiednie pola i kliknij Importuj. Konsola wyświetli się publicznie klucz i data dodania.
Instrukcje dodawania kluczyka do aplikacji znajdziesz tutaj Skonfiguruj w aplikacji dane logowania do witryny. Więcej informacji o formacie kluczy i sposobie ich generowania znajdziesz w artykule zobacz Klucze serwera aplikacji.
Skonfiguruj dane logowania do internetu w swojej aplikacji
Metoda getToken(): Promise<string>
pozwala FCM na używanie danych uwierzytelniających klucza VAPID podczas wysyłania wiadomości
do różnych usług push. Przy użyciu wygenerowanego lub zaimportowanego klucza
zgodnie z instrukcjami podanymi w artykule
Skonfiguruj dane logowania w przeglądarce w FCM.
dodaj go w kodzie po pobraniu obiektu do przesyłania 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
Aby pobrać bieżący token rejestracji instancji aplikacji,
poproś użytkownika o zgodę na wyświetlanie powiadomień z Notification.requestPermission()
.
Gdy ta funkcja jest wywoływana, zwraca token, jeśli uprawnienie zostanie przyznane lub odrzuci obietnicę.
jeśli odmowa:
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
tę nazwą i umieść go w katalogu głównym swojej domeny przed pobraniem tokena.
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); // ... });
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); // ... });
Po uzyskaniu tokena wyślij go na serwer aplikacji i do sklepu. za pomocą preferowanej metody.
Dalsze kroki
Po zakończeniu konfiguracji masz do wyboru kilka opcji i przekazywać je za pomocą FCM dla witryn (JavaScript):
- Dodaj funkcje do swojej aplikacji, aby: odbierania wiadomości.
- Wypróbuj jeden z naszych samouczków: Wysyłanie pierwszej wiadomości do aplikacji działającej w tle. lub Wysyłanie wiadomości na wiele urządzeń.
- Zobacz pełny przykład na GitHubie.
- Zapoznaj się z dokumentacją JavaScript.
- Obejrzyj film instruktażowy wdrażania API.