Jak wysyłać powiadomienia Web Push za pomocą Firebase (FCM)?

Opublikowany: 2021-12-29

Aby ułatwić swoje usługi powiadomień w Internecie, iOS i Androidzie, Firebase korzysta z usług w chmurze. Firebase Cloud Messaging (FCM) działa, generując unikalne tokeny dla każdego urządzenia, a następnie wykorzystując je do wysyłania wiadomości do odpowiednich urządzeń. Do wysyłania powiadomień web push Firebase generuje tokeny za pomocą javascript.

Na tym blogu dowiesz się wszystkiego o tym, jak zaimplementować powiadomienia web push firebase .

Co to jest przesyłanie wiadomości w chmurze Firebase?

Co to jest przesyłanie wiadomości w chmurze Firebase

Firebase Cloud Messaging to bezpłatna usługa powiadomień mobilnych Google. Umożliwia zewnętrznym deweloperom aplikacji wysyłanie powiadomień do swoich użytkowników z serwerów Google Cloud Messaging (GCM). Umożliwia to informowanie użytkowników o różnych danych dostępnych do synchronizacji w czasie rzeczywistym.

Wysyła wiadomości z aplikacji użytkowników do serwerów FCM i wiadomości z serwerów FCM do aplikacji użytkowników i. Możesz używać FCM do angażowania, zatrzymywania i ponownego kierowania użytkowników bez względu na to, gdzie się znajdują.

Jakie korzyści daje wysyłanie powiadomień web push za pomocą Firebase?

Poniżej przedstawiamy korzyści płynące z wysyłania powiadomień web push z Firebase .

  • Rozpoczęcie za darmo: nie musisz płacić Google za korzystanie z FCM usługa powiadomień push. Poza tym łatwo go skalować.  
  • Nie martw się o uprawnienia: ponieważ biblioteki FCM używają scalania manifestów, automatycznie dodaje wszystkie wymagane uprawnienia. Zmniejsza to ilość wysiłku, który musisz podjąć.
  • Uproszczona rejestracja: Adres używany przez FCM do dostarczenia wiadomości do urządzenia jest określany jako „token rejestracji”. Ten proces stał się teraz asynchroniczny. Biblioteka Google automatycznie otrzymuje token w Twoim imieniu. Tak więc, gdy poprosisz o token, otrzymasz token rejestracji. Aby rozpocząć przesyłanie wiadomości, wystarczy wysłać ten token na swoje serwery.
  • Łatwa implementacja: Wdrożenie FCM jest szybkie i łatwe. Ponieważ intuicyjne interfejsy API są dostępne w jednym pakiecie SDK, możesz natychmiast rozwiązywać problemy klientów bez budowania skomplikowanej infrastruktury.
  • Analityka: otrzymujesz nieograniczoną liczbę analiz za darmo od Firebase. Uzyskujesz cenne dane o użytkowaniu aplikacji przez użytkowników, kliknięciach reklam i nie tylko. Inne funkcje Firebase dobrze współpracują z Firebase Analytics. Możesz więc działać na wszystko.
  • Obsługa wielu platform: Ponieważ interfejsy API są dostępne w jednym pakiecie SDK dla C++, JavaScript, Android i iOS, można go rozszerzyć na różne platformy bez zmiany infrastruktury.
  • Komunikaty dotyczące wspólnego tematu: gdy chcesz powiadomić użytkowników zainteresowanych określonym tematem, po prostu publikujesz wiadomość w FCM. FCM dostarczy go wszystkim użytkownikom, którzy zasubskrybowali ten temat. Najlepsze jest to, że nie ma żadnych ograniczeń dotyczących przesyłania wiadomości na temat.
  • Różne wiadomości tematyczne: FCM umożliwia również segmentację klientów, aby wysyłać im odpowiednie wiadomości. Na przykład, jeśli wysyłasz do użytkowników powiadomienia o natężeniu ruchu, Twoi użytkownicy w mieście A będą otrzymywać komunikaty o natężeniu ruchu tylko w ich mieście, a użytkownicy w mieście B będą otrzymywać komunikaty o natężeniu ruchu tylko w ich mieście.

Jak wysyłać powiadomienia web push za pomocą Firebase?

Oto szczegółowe instrukcje, które pomogą Ci zaimplementować powiadomienia web push Firebase .

1. Zarejestruj aplikację Firebase

Zarejestruj-aplikację Firebase
  1. Odwiedź ten link https://console.firebase.google.com/u/0/ i kliknij kartę „Dodaj projekt”.
  2. Podaj nazwę projektu i wybierz kraj. Następnie naciśnij zakładkę „Utwórz projekt”. Google sprawdzi nazwę projektu pod kątem jego dostępności i niepowtarzalności.
  3. Teraz kliknij kartę „zaakceptuj warunki”, aby kontynuować. Twój projekt powstanie w ciągu
  4. kilka sekund.
  5. Teraz dodaj swoją aplikację na Androida/IOS/Web/Unity do swojego projektu. Ponieważ ten blog skupia się na powiadomieniach web push Firebase , musisz kontynuować, klikając ikonę sieci wyświetlaną jako </>.
  6. Nadaj swojej aplikacji pseudonim. Ten pseudonim jest przeznaczony wyłącznie dla użytkowników. Możesz więc użyć tej funkcji, aby ułatwić lepsze rozróżnianie aplikacji w projekcie do użytku wewnętrznego.
  7. Jeśli Twój projekt nie działa na serwerze HTTPS, dodaj dla niego hosting. Jeśli nie, pomiń ten krok.
  8. Teraz kliknij „Zarejestruj aplikację”.  
  9. Teraz, gdy Twoja aplikacja jest zarejestrowana, otrzymasz pakiet Firebase SDK, który jest kodem. Skopiuj ten kod

