Jak přidat do aplikace oznámení: v aplikaci, e-mailem a push

Pro přidání oznámení do webové aplikace začněte s oznámeními v aplikaci: tabulkou oznámení v databázi a ikonou zvonku, která ukazuje nepřečtené položky. Přidejte e-mail pro věci, které lidé potřebují vědět, když nejsou v aplikaci, a to přes poskytovatele e-mailů. Web push přidejte jen tam, kde záleží na včasných upozorněních, protože vyžaduje service worker, souhlas uživatele a na iPhonu také uložení aplikace na plochu. Ať používáte jakékoli kanály, vytvářejte každé oznámení na jednom místě na serveru a nechte uživatele vybrat, co chtějí dostávat.

Tento průvodce porovnává kanály, ukazuje jednoduchou architekturu a dává prompty, které můžete použít s nástrojem pro tvorbu aplikací s AI.

Hlavní kanály porovnány

Většina aplikací potřebuje oznámení v aplikaci a e-mail. Push a SMS stojí za to, když záleží na načasování, například připomínka rezervace nebo objednávka, která je připravená k vyzvednutí.

Jak systém oznámení funguje

Držte to jednoduché a centrální:

1. Něco se stane. Někdo napíše komentář, platba selže, rezervace je zítra.
2. Váš server zavolá jednu funkci, například notify(user, type, data).
3. Ta funkce zkontroluje nastavení uživatele a zapíše řádek do tabulky notifications (pro zvonek).
4. Pak odešle na další kanály, které uživatel pro daný typ zapnul: e-mail přes vašeho poskytovatele, push přes Push API.
5. Frontend zobrazí nepřečtená oznámení a označí je jako přečtená, když je uživatel otevře.

Jediný vstupní bod znamená, že můžete přidat kanál, změnit znění nebo respektovat nastavení, aniž byste prohledávali celý kód.

Co ukládat

Tabulka oznámení obvykle potřebuje: ID uživatele, typ (například comment_reply), krátký nadpis a text, odkaz na příslušnou stránku, čas vytvoření a čas přečtení. Samostatná tabulka nastavení ukládá, které kanály každý uživatel chce pro každý typ.

Zobrazování nových oznámení

• Načíst při zobrazení stránky a dotazovat se každých 30 až 60 sekund. Jednoduché a spolehlivé.
• Aktualizace v reálném čase přes WebSockets nebo server-sent events působí okamžitě, ale přidávají pohyblivé části. Začněte dotazováním, pokud okamžité aktualizace nejsou nutné.

E-mailová oznámení

E-mail potřebuje odesílatele a ověřenou doménu. Podrobnosti najdete v jak posílat e-maily z aplikace. Pro oznámení konkrétně:

• Odesílejte ze serveru, nikdy s klíčem poskytovatele v prohlížeči.
• Dávkujte události, které se hromadí. Jeden e-mail „3 nové komentáře“ je lepší než tři e-maily.
• Nabídněte denní nebo týdenní souhrn pro aktivitu s nízkou prioritou.
• Přidejte odkaz na odhlášení nebo nastavení do nepodstatných e-mailů. Pravidla pro marketingové e-maily se liší podle země, takže ověřte, co na vás platí.

Web push oznámení

Web push umožní vašemu webu posílat upozornění, která vypadají jako oznámení aplikace. Podle dokumentace MDN k Push API funguje takto:

1. Váš web zaregistruje service worker, skript, který může prohlížeč spouštět na pozadí.
2. Poté, co uživatel souhlasí, se service worker přihlásí přes PushManager.subscribe(). Prohlížeč vrátí odběr s koncovým bodem a šifrovacími klíči.
3. Váš server uloží tento odběr a když se něco stane, pošle zprávu na koncový bod, obvykle podepsanou klíči VAPID (párem klíčů, který identifikuje váš server).
4. Prohlížeč spustí service worker, který oznámení zobrazí, i když vaše stránka není otevřená.

MDN také upozorňuje, že koncový bod by měl zůstat tajný, protože jeho znalost stačí k odeslání zpráv tomuto uživateli.

iPhone a iPad

WebKit přidal Web Push pro webové aplikace v iOS a iPadOS 16.4 se dvěma podmínkami ze svého oznámení: web musí být přidán na plochu a oprávnění se musí vyžádat jako reakce na akci uživatele, například klepnutím na tlačítko Odebírat. Na iPhonu se tedy push dostane jen k uživatelům, kteří si vaši webovou aplikaci nainstalovali. Co instalace webové aplikace znamená, vysvětluje nativní aplikace a progresivní webové aplikace.

Jak správně žádat o oprávnění

