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

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

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

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

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

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

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

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

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

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

npm install firebase - αποθήκευση

Ας πάρουμε έτσι την κωδικοποίηση!

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

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

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

εισαγωγή πυροσβεστικής βάσης από το 'πυρίμαχο'.
εξαγωγή const initializeFirebase = () => {
  firebase.initializeApp ({
    μηνύματαSenderId: "μηνύματός σαςSenderId"
  });
}}

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

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

εισαγωγή Αντιδρά από "αντιδρά";
εισαγωγή του ReactDOM από το 'react-dom';
Εισαγωγή εφαρμογής από './App'.
εισαγωγή {initializeFirebase} από το "./push-notification";
ReactDOM.render (, document.getElementById ('root'));
initializeFirebase ();
Μπορείτε να βρείτε τα κλειδιά για το έργο σας μέσα στην κονσόλα Firebase.
Λήψη των κλειδιών

Εργάτες Εξυπηρέτησης

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

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

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

εξαγωγή const iniţializarFirebase = () => {
  firebase.initializeApp ({
    messagingSenderId: 'messagingSenderId'
  });
navigator.serviceWorker
    .register ('/ my-sw.js')
    .then ((εγγραφή) => {
      firebase.messaging () χρήσηServiceWorker (εγγραφή);
    });
}}

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

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

importScripts ('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts ('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
firebase.initializeApp ({
    αποστολή μηνυμάτωνSenderId: "το μηνύματά σαςSendId ξανά"
});
const μηνύματα = firebase.messaging ();

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

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

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

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

εξαγωγή const askForPermissioToReceiveNotifications = async () => {
  προσπαθήστε {
    const μηνύματα = firebase.messaging ();
    await messaging.requestPermission ();
    const token = αναμονή μηνυμάτων.getToken ();
    console.log ('token do usuário:', token).
    
    επιστροφή κουπονιού.
  } αλίευση (σφάλμα) {
    console.error (σφάλμα);
  }}
}}

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

εισαγωγή Αντιδρά από "αντιδρά";
εισαγωγή {askForPermissioToReceiveNotifications} από το "./push-notification";
const NotificationButton = () => (
    <κουμπί onClick = {askForPermissioToReceiveNotifications}>
      Κλίκ για τη λήψη των κοινοποιήσεων
    
) ·
προεπιλογή εξαγωγής NotificationButton;

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

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

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

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

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

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

{
    "Γνωστοποίηση": {
        "τίτλος": "Firebase",
        "body": "Το Firebase είναι φοβερό",
        "click_action": "http: // localhost: 3000 /",
        "εικονίδιο": "http: //url-to-an-icon/icon.png"
    },
    "to": "Χρήστης TOKEN"
}}

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

Τύπος περιεχομένου: εφαρμογή / json
Εξουσιοδότηση: κλειδί = SERVER_KEY
Το κλειδί διακομιστή βρίσκεται στις ρυθμίσεις του έργου στην Κονσόλα Firebase κάτω από την καρτέλα Μηνύματα Cloud.

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

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

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

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

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

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

Πώς να το κάνετε αυτό

Βασικά θα στείλουμε ένα αίτημα POST στη διεύθυνση https://iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME, περνώντας το όνομα του θέματος και το διακριτικό στη διεύθυνση URL.

Μην ξεχάσετε να περάσετε στην κεφαλίδα την ίδια εξουσιοδότηση που χρησιμοποιήσαμε για να στείλουμε την ειδοποίηση.

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

Δείτε το παρακάτω παράδειγμα:

{
    "Γνωστοποίηση": {
        "τίτλος": "Firebase",
        "σώμα": "μήνυμα θέματος Firebase",
        "click_action": "http: // localhost: 3000 /",
        "εικονίδιο": "http: // localhost: 3000 / icon.png"
    },
    "to": "/ θέματα / TOPIC_NAME"
}}

συμπέρασμα

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

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