Vodiči

Kako dodati obavijesti u svoju aplikaciju: u aplikaciji, e-pošta i push

Da biste dodali obavijesti web aplikaciji, počnite s obavijestima u aplikaciji: tablicom obavijesti u bazi podataka i ikonom zvonca koja prikazuje nepročitane stavke. Dodajte e-poštu za stvari koje ljudi trebaju znati kada nisu u aplikaciji, koristeći pružatelja usluge e-pošte, a web push dodajte samo kada su pravovremena upozorenja važna, jer zahtijeva service worker, dopuštenje korisnika i, na iPhoneu, spremanje aplikacije na početni zaslon. Bez obzira na to koje kanale koristite, sve obavijesti stvarajte na jednom mjestu na poslužitelju i neka korisnici biraju što žele primati.

Ovaj vodič uspoređuje kanale, prikazuje jednostavnu arhitekturu i daje upute koje možete koristiti s AI alatom za izradu aplikacija.

Glavni kanali u usporedbi

KanalDoseže korisnike kadaTrud za postavljanjeTrošak radaNajbolje za
U aplikaciji (zvonce, kratke poruke)Koriste vašu aplikacijuNizakNišta osim vaše baze podatakaAktivnost, spominjanja, promjene statusa
E-poštaKada god provjere e-poštuSrednji: pružatelj, postavljanje domeneCijena po poruci kod pružateljaRačuni, sažeci, sve što je važno
Web pushPreglednik ili instalirana web aplikacija, čak i kada je zatvorenaSrednji do visokObično besplatno za slanjeUpozorenja osjetljiva na vrijeme
SMSGotovo uvijekSrednji; vrijede pravila o suglasnostiNaknade po poruciPodsjetnici za termine, hitna upozorenja
Alati za razgovor (Slack, Teams)Kada su na posluNizak do srednjiObično besplatnoInterni alati i timska upozorenja

Većini aplikacija treba obavijesti u aplikaciji i e-pošta. Push i SMS isplati se koristiti kada je vrijeme stvarno važno, poput podsjetnika na rezervaciju ili narudžbe koja je spremna.

Kako se sustav obavijesti slaže

Držite ga jednostavnim i središnjim:

  1. Nešto se dogodi. Objavi se komentar, plaćanje ne uspije, rezervacija je sutra.
  2. Vaš poslužitelj pozove jednu funkciju, primjerice notify(user, type, data).
  3. Ta funkcija provjeri korisničke postavke i upiše redak u tablicu notifications (za zvonce).
  4. Zatim šalje na druge kanale koje je korisnik uključio za tu vrstu: e-poštu preko vašeg pružatelja, push preko Push API-ja.
  5. Frontend prikazuje nepročitane obavijesti i označava ih pročitanima kada se otvore.

Jedna ulazna točka znači da možete dodati kanal, promijeniti tekst ili poštovati postavke bez traženja po cijelom kodu.

Što spremati

Tablica obavijesti obično treba: ID korisnika, vrstu (na primjer comment_reply), kratak naslov i tekst, poveznicu na relevantnu stranicu, vrijeme stvaranja i vrijeme čitanja. Zasebna tablica postavki pohranjuje koje kanale svaki korisnik želi za svaku vrstu.

Prikazivanje novih obavijesti

  • Učitavanje pri prikazu stranice i provjera svakih 30 do 60 sekundi. Jednostavno i pouzdano.
  • Ažuriranja u stvarnom vremenu pomoću WebSocketa ili server-sent events djeluju trenutno, ali dodaju pokretne dijelove. Počnite s provjerom ako trenutna ažuriranja nisu ključna.

E-pošta kao obavijest

E-pošta treba pružatelja za slanje i provjerenu domenu; detalji su u kako slati e-poštu iz aplikacije. Za obavijesti posebno:

  • Šaljite s poslužitelja, nikada s ključem pružatelja u pregledniku.
  • Grupirajte česte događaje. „3 nova komentara” u jednoj poruci bolje je od tri poruke.
  • Ponudite dnevni ili tjedni sažetak za aktivnosti niskog prioriteta.
  • Dodajte poveznicu za odjavu ili postavke u e-poruke koje nisu ključne. Pravila o marketinškoj e-pošti razlikuju se po državama; provjerite što se odnosi na vas.

