Interfejs API JavaScript FCM umożliwia odbieranie komunikatów powiadomień w aplikacjach internetowych działających w przeglądarkach obsługujących interfejs API Push . Obejmuje to wersje przeglądarek wymienione w tej tabeli pomocy oraz rozszerzenia Chrome za pośrednictwem interfejsu API Push.
Zestaw FCM SDK jest obsługiwany tylko na stronach obsługiwanych przez protokół HTTPS. Wynika to z wykorzystania przez niego pracowników usług, które są dostępne tylko w witrynach HTTPS. Jeśli potrzebujesz dostawcy, zalecamy Firebase Hosting , który zapewnia bezpłatną warstwę hostingu HTTPS we własnej domenie.
Aby rozpocząć korzystanie z interfejsu API JavaScript FCM, musisz dodać Firebase do swojej aplikacji internetowej i dodać logikę umożliwiającą dostęp do tokenów rejestracji.
Dodaj i zainicjuj zestaw SDK FCM
Jeśli jeszcze tego nie zrobiłeś, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase .
Dodaj pakiet SDK Firebase Cloud Messaging JS i zainicjuj Firebase Cloud Messaging:
Modułowe API sieciowe
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);
Internetowy interfejs API z przestrzenią nazw
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 obecnie korzystasz z FCM w internecie i chcesz dokonać aktualizacji do SDK 6.7.0 lub nowszej, musisz włączyć interfejs API rejestracji FCM dla swojego projektu w Google Cloud Console. Po włączeniu interfejsu API upewnij się, że jesteś zalogowany do Cloud Console przy użyciu tego samego konta Google, którego używasz w Firebase, i pamiętaj, aby wybrać właściwy projekt. W nowych projektach dodających pakiet FCM SDK ten interfejs API jest domyślnie włączony.
Skonfiguruj poświadczenia internetowe za pomocą FCM
Interfejs sieciowy FCM wykorzystuje poświadczenia internetowe zwane „dobrowolną identyfikacją serwera aplikacji” lub kluczami „VAPID” w celu autoryzacji wysyłania żądań do obsługiwanych usług web push. Aby zasubskrybować aplikację do powiadomień push, musisz powiązać parę kluczy z projektem Firebase. Możesz wygenerować nową parę kluczy lub zaimportować istniejącą parę kluczy za pomocą konsoli Firebase.
Wygeneruj nową parę kluczy
- Otwórz kartę Wiadomości w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa .
- W zakładce Certyfikaty Web Push kliknij opcję Wygeneruj parę kluczy . Konsola wyświetla informację o wygenerowaniu pary kluczy oraz ciąg klucza publicznego i datę dodania.
Zaimportuj istniejącą parę kluczy
Jeśli masz istniejącą parę kluczy, której używasz już w swojej aplikacji internetowej, możesz zaimportować ją do FCM, aby uzyskać dostęp do istniejących instancji aplikacji internetowej za pośrednictwem interfejsów API FCM. Aby zaimportować klucze, musisz mieć dostęp do projektu Firebase na poziomie właściciela. Zaimportuj swój istniejący klucz publiczny i prywatny w bezpiecznej formie zakodowanej w formacie Base64 URL:
- Otwórz kartę Wiadomości w chmurze w panelu Ustawienia konsoli Firebase i przewiń do sekcji Konfiguracja internetowa .
- W zakładce Certyfikaty Web Push znajdź i wybierz tekst linku „importuj istniejącą parę kluczy”.
- W oknie dialogowym Importuj parę kluczy podaj klucze publiczny i prywatny w odpowiednich polach i kliknij Importuj . Konsola wyświetla ciąg klucza publicznego i datę dodania.
Aby uzyskać instrukcje dotyczące dodawania klucza do aplikacji, zobacz Konfigurowanie poświadczeń internetowych w aplikacji . Więcej informacji na temat formatu kluczy i sposobu ich generowania można znaleźć w sekcji Klucze serwera aplikacji .
Skonfiguruj poświadczenia internetowe w swojej 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 poświadczeń internetowych za pomocą FCM , dodaj go do swojego kodu 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"});
Uzyskaj dostęp do tokena rejestracyjnego
Jeśli chcesz pobrać bieżący token rejestracji dla instancji aplikacji, najpierw poproś użytkownika o uprawnienia do powiadamiania za pomocą Notification.requestPermission()
. Po wywołaniu, jak pokazano, zwraca token, jeśli zezwolenie zostało udzielone, lub odrzuca obietnicę, jeśli jest odrzucona:
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 już pliku firebase-messaging-sw.js
, utwórz pusty plik o tej nazwie i umieść go w katalogu głównym swojej domeny przed pobraniem tokena. Możesz dodać znaczącą zawartość do pliku później w procesie konfiguracji klienta.
Aby odzyskać bieżący token:
Web modular API
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 namespaced API
// 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 przechowuj przy użyciu preferowanej metody.
Następne kroki
Po ukończeniu kroków konfiguracyjnych dostępnych jest kilka opcji dalszego korzystania z FCM dla Internetu (JavaScript):
- Dodaj funkcjonalność do swojej aplikacji, aby odbierać wiadomości .
- Wypróbuj jeden z naszych samouczków: Wyślij pierwszą wiadomość do aplikacji działającej w tle lub Wyślij wiadomości do wielu urządzeń .
- Przejrzyj pełny przykład w serwisie GitHub .
- Przejrzyj dokumentację JavaScript .
- Obejrzyj film instruktażowy dotyczący wdrażania interfejsu API.