Πώς να προσθέσετε ειδοποιήσεις push σε μια εφαρμογή ιστού με το Firebase; +;

Καθώς εξελίσσονται οι εφαρμογές ιστού, είναι όλο και πιο συνηθισμένο να συναντάμε λειτουργίες που κανονικά θα συσχετίσατε με μια εγγενή εφαρμογή σε μια εφαρμογή ιστού. Πολλοί ιστότοποι αποστέλλουν ειδοποιήσεις στους χρήστες τους μέσω του προγράμματος περιήγησης για διάφορα συμβάντα που συμβαίνουν στην εφαρμογή ιστού.

Σήμερα, θα σας δείξω τα απαραίτητα βήματα, για να επιτύχετε τέτοιες λειτουργίες στην εφαρμογή ιστού σας χρησιμοποιώντας το Firebase .

Ειδοποιήσεις με το Firebase

Το Firebase είναι μια πλατφόρμα που προσφέρει διάφορες υπηρεσίες για εφαρμογές για κινητά και ιστούς και βοηθά τους προγραμματιστές να δημιουργούν εφαρμογές γρήγορα με πολλές δυνατότητες.

Για να στείλουμε τις ειδοποιήσεις, θα χρησιμοποιήσουμε την υπηρεσία που ονομάζεται Cloud Messaging, η οποία μας επιτρέπει να στέλνουμε μηνύματα σε οποιαδήποτε συσκευή χρησιμοποιώντας αιτήματα HTTP.

Ρύθμιση έργου

Πρώτα απ 'όλα, πρέπει να έχετε λογαριασμό Firebase και θα πρέπει να δημιουργήσετε ένα νέο έργο μέσα σε αυτόν.

Για αυτήν τη ρύθμιση επίδειξης, θα χρησιμοποιήσω ένα απλό έργο που δημιουργήθηκε με την εφαρμογή create-react , αλλά μπορείτε να χρησιμοποιήσετε τον ίδιο κώδικα οπουδήποτε αλλού που χρησιμοποιεί JavaScript.

Επιπλέον, πρέπει να προσθέσουμε τη βιβλιοθήκη Firebase στο έργο.

npm install firebase --save

Ας πάμε λοιπόν κωδικοποίηση!

Τώρα που ολοκληρώσαμε τη ρύθμιση, μπορούμε να αρχίσουμε να κωδικοποιούμε τη λειτουργική μονάδα που θα είναι υπεύθυνη για τις ειδοποιήσεις.

Ας δημιουργήσουμε ένα αρχείο μέσα στον κατάλογο του έργου που ονομάζεται push-notification.js.

Μέσα στο αρχείο, ας δημιουργήσουμε μια συνάρτηση που αρχικοποιεί το Firebase και περνά τα κλειδιά του έργου σας.

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

Λοιπόν, τώρα που έχουμε τη λειτουργία που πρέπει να το ονομάσουμε.

Μέσα στο σημείο εισόδου του έργου σας, εισαγάγετε τη συνάρτηση και καλέστε την.

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { initializeFirebase } from './push-notification'; ReactDOM.render(, document.getElementById('root')); initializeFirebase();
Μπορείτε να βρείτε τα κλειδιά του έργου σας στο Firebase Console.

Εργαζόμενοι υπηρεσιών

Το service worker είναι ένα σενάριο που εκτελείται στο παρασκήνιο του προγράμματος περιήγησής σας, ξεχωριστά από την ιστοσελίδα, επιτρέποντας δυνατότητες που δεν απαιτούν αλληλεπίδραση με ιστοσελίδα ή χρήστη.

Για να λάβετε το συμβάν onMessage , η εφαρμογή σας χρειάζεται ένα service service. Από προεπιλογή, όταν ξεκινάτε το Firebase, αναζητά ένα αρχείο που ονομάζεται firebase-messaging-sw.js.

