Hogyan adhatunk push értesítéseket egy webalkalmazáshoz a Firebase segítségével?

A webalkalmazások fejlődésével egyre gyakoribb olyan funkciókkal találkozni, amelyeket normál esetben egy natív alkalmazáshoz társít egy webalkalmazásban. Sok webhely értesítéseket küld a felhasználóinak a böngészőn keresztül a webes alkalmazáson belül bekövetkező különféle eseményekről.

Ma részletesen bemutatom azokat a lépéseket, amelyek szükségesek ahhoz, hogy az ilyen funkciókat elérhesse webalkalmazásában a Firebase használatával .

Értesítések a Firebase szolgáltatással

A Firebase egy olyan platform, amely különféle szolgáltatásokat kínál mobil és webes alkalmazásokhoz, és segít a fejlesztőknek az alkalmazások gyors felépítésében, sok funkcióval.

Az értesítések elküldéséhez a Cloud Messaging nevű szolgáltatást fogjuk használni, amely lehetővé teszi számunkra, hogy HTTP kérések segítségével üzeneteket küldhessünk bármilyen eszközre.

Projekt beállítása

Először is rendelkeznie kell Firebase-fiókkal, és abban új projektet kell létrehoznia.

Ehhez a bemutatóhoz egy egyszerű projektet fogok használni, amely a create-reagál-alkalmazással készült , de ugyanazt a kódot bárhol másutt használhatja, amely JavaScript-et használ.

Ezen felül hozzá kell adnunk a Firebase könyvtárat a projekthez.

npm install firebase --save

Szóval kezdjünk kódolni!

Most, hogy elvégeztük a beállítást, elkezdhetjük az értesítésekért felelős modul kódolását.

Hozzunk létre egy fájlt belül a projekt nevű könyvtárba push-notification.js.

A fájl belsejében hozzunk létre egy olyan funkciót, amely inicializálja a Firebase-t és átadja a projekt kulcsait.

import firebase from 'firebase'; export const initializeFirebase = () => { firebase.initializeApp({ messagingSenderId: "your messagingSenderId" }); }

Nos, most, hogy megvan a funkció, meg kell hívnunk.

A projekt belépési pontján belül importálja a függvényt, és hívja meg.

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { initializeFirebase } from './push-notification'; ReactDOM.render(, document.getElementById('root')); initializeFirebase();

A projekt kulcsait a Firebase Console-ban találja meg .

Szolgáltató dolgozók

A szervizmunkás egy olyan szkript, amelyet a böngésző a háttérben futtat, külön a weboldaltól, lehetővé téve olyan funkciókat, amelyek nem igényelnek weboldalt vagy felhasználói beavatkozást.

Az onMessage esemény fogadásához alkalmazásának szüksége van egy szolgáltatóra. Alapértelmezés szerint a Firebase indításakor megkeresi a nevű fájlt firebase-messaging-sw.js.

De ha már rendelkezik ilyennel, és szeretné kihasználni az értesítések fogadását, akkor a Firebase indításakor megadhatja, hogy melyik szolgáltatót fogja használni. Például:

export const inicializarFirebase = () => { firebase.initializeApp({ messagingSenderId: 'your messagingSenderId' }); navigator.serviceWorker .register('/my-sw.js') .then((registration) => { firebase.messaging().useServiceWorker(registration); }); }

Ez a szolgáltató alapvetően importálja az értesítések megjelenítéséhez szükséges parancsfájlt, amikor az alkalmazás a háttérben van.

Hozzá kell adnunk firebase-messaging-sw.jsa fájlok kézbesítési helyéhez. Amint a create-react-alkalmazást használom, hozzá fogom adni a nyilvános mappába a következő tartalommal:

importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-app.js'); importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js'); firebase.initializeApp({ messagingSenderId: "your messagingSenderId again" }); const messaging = firebase.messaging();

Engedély kérése értesítések küldéséhez

Nos, mindenki tudja, mennyire idegesítő belépni az oldalra és engedélyt kérni az értesítések küldéséhez. Tehát tegyük meg más módon!

Engedje meg a felhasználónak, hogy kiválassza-e az értesítéseket.

Először hozzuk létre azt a függvényt, amely megadja a kérést és visszaadja a felhasználó tokent.

A push-notification.js fájlunkon belül adja hozzá a függvényt:

export const askForPermissioToReceiveNotifications = async () => { try { const messaging = firebase.messaging(); await messaging.requestPermission(); const token = await messaging.getToken(); console.log('token do usuário:', token); return token; } catch (error) { console.error(error); } }

Valahonnan meg kell hívnunk ezt a függvényt, ezért egy gombnyomással hozzáadom.

import React from 'react'; import { askForPermissioToReceiveNotifications } from './push-notification'; const NotificationButton = () => (  Clique aqui para receber notificações  ); export default NotificationButton;

Oké, nézzük meg, hogy működik:

Értesítések küldése

Az értesítés elküldéséhez kérést kell benyújtanunk a Firebase API-hoz, tájékoztatva azt a tokenről, amelyet a felhasználó megkap.

Az alábbi példákban a Postmant használom, de ezt bármely más REST klienstől megteheti.

Alapvetően POST-kérelmet kell benyújtanunk a //fcm.googleapis.com/fcm/send címre egy JSON küldésével a kérelem törzsében.

Az alábbiakban bemutatjuk a küldendő JSON felépítését:

{ "notification": { "title": "Firebase", "body": "Firebase is awesome", "click_action": "//localhost:3000/", "icon": "//url-to-an-icon/icon.png" }, "to": "USER TOKEN" }

A kérés fejlécében át kell adnunk a projekt szerver kulcsát a Firebase-ben és a tartalom típusát:

Content-Type: application/json Authorization: key=SERVER_KEY

A szerverkulcs a Firebase Console projektbeállításaiban található a Cloud Messaging fül alatt.

Értesítések működés közben

Ne feledje, hogy az értesítések csak akkor jelennek meg, amikor az alkalmazás minimalizálva van, vagy a háttérben van.

Így küldünk közvetlen értesítést egy eszközre.

Értesítéseket küldhet a felhasználók egy csoportjának

Nos, most, hogy láttuk, hogyan küldhetünk értesítést egy felhasználónak, hogyan küldhetünk értesítést egyszerre több felhasználónak?

To do this, Firebase has a feature called topic, where you insert multiple tokens for a specific topic, and you can send the same notification to all of them from a single request.

How to do this

We will basically send a POST request to the address //iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME,passing the topic name and the token in the URL.

Do not forget to pass in the header the same authorization that we used to send the notification.

Sending the notification to users subscribed to any topic is very similar to sending a notification to a single user. The difference is that we need to pass the topic name in the “to” attribute instead of the token.

See the example below:

{ "notification": { "title": "Firebase", "body": "Firebase topic message", "click_action": "//localhost:3000/", "icon": "//localhost:3000/icon.png" }, "to": "/topics/TOPIC_NAME" }

Conclusion

Thanks for reading this! I hope you now understand how to make use of push notifications. The repository with the demo code can be found here.

To get notified of my future posts, follow me on GitHub or Twitter.