Web push obavijesti

Web push omogućuje vašoj stranici da šalje upozorenja koja izgledaju kao obavijesti aplikacije. Prema MDN-ovoj dokumentaciji za Push API, radi ovako:

  1. Vaša stranica registrira service worker, skriptu koju preglednik može izvoditi u pozadini.
  2. Nakon što se korisnik složi, service worker se pretplaćuje preko PushManager.subscribe(). Preglednik vraća pretplatu s krajnjom točkom i ključevima za šifriranje.
  3. Vaš poslužitelj sprema tu pretplatu i, kada se nešto dogodi, šalje poruku na krajnju točku, obično potpisanu VAPID ključevima (par ključeva koji identificira vaš poslužitelj).
  4. Preglednik pokreće vaš service worker, koji prikazuje obavijest, čak i ako vaša stranica nije otvorena.

MDN također napominje da krajnju točku treba držati u tajnosti, jer je dovoljno da se zna za slanje poruka tom korisniku.

iPhone i iPad

WebKit je dodao Web Push za web aplikacije u iOS-u i iPadOS-u 16.4, uz dva uvjeta iz njegove najave: stranica mora biti dodana na početni zaslon, a dopuštenje se mora tražiti kao odgovor na korisnikovu radnju, primjerice dodir na gumb Pretplati se. Dakle, na iPhoneu push dopire samo do korisnika koji su instalirali vašu web aplikaciju. Pogledajte nativne aplikacije i progresivne web aplikacije za značenje instaliranja web aplikacije.

Dobro traženje dopuštenja

Nemojte pitati pri prvom posjetu. Najprije objasnite korist („Dobijte podsjetnik sat vremena prije nastave”), a zatim prikažite preglednikov upit kada korisnik klikne gumb. Ako netko odbije, preglednik vam možda neće dopustiti da pitate ponovno, pa preuranjen upit može zauvijek izgubiti tog korisnika.

Zakazane obavijesti trebaju okidač

„Podsjetnik 24 sata prije” ili „tjedni sažetak svakog ponedjeljka” trebaju nešto što se pokreće prema rasporedu. To je problem pozadinskih poslova, o kojem je riječ u kako pokrenuti pozadinske poslove. Čest obrazac: vanjski planer svakih nekoliko minuta poziva zaštićenu krajnju točku, a ta krajnja točka šalje sve što je na redu.

Upute za vaš AI alat za izradu

Počnite s obavijestima u aplikaciji:

Dodaj obavijesti u aplikaciji. Napravi tablicu notifications (korisnik, vrsta, naslov, tekst, poveznica, created_at, read_at). Dodaj funkciju na poslužitelju notify(userId, type, data) koju poziva svaka značajka. Prikaži ikonu zvonca u zaglavlju s brojem nepročitanih, padajući izbornik s posljednjih 20 i gumb „označi sve kao pročitano”. Provjeravaj nove svakih 60 sekundi.

Zatim postavke i e-poštu:

Dodaj postavke obavijesti: za svaku vrstu (odgovori na komentare, spominjanja, naplata) korisnik bira obavijest u aplikaciji, e-poštu, oboje ili ništa. notify() mora poštovati te postavke. Šalji e-poštu preko [PROVIDER] koristeći tajnu [ENV_NAME] samo na poslužitelju. Grupiraj e-poruke o komentarima tako da jedan korisnik dobije najviše jednu e-poruku svakih 15 minuta.

Zatim push, ako ga trebate:

Dodaj opcionalni web push. Registriraj service worker, generiraj VAPID ključeve i privatni ključ spremi kao tajnu. Dodaj gumb „Omogući obavijesti” u postavkama koji traži dopuštenje tek kada se klikne. Spremi svaku pretplatu po korisniku i uređaju, šalji push iz notify() kada se korisnik prijavio i obriši pretplate koje push servis prijavi kao istekle.