Εάν όμως έχετε ήδη ένα και θέλετε να το εκμεταλλευτείτε για να λαμβάνετε ειδοποιήσεις, μπορείτε να καθορίσετε κατά την εκκίνηση του Firebase ποιος εργαζόμενος υπηρεσίας θα χρησιμοποιήσει. Για παράδειγμα:

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

Αυτός ο εργαζόμενος υπηρεσιών θα εισαγάγει βασικά το σενάριο που απαιτείται για να εμφανίσει τις ειδοποιήσεις όταν η εφαρμογή σας βρίσκεται στο παρασκήνιο.

Πρέπει να προσθέσουμε firebase-messaging-sw.jsστην τοποθεσία στην οποία προβάλλονται τα αρχεία σας. Καθώς χρησιμοποιώ την εφαρμογή create-react, θα την προσθέσω στον δημόσιο φάκελο με το ακόλουθο περιεχόμενο:

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();

Ζητώντας άδεια για αποστολή ειδοποιήσεων

Λοιπόν, όλοι γνωρίζουν πόσο ενοχλητικό είναι να μπείτε στον ιστότοπο και να ζητήσετε εξουσιοδότηση για την αποστολή ειδοποιήσεων. Ας το κάνουμε με άλλο τρόπο!

Αφήστε τον χρήστη να επιλέξει εάν θα λαμβάνει ειδοποιήσεις ή όχι.

Πρώτα απ 'όλα, ας δημιουργήσουμε τη συνάρτηση που θα υποβάλει το αίτημα και θα επιστρέψει το διακριτικό του χρήστη.

Μέσα στο αρχείο push-notification.js, προσθέστε τη λειτουργία:

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); } }

Πρέπει να καλέσουμε αυτήν τη λειτουργία από κάπου, οπότε θα την προσθέσω με το πάτημα ενός κουμπιού.

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

Εντάξει, ας το δούμε να λειτουργεί:

Αποστολή ειδοποιήσεων

Για να στείλουμε την ειδοποίηση, πρέπει να υποβάλουμε ένα αίτημα στο Firebase API, ενημερώνοντάς το για το διακριτικό που θα λάβει ο χρήστης.

Στα παρακάτω παραδείγματα χρησιμοποιώ τον Postman, αλλά μπορείτε να το κάνετε από οποιονδήποτε άλλο πελάτη REST.

Βασικά, πρέπει να υποβάλετε ένα αίτημα POST στο //fcm.googleapis.com/fcm/send στέλνοντας ένα JSON στο σώμα του αιτήματος.

Παρακάτω είναι η δομή του JSON που θα σταλεί:

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

Στην κεφαλίδα του αιτήματος, πρέπει να περάσουμε το κλειδί διακομιστή του έργου μας στο Firebase και τον τύπο περιεχομένου:

Content-Type: application/json Authorization: key=SERVER_KEY
Το κλειδί διακομιστή βρίσκεται στις ρυθμίσεις έργου στο Firebase Console στην καρτέλα Cloud Messaging.

Ειδοποιήσεις σε δράση

Να θυμάστε ότι οι ειδοποιήσεις θα εμφανίζονται μόνο όταν η εφαρμογή σας ελαχιστοποιείται ή στο παρασκήνιο.

Έτσι στέλνουμε μια άμεση ειδοποίηση σε μια συσκευή.

Αποστολή ειδοποιήσεων σε μια ομάδα χρηστών

Λοιπόν, τώρα που έχουμε δει πώς να στείλουμε μια ειδοποίηση σε έναν χρήστη, πώς στέλνουμε μια ειδοποίηση σε πολλούς χρήστες ταυτόχρονα;

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

Ευχαριστώ που το διαβάσατε! Ελπίζω να καταλάβετε τώρα πώς να χρησιμοποιείτε τις ειδοποιήσεις push. Μπορείτε να βρείτε το αποθετήριο με τον κωδικό επίδειξης εδώ.

Για να λαμβάνω ειδοποιήσεις για τις μελλοντικές αναρτήσεις μου, ακολουθήστε με στο GitHub ή στο Twitter.