Jak zintegrować powiadomienia push z PWA?
Opublikowany: 2021-04-28Spis treści
W naszym dzisiejszym samouczku będziemy integrować powiadomienia push z PWA za pomocą Firebase, a dokładniej, używając w nim funkcji Cloud Messaging, która umożliwia wysyłanie wiadomości za pomocą żądań HTTPS.
Progresywne aplikacje internetowe i powiadomienia push
Ponieważ progresywna aplikacja internetowa jest ruchem nieustannie zmieniającym się, nie dziwi fakt, że sama technologia stała się na równi (pod względem funkcji) z jej odpowiednikiem natywnej aplikacji.
Polecana literatura: PWA vs Native: co pasuje do Ciebie lepiej?
Wyzwalacze powiadomień dają programistom możliwość planowania powiadomień, nawet jeśli urządzenie użytkownika jest w trybie samolotowym.
Jon Krafcik, Chrome Dev Summit 2019
Przy tych wszystkich radykalnych zmianach marnotrawstwem byłoby nie wykorzystać ich do zwiększenia przychodów z PWA. I nie jest to nawet coś zbyt skomplikowanego, ponieważ możesz łatwo skonfigurować własną funkcję powiadomień push, korzystając z tego samouczka.
Zalecana literatura: 9 niezbędnych funkcji progresywnej aplikacji internetowej (PWA) dla e-commerce
Jak zintegrować powiadomienia push z PWA?
W naszym dzisiejszym samouczku będziemy integrować powiadomienia push z PWA przy użyciu Firebase , a konkretnie zawartej w nim funkcji Cloud Messaging , która umożliwia wysyłanie wiadomości za pomocą żądań HTTPS.
Warunki wstępne
- Konto Firebase (ponieważ będziesz tworzył projekt w Firebase)
- Progresywna aplikacja internetowa. Aby uprościć demonstrację, użyjemy aplikacji create-react-app, która jest podstawowym PWA, który można utworzyć za pomocą polecenia
Krok 1 : Utwórz podstawowe PWA
Ponieważ będziemy tworzyć podstawowe PWA za pomocą create-react-app, pobierzmy najpierw NodeJS. Po zakończeniu instalacji NodeJS otwórz wiersz polecenia NodeJS i uruchom następujące polecenia.
Aby utworzyć prostą aplikację React w określonym katalogu:
npx utwórz-react-app twój-pwa-katalog
Zmień bieżący katalog roboczy na nowo utworzoną aplikację React:
cd twój-katalog-pwa
Dodaj bibliotekę Firebase JavaScript do projektu:
npm zainstaluj firebase --save
Krok 2: Utwórz push-notification.js
Następnym krokiem jest stworzenie modułu, który będzie odpowiedzialny za wszystkie procesy związane z Twoimi powiadomieniami. W <your-pwa-directory>\src , utwórz plik o nazwie push-notification.js .
Najpierw utwórzmy funkcję, która inicjuje Firebase i przekazuje klucze Twojego projektu. Klucze do swojego projektu możesz znaleźć, przechodząc do Firebase > Przegląd projektu → Ustawienia projektu i klikając tę ikonę:
Spowoduje to przekierowanie na inną stronę, która zawiera pakiet SDK Firebase dla Twojego PWA:
Teraz, gdy mamy klucze do naszego projektu, dodajmy następujący kod do push-notification.js .
importuj firebase z „firebase”;
export const initializeFirebase = () => {
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXX",
URL bazy danych: "XXXXXXXXXXXXX",
identyfikator projektu: "XXXXXXXXXXXXXXX",
Zasobnik do przechowywania: "XXXXXXXXXXXXX",
komunikatySenderId: "XXXXXXXXXXXXX",
identyfikator aplikacji: „XXXXXXXXXXXXXXX”
});
} Dzięki temu utworzyłeś funkcję odpowiedzialną za całe przetwarzanie powiadomień, musisz ją teraz zaimportować i wywołać. Edytuj swój index.js ten sposób:
importuj React z 'react';
importować ReactDOM z 'react-dom';
import './index.css';
importuj aplikację z „./App”;
import * jako serviceWorkerRegistration z './serviceWorkerRegistration';
importuj reportWebVitals z './reportWebVitals';
importuj firebase z „firebase”;
import { initializeFirebase } z „./push-notification”;
ReactDOM.render(<App />, document.getElementById('root'));
zainicjowaćFirebase();Krok 3: Utwórz pracownika serwisu
Service Workers to nazwa technologii stojącej za progresywną aplikacją internetową, która umożliwia jej działanie w trybie offline, powiadomienia push i buforowanie zasobów.
SimiCart, wszystko, co musisz wiedzieć o progresywnych aplikacjach internetowych
Serwisant jest wymagany do odbioru zdarzenia onMessage , a co za tym idzie, do wysyłania powiadomień na urządzenie użytkownika. Domyślnie Firebase automatycznie szuka pliku o nazwie firebase-messaging-sw.js .
Dodajmy firebase-messaging-sw.js do katalogu, w którym są udostępniane Twoje pliki. Ponieważ jest to projekt typu create-react-app , ten firebase-messaging-sw.js zostanie umieszczony w naszym publicznym folderze:
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXX",
URL bazy danych: "XXXXXXXXXXXXX",
identyfikator projektu: "XXXXXXXXXXXXXXX",
Zasobnik do przechowywania: "XXXXXXXXXXXXX",
komunikatySenderId: "XXXXXXXXXXXXX",
identyfikator aplikacji: „XXXXXXXXXXXXXXX”
});
constmessaging = firebase.messaging();Jeśli nie słyszałeś jeszcze o PWA Service Worker, mamy dla Ciebie ekskluzywny artykuł, w którym dowiesz się wszystkiego o tej niesamowitej technologii.
Krok 4: Poproś użytkownika o uprawnienia do wysyłania powiadomień
To wiek prywatności, a nie chcesz denerwować swoich użytkowników wysyłając niechciane i nieautoryzowane powiadomienia!
Aby poprosić użytkownika o zgodę, po prostu dodaj to do push-notification.js :
importuj Firebase z 'firebase';
export const initializeFirebase = () => {
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXX",
URL bazy danych: "XXXXXXXXXXXXX",
identyfikator projektu: "XXXXXXXXXXXXXXX",
Zasobnik do przechowywania: "XXXXXXXXXXXXX",
komunikatySenderId: "XXXXXXXXXXXXX",
identyfikator aplikacji: „XXXXXXXXXXXXXXX”
});
}
export const askForPermissionToReceiveNotifications = async() => {
próbować {
constmessaging = firebase.messaging();
czekaj na wiadomości.requestPermission();
const token = czekaj na wiadomość.getToken();
console.log('Twój token to:', token);
zwrot tokena;
} złapać (błąd) {
konsola.błąd(błąd);
}
} A ponieważ ta funkcja będzie musiała zostać skądś wywołana, więc dodamy ją jednym kliknięciem. Edytuj plik app.js w katalogu /src/ w następujący sposób:
importuj logo z „./logo.svg”;
importuj './App.css';
import { askForPermissionToReceiveNotifications } z './push-notification';
funkcja App() {
zwrócić (
<div className="Aplikacja">
<header className="Nagłówek aplikacji">
<img src={logo} className="Logo aplikacji" alt="logo" />
<p>
Edytuj <code>src/App.js</code> i zapisz, aby ponownie załadować.
</p>
<a
className="Link do aplikacji"
href="https://reactjs.org"
cel="_blank"
rel="nie otwierający strony odsyłającej"
>
Dowiedz się Reaguj
</a>
<button onClick={askForPermissionToReceiveNotifications} >
Kliknij, aby otrzymywać powiadomienia
</button>
</header>
</div>
);
}
eksportuj domyślną aplikację;Teraz rozpocznijmy nasz projekt i powinieneś zobaczyć przycisk Kliknij, aby otrzymać powiadomienia , jak na przykład:
Kliknij przycisk i powinieneś zobaczyć wyskakujące okienko z prośbą o pozwolenie:
Kliknij Zezwól i sprawdź konsolę przeglądarki. Powinieneś zobaczyć komunikat informujący o Twoim tokenie:
Teraz zapisz ten token w innym miejscu, ponieważ będziesz go potrzebować w następnym kroku.
Krok 5: Wysyłaj powiadomienia push za pomocą Postmana
W kolejnych krokach będziemy używać Postmana do wysyłania powiadomień za pomocą usługi Firebase Cloud Messaging.
W aplikacji Postman utwórz żądanie POST z następującymi informacjami:
- URL żądania : https://fcm.googleapis.com/fcm/send
- Nagłówki : w nagłówkach żądania POST musisz mieć następujące klucze:
Autoryzacja: klucz= SERVER_KEY
Content-Type : application/json
Uwagi : SERVER_KEY można znaleźć na karcie Wiadomości w chmurze w ustawieniach Firebase
- Body : wypełnij treść żądania POST następującym kodem:
{
"powiadomienie": {
"tytuł": "SimiCart",
"body": "Testowe powiadomienie push",
"click_action": "http://localhost:3000/",
"ikona": "https://i.imgur.com/5zO5cce.png"
}
"to": "USER_TOKEN"
} Zastąp USER_TOKEN tokenem, który uzyskałeś (klikając przycisk Kliknij, aby otrzymać powiadomienia ) w kroku 4. Nie zapomnij wybrać typu Body jako raw i JSON .
Teraz kliknij Wyślij , a w prawym dolnym rogu powinno pojawić się powiadomienie:
Uwagi : te powiadomienia pojawiają się tylko wtedy, gdy aplikacja działa w tle lub jest zminimalizowana.
Gratulacje! Twoje PWA może teraz wysyłać powiadomienia!
Wniosek
Mamy nadzieję, że po tym przewodniku możesz teraz śmiało skonfigurować własną funkcję powiadomień push. Będąc nową technologią, Progressive Web Apps z pewnością jest skomplikowaną sprawą dla użytkowników, którzy nie znają się na technologii, dlatego istnieją łatwo dostępni dostawcy rozwiązań, tacy jak SimiCart, którzy mogą zająć się każdą Twoją potrzebą dzięki naszemu wieloletniemu doświadczeniu w PWA.