Ako pridať notifikácie do aplikácie: v aplikácii, e-mail a push

Ak chcete pridať notifikácie do webovej aplikácie, začnite s notifikáciami v aplikácii: tabuľkou notifikácií vo vašej databáze a ikonou zvončeka, ktorá zobrazuje neprečítané položky. Pridajte e-mail pre veci, ktoré ľudia potrebujú vedieť, keď nie sú pri aplikácii, pomocou poskytovateľa e-mailov, a webové push pridajte len vtedy, ak záleží na včasných upozorneniach, lebo potrebuje service worker, povolenie používateľa a na iPhone uloženú aplikáciu na ploche. Bez ohľadu na použité kanály vytvárajte každú notifikáciu na jednom mieste na serveri a nechajte používateľov vybrať, čo chcú dostávať.

Tento návod porovnáva kanály, ukazuje jednoduchú architektúru a dáva prompty, ktoré môžete použiť s AI nástrojom na tvorbu aplikácií.

Hlavné kanály porovnané

Väčšina aplikácií potrebuje notifikácie v aplikácii plus e-mail. Push a SMS stoja za to, keď záleží na načasovaní, napríklad pri pripomienke rezervácie alebo objednávke, ktorá je pripravená.

Ako do seba zapadá systém notifikácií

Držte to jednoduché a centrálne:

1. Niečo sa stane. Pridá sa komentár, zlyhá platba, rezervácia je zajtra.
2. Váš server zavolá jednu funkciu, napríklad notify(user, type, data).
3. Táto funkcia skontroluje predvoľby používateľa a zapíše riadok do tabuľky notifications (pre zvonček).
4. Potom odošle správy do ďalších kanálov, ktoré má používateľ pre daný typ zapnuté: e-mail cez vášho poskytovateľa, push cez Push API.
5. Frontend zobrazí neprečítané notifikácie a označí ich ako prečítané po otvorení.

Jeden vstupný bod znamená, že môžete pridať kanál, zmeniť znenie alebo rešpektovať predvoľby bez hľadania v celom kóde.

Čo ukladať

Tabuľka notifikácií zvyčajne potrebuje: ID používateľa, typ (napríklad comment_reply), krátky nadpis a text, odkaz na príslušnú stránku, čas vytvorenia a čas prečítania. Samostatná tabuľka predvolieb ukladá, aké kanály chce každý používateľ pre každý typ.

Zobrazovanie nových notifikácií

• Načítať pri zobrazení stránky a sledovať každých 30–60 sekúnd. Jednoduché a spoľahlivé.
• Aktualizácie v reálnom čase cez WebSockets alebo server-sent events pôsobia okamžite, ale pridávajú ďalšie pohyblivé časti. Začnite s dotazovaním, pokiaľ okamžité aktualizácie nie sú dôležité.

E-mailové notifikácie

E-mail potrebuje odosielateľa a overenú doménu; podrobnosti sú v článku ako posielať e-maily z aplikácie. Pre notifikácie konkrétne:

• Odosielajte zo servera, nikdy s kľúčom poskytovateľa v prehliadači.
• Zoskupujte časté udalosti. „3 nové komentáre“ v jednom e-maile je lepšie než tri e-maily.
• Ponúknite denný alebo týždenný súhrn pre nízkoprioritnú aktivitu.
• Pridajte odkaz na odhlásenie alebo predvoľby do nepodstatných e-mailov. Pravidlá pre marketingové e-maily sa líšia podľa krajiny; overte si, čo platí pre vás.

Webové push notifikácie

Webové push umožňuje vašej stránke posielať upozornenia, ktoré sa zobrazia ako notifikácie aplikácie. Podľa dokumentácie Push API na MDN to funguje takto:

1. Vaša stránka zaregistruje service worker, skript, ktorý môže prehliadač spúšťať na pozadí.
2. Po súhlase používateľa sa service worker prihlási cez PushManager.subscribe(). Prehliadač vráti predplatné s koncovým bodom a šifrovacími kľúčmi.
3. Váš server uloží toto predplatné a keď sa niečo stane, pošle správu na koncový bod, zvyčajne podpísanú kľúčmi VAPID (pár kľúčov, ktorý identifikuje váš server).
4. Prehliadač spustí váš service worker, ktorý zobrazí notifikáciu, aj keď vaša stránka nie je otvorená.

MDN tiež upozorňuje, že koncový bod treba držať v tajnosti, lebo na odoslanie správ tomuto používateľovi stačí jeho poznanie.

iPhone a iPad

WebKit pridal webové push pre webové aplikácie v iOS a iPadOS 16.4 s dvoma podmienkami z jeho oznámenia: stránka musí byť pridaná na plochu, a povolenie treba vyžiadať ako reakciu na akciu používateľa, napríklad kliknutím na tlačidlo Prihlásiť sa. Takže na iPhone dosiahnu push len používatelia, ktorí si vašu webovú aplikáciu nainštalovali. Čo znamená inštalácia webovej aplikácie, nájdete v článku natívne a progresívne webové aplikácie.