w dół. Wejdzie w życie w następnej sekcji. Jeśli nie skopiujesz tego teraz, możesz go pobrać z sekcji „Ustawienia”.

2. Dodaj Firebase do swojego projektu

Dodaj-firebase-do-swojego-projektu
  1. Przejdź do pulpitu nawigacyjnego. Na pasku bocznym znajdziesz ikonę „Ustawienia”. Kliknij na to. W wyświetlonym menu kliknij ustawienia projektu.
  2. Po otwarciu strony Ustawienia (Ustawienia ogólne) przewiń w dół strony i skopiuj kod wyświetlany dla wybranej sieci CDN.
  3. Na końcu umieść następujący kod w swoim pliku HTML. Dołącz również skrypt CDN do obsługi wiadomości Firebase.

< script src = „https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<script src = „https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3. Obsługa usługi Firebase

1. W przypadku kodu wymienionego na górze dodaj kod podany na dole, po miejscu, w którym znajduje się // Zainicjuj Firebase.

// Zainicjuj Firebase

firebase.initializeApp(firebaseConfig);constmessaging=firebase.messaging(); //Niestandardowa funkcja stworzona do uruchamiania usługi Firebase

  getStartToken(); //Ten kod odbiera wiadomość z serwera /Twoja aplikacja i drukuje wiadomość do konsoli, jeśli ta sama karta jest otwarta jak w projekcie w przeglądarce

message.onMessage(function(payload){console.log(„onMessage”,payload);});

2. Możesz napisać kod na dole w osobnym pliku js znajdującym się na Twojej stronie HTML lub możesz dołączyć go do kodu na górze w tagu <script>.

messaging.getToken() to funkcja służąca do pobierania tokenów za pomocą pakietu Firebase SDK. Jeśli token zostanie znaleziony, jest wysyłany do serwera w celu przechowywania, w przeciwnym razie pozwolenie użytkownika jest wyszukiwane za pomocą funkcji RequestPermission().

setTokenSentToServer() to kolejna funkcja wykorzystująca pamięć lokalną do przypisania 1 jako wartości sendTokenToServer w przypadku, gdy token został już wysłany na serwer oraz 0 w przypadku, gdy token nie został wysłany do serwera z powodu wystąpienia błędu podczas wysyłania do serwer lub jest pobierany z pakietu SDK Firebase.

4. Wysyłanie powiadomień z projektu

Wysyłanie-wiadomości-z-projektu

Teraz, gdy wszystko, czego potrzebujesz do wysyłania powiadomień z projektu, jest gotowe, oto szczegóły dotyczące tego, w jaki sposób możesz wysłać powiadomienie do użytkownika końcowego, którego token znasz:

1. Początkowo musisz otrzymać klucz serwisowy. Wykonaj następujące kroki:

  • Otwórz konsolę Firebase
  • Kliknij na ustawienia projektu
  • Stuknij w „Wiadomości w chmurze”
  • Kod znajdziesz w polu Klucz serwera. Skopiuj to.

2. Wysyłanie powiadomień push

Wykorzystajmy platformę listonosz do wysyłania powiadomień web push z Firebase . Oto rzeczy, które musisz zrobić, to:

3. Ustaw typ żądania POST.

4. Wpisz adres URL: https://fcm.googleapis.com/fcm/send

5. Kliknij sekcję Nagłówki.

Musisz wypełnić dwa nagłówki, a mianowicie autoryzację i typ treści.

· Autoryzacja: Wklej skopiowany klucz serwera.

· Typ treści: aplikacja/JSON (JavaScript Object Notation)

6. Teraz kliknij otwórz sekcję Ciało. Wklej token użytkownika pobrany przez Firebase podczas rejestracji użytkownika.

7. Teraz wyślij prośbę. Będziesz mógł wysyłać powiadomienia push do swoich użytkowników z serwera.

Pamiętaj, że kiedy wyślesz swoje pierwsze powiadomienie push do użytkownika, przeglądarka poprosi go o zgodę na otrzymywanie powiadomień od Ciebie. Tylko jeśli on/ona udzieli pozwolenia, będziesz mógł stale wysyłać pushe. Możesz upewnić się, że Twój użytkownik udzieli swojej zgody, postępując zgodnie z naszymi wskazówkami dotyczącymi powiadomień push.

Podsumowanie Już zrozumiałeś, że wysyłanie powiadomień web push za pomocą Firebase nie jest tak trudne, jak się wydaje. Nie wymaga dużo zasobów i nie zajmuje dużo czasu. Poza tym, używając Powiadomienia web push Firebase nie ma wpływu na koszty utrzymania Twojej strony czy aplikacji webowej. Jeśli nadal potrzebujesz więcej informacji na temat jego funkcji, zapoznaj się z dokumentacją Firebase.

Zapoznaj się z prezentacją produktu

Przeczytaj także:

  • 7 przecenionych czynników powiadomień web push
  • Powiadomienia Web Push | Taktyka marketingu bezpośredniego e-mail
  • 41 statystyk powiadomień web push, które muszą znać marketerzy
  • 15 najlepszych programów i narzędzi do powiadomień push w 2022 roku {porównanie}
  • Jak Powiadomienia Web Push są skuteczne niż inne media marketingowe?