Nežádejte o něj při první návštěvě. Nejdřív vysvětlete přínos, třeba „Dostaňte připomínku hodinu před lekcí“, a teprve potom ukažte výzvu prohlížeče, až uživatel klepne na tlačítko. Pokud někdo odmítne, prohlížeč vám nemusí dovolit zeptat se znovu, takže předčasná výzva může člověka ztratit navždy.

Plánovaná oznámení potřebují spouštěč

„Připomínka 24 hodin předem“ nebo „týdenní souhrn každé pondělí“ potřebují něco, co poběží podle plánu. To je úloha na pozadí, které se věnuje jak spouštět úlohy na pozadí. Běžný vzor: externí plánovač volá chráněný koncový bod každých několik minut a ten odešle všechno, co je na řadě.

Prompty pro váš nástroj s AI

Začněte oznámeními v aplikaci:

Přidej oznámení v aplikaci. Vytvoř tabulku notifications (user, type, title, body, link, created_at, read_at). Přidej serverovou funkci notify(userId, type, data), kterou bude volat každá funkce. V záhlaví zobraz ikonu zvonku s počtem nepřečtených, rozbalovací seznam posledních 20 oznámení a tlačítko „Označit vše jako přečtené“. Každých 60 sekund se dotazuj na nová.

Pak nastavení a e-mail:

Přidej nastavení oznámení: u každého typu (odpovědi na komentáře, zmínky, fakturace) může uživatel zvolit v aplikaci, e-mail, obojí nebo nic. notify() musí tato nastavení respektovat. Posílej e-maily přes [PROVIDER] s tajným klíčem [ENV_NAME] pouze na serveru. Seskup e-maily o komentářích tak, aby jeden uživatel dostal nejvýš jeden e-mail za 15 minut.

Nakonec push, pokud ho potřebujete:

Přidej volitelné web push. Zaregistruj service worker, vygeneruj klíče VAPID a privátní klíč ulož jako tajný údaj. V nastavení přidej tlačítko „Zapnout oznámení“, které požádá o oprávnění až po kliknutí. Ulož každý odběr pro uživatele a zařízení, posílej push z notify(), když uživatel souhlasil, a smaž odběry, které push služba označí jako prošlé.

Časté chyby

• Oznámení rozházená po kódu. Každá funkce posílá e-maily po svém a nastavení se ignorují. Použijte jednu funkci notify().
• Žádost o oprávnění k push při načtení stránky. Většina lidí odmítne a druhou šanci nemusíte dostat.
• Žádná nastavení. Uživatelé, kteří nemohou vypnout rušivá upozornění, vypnou všechna, nebo odejdou.
• Odesílání z prohlížeče. Klíče pro e-mail a push patří na server.
• Nečištění mrtvých push odběrů. Prošlé odběry se hromadí a plýtvají odesíláním.
• Citlivé údaje v textu oznámení. Zamykací obrazovky je zobrazují. Text „Máte novou zprávu“ je bezpečnější než obsah zprávy.
• Žádný záznam o odeslaných zprávách. Když uživatel řekne „e-mail jsem nedostal“, pomohou logy s ID zpráv od poskytovatele.

Kontrolní seznam

• Jedna funkce notify() na serveru, použitá všude
• Tabulka oznámení se stavem přečtení a zvonek s počtem nepřečtených
• Nastavení kanálů podle typu, respektované funkcí notify()
• E-mail odesílaný ze serveru s ověřenou doménou; souhrn nebo seskupení u častých událostí
• Oprávnění k push se žádá až po akci uživatele, s vysvětlením
• Push otestován na počítači i na iPhonu s aplikací přidanou na plochu
• Prošlé push odběry odstraněny
• V náhledech push a e-mailů žádný citlivý obsah
• Plánované připomínky mají spolehlivý spouštěč

Oznámení v Mythexu

Mythex neobsahuje vestavěnou e-mailovou ani push službu pro aplikace, které vytvoříte. Přinesete si tedy vlastního poskytovatele e-mailů a vygenerujete si vlastní push klíče, uložené jako tajné údaje projektu. Část v aplikaci potřebuje jen databázi projektu, kterou Mythex přidá, když o ni požádáte. Stavte pomocí promptů výše, zvonek a e-maily otestujte v Preview a push otestujte na publikované adrese URL, protože service workery a push potřebují skutečnou adresu HTTPS. Recept Odeslání e-mailu z aplikace v dokumentaci obsahuje výchozí prompt. Mythex plánované úlohy v dokumentaci nepopisuje, takže plánované připomínky řešte externím spouštěčem, jak je popsáno v jak spouštět úlohy na pozadí.

Otázky