Česte greške

  • Obavijesti raspršene po kodu. Svaka značajka šalje svoju e-poštu na svoj način, a postavke se ignoriraju. Koristite jednu funkciju notify().
  • Traženje dopuštenja za push pri učitavanju stranice. Većina ljudi odbije, a možda nećete dobiti drugu priliku.
  • Nema postavki. Korisnici koji ne mogu isključiti dosadna upozorenja isključe sva ili odu.
  • Slanje iz preglednika. Ključevi za e-poštu i push pripadaju poslužitelju.
  • Nečišćenje mrtvih push pretplata. Istekle pretplate se gomilaju i troše slanja.
  • Osjetljivi podaci u tekstu obavijesti. Zaključani zasloni ih prikazuju. „Imate novu poruku” sigurnije je od same poruke.
  • Bez zapisa o tome što je poslano. Kada korisnik kaže „nisam dobio e-poštu”, zapisnici s ID-jevima poruka od pružatelja pomažu da saznate zašto.

Kontrolni popis

  • Jedna funkcija notify() na poslužitelju koja se koristi svuda
  • Tablica obavijesti sa stanjem čitanja i zvoncem s brojem nepročitanih
  • Postavke kanala po vrsti, koje poštuje notify()
  • E-pošta se šalje s poslužitelja s provjerenom domenom; sažetak ili grupiranje za česte događaje
  • Dopuštenje za push traži se tek nakon radnje korisnika, uz objašnjenje
  • Push testiran na računalu i na iPhoneu s aplikacijom dodanom na početni zaslon
  • Istekle push pretplate uklonjene
  • Nema osjetljivog sadržaja u pregledima push poruka i e-pošte
  • Zakazani podsjetnici imaju pouzdan okidač

Obavijesti na Mythexu

Mythex ne uključuje ugrađenu uslugu e-pošte ili push-a za aplikacije koje gradite, pa donosite vlastitog pružatelja e-pošte i sami generirate push ključeve, spremljene kao tajne projekta. Dio za obavijesti u aplikaciji treba samo bazu podataka projekta, koju Mythex dodaje kada to zatražite. Gradite pomoću uputa poput gornjih, testirajte zvonce i e-poštu u pregledu, a push testirajte na objavljenoj adresi, jer service workeri i push trebaju pravu HTTPS adresu. Recept u dokumentaciji Slanje e-pošte iz aplikacije ima početnu uputu. Mythex ne dokumentira zakazane poslove, pa planirajte vremenske podsjetnike s vanjskim okidačem, kako je opisano u kako pokrenuti pozadinske poslove.

Pitanja

Koja je najlakša vrsta obavijesti za dodati web aplikaciji?

Obavijesti u aplikaciji: tablica obavijesti u vašoj bazi podataka i ikona zvonca koja prikazuje nepročitane. Ne trebaju nikakvu uslugu treće strane. E-pošta je sljedeći korak i zahtijeva pružatelja usluge e-pošte.

Može li web aplikacija slati push obavijesti na iPhone?

Da, uz ograničenja. WebKit je dodao Web Push za web aplikacije na početnom zaslonu u iOS-u i iPadOS-u 16.4, pa korisnik mora prvo dodati vašu web aplikaciju na početni zaslon, a dopuštenje se mora tražiti nakon dodira, primjerice na gumbu Pretplati se.

Rade li push obavijesti kada je web stranica zatvorena?

Da. Push API isporučuje poruke service workeru vaše stranice, a preglednik ga pokrene kada poruka stigne, pa stranica ne mora biti otvorena. Korisnik mora prethodno dati dopuštenje.

Kako spriječiti da obavijesti iritiraju korisnike?

Obavještavajte samo o stvarima koje korisniku znače, grupirajte nalete u jednu poruku, neka ljudi u postavkama biraju kanale za svaku vrstu i traže dopuštenje za push tek nakon što vide zašto je korisno.

Mythex · Pricing · Izradite bilo što uz AI · Predlošci za web stranice i aplikacije · Mythex u usporedbi · Rječnik izrade aplikacija uz AI · Besplatni alati za izradu aplikacija uz AI · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)