Ako správne žiadať o povolenie

Nepýtajte sa pri prvej návšteve. Najprv vysvetlite prínos („Dostanete pripomienku hodinu pred hodinou“), potom zobrazte výzvu prehliadača, keď používateľ klikne na tlačidlo. Ak niekto odmietne, prehliadač vám nemusí dovoliť opýtať sa znova, takže predčasná výzva ho môže natrvalo stratiť.

Plánované notifikácie potrebujú spúšťač

„Pripomienka 24 hodín vopred“ alebo „týždenný súhrn každý pondelok“ potrebujú niečo, čo beží podľa plánu. To je problém úloh na pozadí, ktorý rieši článok ako spúšťať úlohy na pozadí. Bežný vzor: externý plánovač volá chránený koncový bod každých pár minút a tento koncový bod odošle všetko, čo je na rade.

Prompty pre váš AI nástroj

Začnite s notifikáciami v aplikácii:

Pridaj notifikácie v aplikácii. Vytvor tabuľku notifications (user, type, title, body, link, created_at, read_at). Pridaj serverovú funkciu notify(userId, type, data), ktorú bude volať každá funkcia. V hlavičke zobraz ikonu zvončeka s počtom neprečítaných, rozbaľovací zoznam posledných 20 a tlačidlo „označiť všetko ako prečítané“. Každých 60 sekúnd kontroluj nové.

Potom predvoľby a e-mail:

Pridaj nastavenia notifikácií: pre každý typ (odpovede na komentáre, zmienky, fakturácia) nech si používateľ vyberie v aplikácii, e-mail, obe možnosti alebo žiadnu. notify() musí tieto nastavenia rešpektovať. Posielaj e-maily cez [POSKYTOVATEĽ] pomocou tajomstva [ENV_NAME] iba na serveri. Zoskup e-maily o komentároch tak, aby jeden používateľ dostal najviac jeden e-mail za 15 minút.

Potom push, ak ho potrebujete:

Pridaj voliteľné webové push. Zaregistruj service worker, vygeneruj VAPID kľúče a súkromný kľúč ulož ako tajomstvo. V nastaveniach pridaj tlačidlo „Povoliť notifikácie“, ktoré pýta povolenie až po kliknutí. Ukladaj každé predplatné na používateľa a zariadenie, posielaj push z notify() iba ak sa používateľ prihlásil a odstráň predplatné, ktoré push služba označí ako expirované.

Časté chyby

• Notifikácie roztrúsené po kóde. Každá funkcia posiela e-mail po svojom a predvoľby sa ignorujú. Použite jednu funkciu notify().
• Žiadosť o push povolenie pri načítaní stránky. Väčšina ľudí odmietne a druhú šancu nemusíte dostať.
• Žiadne predvoľby. Používatelia, ktorí nemôžu vypnúť rušivé upozornenia, vypnú všetky alebo odídu.
• Odosielanie z prehliadača. Kľúče pre e-mail a push patria na server.
• Nečistenie mŕtvych push predplatných. Expirované predplatné sa hromadia a plytvajú odoslaniami.
• Citlivé údaje v texte notifikácie. Zamknutá obrazovka ho zobrazí. „Máte novú správu“ je bezpečnejšie než samotná správa.
• Žiadny záznam o tom, čo sa odoslalo. Keď používateľ povie „e-mail som nedostal“, logy s ID správ od poskytovateľa vám pomôžu zistiť prečo.

Kontrolný zoznam

• Jedna serverová funkcia notify() používaná všade
• Tabuľka notifikácií so stavom prečítania a zvonček s počtom neprečítaných
• Predvoľby kanálov pre každý typ, rešpektované funkciou notify()
• E-mail odosielaný zo servera s overenou doménou; súhrn alebo zoskupovanie pri častých udalostiach
• Povolenie pre push sa pýta až po akcii používateľa, s vysvetlením
• Push otestovaný na počítači a na iPhone s aplikáciou pridanou na plochu
• Expirované push predplatné odstránené
• Žiadny citlivý obsah v náhľadoch push alebo e-mailov
• Plánované pripomienky majú spoľahlivý spúšťač

Notifikácie v Mythex

Mythex neobsahuje pre aplikácie, ktoré vytvárate, vstavanú službu e-mailov ani push, takže prinesiete vlastného poskytovateľa e-mailov a vygenerujete si vlastné push kľúče uložené ako tajomstvá projektu. Časť v aplikácii potrebuje len databázu projektu, ktorú Mythex pridá, keď si ju vyžiadate. Vytvárajte prompty ako vyššie, otestujte zvonček a e-maily v náhľade a push otestujte na publikovanej URL, lebo service workery a push potrebujú skutočnú adresu HTTPS. Recept v dokumentácii Odoslať e-mail z aplikácie obsahuje štartovací prompt. Mythex nedokumentuje plánované úlohy, takže časované pripomienky plánujte s externým spúšťačom, ako je popísané v článku ako spúšťať úlohy na pozadí.

Otázky