Πώς να προσθέσετε ειδοποιήσεις στην εφαρμογή σας: Εντός εφαρμογής, email και push

Για να προσθέσετε ειδοποιήσεις σε μια web εφαρμογή, ξεκινήστε με ειδοποιήσεις εντός εφαρμογής: έναν πίνακα ειδοποιήσεων στη βάση σας και ένα εικονίδιο καμπάνας που δείχνει τις αδιάβαστες. Προσθέστε email για όσα χρειάζεται να ξέρουν οι άνθρωποι όταν λείπουν, με πάροχο email, και web push μόνο όταν οι έγκαιρες ειδοποιήσεις έχουν σημασία, γιατί χρειάζεται service worker, άδεια χρήστη και, στο iPhone, την εφαρμογή αποθηκευμένη στην αρχική οθόνη. Όποια κανάλια κι αν χρησιμοποιήσετε, δημιουργήστε κάθε ειδοποίηση σε ένα σημείο, στον διακομιστή, και αφήστε τους χρήστες να επιλέγουν τι λαμβάνουν.

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

Τα κύρια κανάλια συγκρινόμενα

Οι περισσότερες εφαρμογές χρειάζονται εντός εφαρμογής και email. Το push και το SMS αξίζουν όταν ο χρόνος μετράει πραγματικά, όπως μια υπενθύμιση κράτησης ή μια παραγγελία που είναι έτοιμη.

Πώς συνδέεται ένα σύστημα ειδοποιήσεων

Κρατήστε το απλό και κεντρικό:

1. Κάτι συμβαίνει. Δημοσιεύεται ένα σχόλιο, αποτυγχάνει μια πληρωμή, ένα ραντεβού είναι αύριο.
2. Ο διακομιστής σας καλεί μία συνάρτηση, όπως notify(user, type, data).
3. Η συνάρτηση ελέγχει τις προτιμήσεις του χρήστη και γράφει μια γραμμή στον πίνακα notifications (για την καμπάνα).
4. Έπειτα στέλνει στα άλλα κανάλια που έχει ενεργοποιήσει ο χρήστης για αυτόν τον τύπο: email μέσω του παρόχου σας, push μέσω του Push API.
5. Η διεπαφή δείχνει τις αδιάβαστες και τις σημειώνει ως διαβασμένες όταν ανοιχτούν.

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

Τι να αποθηκεύετε

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

Εμφάνιση νέων ειδοποιήσεων

• Φόρτωση κατά την προβολή της σελίδας και έλεγχος κάθε 30–60 δευτερόλεπτα. Απλό και αξιόπιστο.
• Ενημερώσεις σε πραγματικό χρόνο με WebSockets ή server-sent events φαίνονται άμεσες, αλλά προσθέτουν κινούμενα μέρη. Ξεκινήστε με έλεγχο (polling), εκτός αν η άμεση ενημέρωση έχει πραγματική σημασία.

Ειδοποιήσεις email

Το email χρειάζεται πάροχο αποστολής και επαληθευμένο domain· οι λεπτομέρειες είναι στο πώς να στέλνετε email από την εφαρμογή σας. Για τις ειδοποιήσεις ειδικά:

• Στέλνετε από τον διακομιστή, ποτέ με κλειδί παρόχου στον περιηγητή.
• Ομαδοποιήστε τα συχνά γεγονότα. Ένα email με «3 νέα σχόλια» είναι καλύτερο από τρία emails.
• Προσφέρετε ημερήσια ή εβδομαδιαία περίληψη για δραστηριότητα χαμηλής προτεραιότητας.
• Συμπεριλάβετε σύνδεσμο διαγραφής ή προτιμήσεων σε μη απαραίτητα emails. Οι κανόνες για τα διαφημιστικά emails διαφέρουν ανά χώρα· ελέγξτε τι ισχύει για εσάς.

Web push ειδοποιήσεις

Το web push επιτρέπει στον ιστότοπό σας να στέλνει ειδοποιήσεις που μοιάζουν με ειδοποιήσεις εφαρμογής. Σύμφωνα με την τεκμηρίωση του MDN για το Push API, λειτουργεί ως εξής:

1. Ο ιστότοπός σας καταχωρεί ένα service worker, ένα σενάριο που ο περιηγητής μπορεί να τρέχει στο παρασκήνιο.
2. Αφού συναινέσει ο χρήστης, το service worker εγγράφεται μέσω PushManager.subscribe(). Ο περιηγητής επιστρέφει μια εγγραφή (subscription) με τελικό σημείο και κλειδιά κρυπτογράφησης.
3. Ο διακομιστής σας αποθηκεύει αυτή την εγγραφή και, όταν συμβαίνει κάτι, στέλνει μήνυμα στο τελικό σημείο, συνήθως υπογεγραμμένο με κλειδιά VAPID (ένα ζεύγος κλειδιών που ταυτοποιεί τον διακομιστή σας).
4. Ο περιηγητής ξεκινά το service worker σας, που εμφανίζει την ειδοποίηση, ακόμη κι αν η σελίδα σας δεν είναι ανοιχτή.

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

iPhone και iPad

Η WebKit πρόσθεσε Web Push για web εφαρμογές στο iOS και iPadOS 16.4, με δύο προϋποθέσεις από την ανακοίνωσή της: ο ιστότοπος πρέπει να έχει προστεθεί στην αρχική οθόνη, και η άδεια πρέπει να ζητείται ως απάντηση σε ενέργεια του χρήστη, όπως το πάτημα ενός κουμπιού Εγγραφής. Άρα στο iPhone το push φτάνει μόνο σε χρήστες που έχουν εγκαταστήσει τη web εφαρμογή σας. Δείτε τις εγγενείς έναντι των προοδευτικών web εφαρμογών για το τι σημαίνει η εγκατάσταση μιας web εφαρμογής.

Πώς να ζητάτε άδεια σωστά

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

Οι προγραμματισμένες ειδοποιήσεις χρειάζονται έναυσμα

Οι «υπενθυμίσεις 24 ώρες πριν» ή η «εβδομαδιαία περίληψη κάθε Δευτέρα» χρειάζονται κάτι που τρέχει σε προγραμματισμένη ώρα. Αυτό είναι πρόβλημα εργασιών παρασκηνίου, που καλύπτεται στο πώς να τρέχετε εργασίες παρασκηνίου. Ένα συνηθισμένο μοτίβο: ένας εξωτερικός προγραμματιστής καλεί ένα προστατευμένο τελικό σημείο κάθε λίγα λεπτά, και εκείνο στέλνει ό,τι έχει έρθει η ώρα του.

Προτροπές για τον δημιουργό εφαρμογών AI

Ξεκινήστε με τις ειδοποιήσεις εντός εφαρμογής:

Πρόσθεσε ειδοποιήσεις εντός εφαρμογής. Δημιούργησε πίνακα notifications (χρήστης, τύπος, τίτλος, κείμενο, σύνδεσμος, created_at, read_at). Πρόσθεσε μια συνάρτηση διακομιστή notify(userId, type, data) που την καλεί κάθε λειτουργία. Δείξε εικονίδιο καμπάνας στην κεφαλίδα με πλήθος αδιάβαστων, αναπτυσσόμενη λίστα με τις τελευταίες 20, και κουμπί «σήμανση όλων ως διαβασμένων». Έλεγξε για νέες ειδοποιήσεις κάθε 60 δευτερόλεπτα.

Μετά προτιμήσεις και email:

Πρόσθεσε ρυθμίσεις ειδοποιήσεων: για κάθε τύπο (απαντήσεις σε σχόλια, αναφορές, χρεώσεις), ο χρήστης επιλέγει εντός εφαρμογής, email, και τα δύο ή κανένα. Το notify() πρέπει να τα σέβεται. Στείλε email μέσω [ΠΑΡΟΧΟΣ] με το μυστικό [ENV_NAME] μόνο στον διακομιστή. Ομαδοποίησε τα email σχολίων ώστε κάθε χρήστης να παίρνει το πολύ ένα email κάθε 15 λεπτά.

Έπειτα push, αν το χρειάζεστε:

Πρόσθεσε προαιρετικό web push. Καταχώρισε service worker, δημιούργησε κλειδιά VAPID και αποθήκευσε το ιδιωτικό κλειδί ως μυστικό. Πρόσθεσε κουμπί «Ενεργοποίηση ειδοποιήσεων» στις ρυθμίσεις που ζητά άδεια μόνο όταν πατηθεί. Αποθήκευσε κάθε εγγραφή ανά χρήστη και συσκευή, στείλε push από το notify() όταν ο χρήστης έχει συμφωνήσει, και διέγραψε τις εγγραφές που το push service αναφέρει ως ληγμένες.

Συνηθισμένα λάθη

• Ειδοποιήσεις διάσπαρτες στον κώδικα. Κάθε λειτουργία στέλνει το δικό της email με διαφορετικό τρόπο, και οι προτιμήσεις αγνοούνται. Χρησιμοποιήστε μία συνάρτηση notify().
• Ερώτηση για άδεια push κατά τη φόρτωση της σελίδας. Οι περισσότεροι αρνούνται, και μπορεί να μην έχετε άλλη ευκαιρία.
• Καμία προτίμηση. Όσοι δεν μπορούν να κλείσουν τις θορυβώδεις ειδοποιήσεις τις κλείνουν όλες, ή φεύγουν.
• Αποστολή από τον περιηγητή. Τα κλειδιά email και push ανήκουν στον διακομιστή.
• Μη καθαρισμός νεκρών εγγραφών push. Οι ληγμένες εγγραφές συσσωρεύονται και σπαταλούν αποστολές.
• Ευαίσθητες λεπτομέρειες στο κείμενο της ειδοποίησης. Η οθόνη κλειδώματος το δείχνει. «Έχετε νέο μήνυμα» είναι ασφαλέστερο από το ίδιο το μήνυμα.
• Κανένα αρχείο για το τι στάλθηκε. Όταν ένας χρήστης λέει «δεν πήρα ποτέ το email», τα αρχεία με τα αναγνωριστικά μηνυμάτων του παρόχου βοηθούν να βρείτε γιατί.

Λίστα ελέγχου

• Μία συνάρτηση notify() στον διακομιστή, που χρησιμοποιείται παντού
• Πίνακας ειδοποιήσεων με κατάσταση ανάγνωσης, και καμπάνα με πλήθος αδιάβαστων
• Προτιμήσεις καναλιού ανά τύπο, που σέβεται το notify()
• Email από τον διακομιστή με επαληθευμένο domain· ομαδοποίηση ή περίληψη για συχνά γεγονότα
• Η άδεια push ζητείται μόνο μετά από ενέργεια του χρήστη, με εξήγηση
• Push δοκιμασμένο σε υπολογιστή και σε iPhone με την εφαρμογή στην αρχική οθόνη
• Οι ληγμένες εγγραφές push αφαιρούνται
• Κανένα ευαίσθητο περιεχόμενο σε προεπισκόπηση push ή email
• Οι προγραμματισμένες υπενθυμίσεις έχουν αξιόπιστο έναυσμα

Ειδοποιήσεις στο Mythex

Το Mythex δεν περιλαμβάνει ενσωματωμένη υπηρεσία email ή push για τις εφαρμογές που φτιάχνετε, οπότε φέρνετε τον δικό σας πάροχο email και δημιουργείτε τα δικά σας κλειδιά push, αποθηκευμένα ως μυστικά του έργου. Το μέρος της εντός εφαρμογής χρειάζεται μόνο τη βάση του έργου, που το Mythex προσθέτει όταν το ζητήσετε. Χτίστε με προτροπές σαν τις παραπάνω, δοκιμάστε την καμπάνα και τα emails στο Preview, και δοκιμάστε το push στο δημοσιευμένο URL σας, αφού τα service workers και το push χρειάζονται πραγματική διεύθυνση HTTPS. Η συνταγή της τεκμηρίωσης Αποστολή email από την εφαρμογή σας έχει έτοιμη αρχική προτροπή. Το Mythex δεν τεκμηριώνει προγραμματισμένες εργασίες, οπότε σχεδιάστε τις χρονισμένες υπενθυμίσεις με εξωτερικό έναυσμα, όπως περιγράφεται στο πώς να τρέχετε εργασίες παρασκηνίου.

Ερωτήσεις