Πώς να στείλετε ειδοποιήσεις Push με JavaScript

Οι ειδοποιήσεις JavaScript είναι ένας τρόπος αποστολής μηνυμάτων στους χρήστες σας σε πραγματικό χρόνο. Μπορείτε να τα χρησιμοποιήσετε για να ειδοποιείτε για ενημερώσεις του ιστότοπού σας, νέα μηνύματα συνομιλίας, email ή οποιεσδήποτε δραστηριότητες κοινωνικών μέσων. Μπορείτε επίσης να χρησιμοποιήσετε ειδοποιήσεις για υπενθυμίσεις ημερολογίου (όπως μια σύσκεψη που πλησιάζει στο Google Meet ή στο Zoom).

Μάθετε πώς να δημιουργείτε ειδοποιήσεις συμβάντων σε JavaScript και να τις στέλνετε στο τηλέφωνο ή στο πρόγραμμα περιήγησής σας. Αυτό θα το πετύχετε χρησιμοποιώντας ενσωματωμένη JavaScript από την πλευρά του πελάτη—δεν απαιτείται εξωτερική βιβλιοθήκη!

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

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

Η παρακάτω JavaScript θα ζητήσει άδεια αποστολής ειδοποιήσεων χρήστη. ο requestPermission η κλήση θα επιστρέψει ένα μήνυμα που υποδεικνύει εάν το πρόγραμμα περιήγησης επιτρέπει ειδοποιήσεις ή όχι:

συνθ κουμπί = έγγραφο.querySelector('κουμπί')
 button.addEventListener("Κάντε κλικ", ()=> {
 Notification.requestPermission().then(άδεια => {
 ειδοποίηση (άδεια)
 })
})

Όταν κάνετε κλικ στο κουμπί, ενδέχεται να λάβετε μια ειδοποίηση που λέει αρνήθηκε. Αυτό σημαίνει ότι το πρόγραμμα περιήγησης έχει αρνηθεί την JavaScript από την αποστολή ειδοποιήσεων συμβάντων. Η κατάσταση άδειας είναι αρνήθηκε για περιπτώσεις όπου ο χρήστης έχει αποτρέψει ρητά τους ιστότοπους να στέλνουν ειδοποιήσεις (μέσω των ρυθμίσεων του προγράμματος περιήγησης) ή ο χρήστης σερφάρει σε κατάσταση ανώνυμης περιήγησης.

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

Αποστολή Βασικών Ειδοποιήσεων

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

Εφόσον θα στέλνατε ειδοποιήσεις μόνο εάν χορηγηθεί άδεια, θα πρέπει να το τυλίξετε μέσα σε ένα αν έλεγχος.

συνθ κουμπί = έγγραφο.querySelector('κουμπί')
button.addEventListener("Κάντε κλικ", ()=> {
 Notification.requestPermission().then(περμανάντ => {
αν(περμανάντ "χορηγήθηκε") {
νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης")
 }
 })
})

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

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

Προηγμένες ιδιότητες ειδοποιήσεων

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

Η περιουσία του σώματος

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

συνθ κουμπί = έγγραφο.querySelector('κουμπί')
button.addEventListener("Κάντε κλικ", ()=> {
 Notification.requestPermission().then(περμανάντ => {
αν(περμανάντ "χορηγήθηκε") {
νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης", {
 σώμα: "Αυτό είναι περισσότερο κείμενο",
 })
 }
 })
})

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

Το χαρακτηριστικό δεδομένων

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

button.addEventListener("Κάντε κλικ", ()=> {
 Notification.requestPermission().then(περμανάντ => {
αν(περμανάντ "χορηγήθηκε") {
συνθ ειδοποίηση = νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης", {
 σώμα: "Αυτό είναι περισσότερο κείμενο",
 δεδομένα: {Γειά σου: "κόσμος"}
 })

 ειδοποίηση (notification.data.hello)
 }
 })
})

Μπορείτε να αποκτήσετε πρόσβαση στα δεδομένα από το δεδομένα ιδιοκτησία παρόμοια με αυτή που φαίνεται στο παραπάνω μπλοκ κώδικα (μέσα στο συναγερμός()).

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

συνθ ειδοποίηση = νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης", { 
 σώμα: "Αυτό είναι περισσότερο κείμενο",
 δεδομένα: {Γειά σου: "κόσμος"} 
})
Γνωστοποίηση. addEventListener("Κλείσε", e => {
κονσόλα.log (e.target.data.hello)
})

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

• προβολή: Εκτελείται όταν εμφανίζεται η ειδοποίηση.
• Κάντε κλικ: Εκτελείται όταν ο χρήστης κάνει κλικ σε οποιοδήποτε σημείο της ειδοποίησης.
• λάθος: Εκτελείται όταν αρνείστε την άδεια JavaScript για αποστολή ειδοποιήσεων.

Το εικονίδιο Ιδιότητα

ο εικόνισμα Η ιδιότητα προορίζεται για την προσθήκη ενός εικονιδίου στην ειδοποίηση push. Υποθέτοντας ότι έχετε ένα λογότυπο εικονιδίου με το όνομα logo.png στον τρέχοντα κατάλογο, μπορείτε να τον χρησιμοποιήσετε στις ειδοποιήσεις σας όπως:

συνθ ειδοποίηση = νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης", { 
 εικόνισμα: "logo.png"
})

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

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

Η ετικέτα Χαρακτηριστικό

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

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

συνθ ειδοποίηση = νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης", { 
 σώμα: "Αυτό είναι περισσότερο κείμενο",
 ετικέτα: "Η νέα μου ετικέτα"
})

Εάν κάνατε ξανά κλικ στο κουμπί, θα εμφανιστεί μόνο ένα πλαίσιο ειδοποίησης. Κάθε επόμενο κλικ θα αντικαθιστά την προηγούμενη ειδοποίηση, επομένως μόνο μία ειδοποίηση θα εμφανίζεται όσες φορές κι αν κάνετε κλικ στο κουμπί. Αυτό είναι χρήσιμο εάν θέλετε να προσθέσετε δυναμικά δεδομένα (όπως Math.random()) στο σώμα:

συνθ ειδοποίηση = νέος Γνωστοποίηση("Παράδειγμα ειδοποίησης", { 
 σώμα: Μαθηματικά.τυχαίος()
 εικόνισμα: "logo.png",
 ετικέτα: "Το κορμί μου"
})

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

Ένα παράδειγμα Push Notification με χρήση JavaScript

Το παρακάτω παράδειγμα εντοπίζει κάθε φορά που χάνετε την εστίαση στη σελίδα σας (δηλαδή όταν κλείνετε τη σελίδα ή ανοίγετε μια νέα καρτέλα). Σε αυτήν την περίπτωση, ο κωδικός στέλνει μια ειδοποίηση που σας ζητά να επιστρέψετε:

αφήνω Γνωστοποίηση
έγγραφο.addEventListener("ορατότητα-αλλαγή", ()=> {
αν(έγγραφο.ορατότηταΚράτος "κρυμμένος") {
 ειδοποίηση = νέος Γνωστοποίηση("Ελα πισω ΠΑΡΑΚΑΛΩ", {
 σώμα: "Μην φύγεις ακόμα :("
 ετικέτα: "Ελα πισω"
 })
 } αλλού {
 notification.close()
 }
})

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

Μάθετε περισσότερα για το JavaScript

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