Så lägger du till notiser i din app: i appen, e-post och push

För att lägga till notiser i en webbapp börjar du med notiser i appen: en notistabell i din databas och en klockikon som visar olästa poster. Lägg till e-post för saker folk behöver veta när de är borta, med en e-postleverantör, och lägg bara till webbpush när tidsenliga larm är viktiga, eftersom det kräver en service worker, användarens behörighet och, på iPhone, att appen sparats på startskärmen. Oavsett vilka kanaler du använder skapar du varje notis på ett ställe på servern och låter användarna välja vad de vill ta emot.

Den här guiden jämför kanalerna, visar en enkel arkitektur och ger prompter du kan använda med en AI-appbyggare.

De viktigaste kanalerna jämförda

De flesta appar behöver notiser i appen plus e-post. Push och SMS är värt det när tajmingen verkligen spelar roll, som en påminnelse om en bokning eller en order som är klar.

Så hänger ett notissystem ihop

Håll det enkelt och centralt:

1. Något händer. En kommentar skrivs, en betalning misslyckas, en bokning är i morgon.
2. Din server anropar en funktion, till exempel notify(user, type, data).
3. Funktionen kontrollerar användarens inställningar och skriver en rad i tabellen notifications (för klockan).
4. Den skickar sedan till andra kanaler som användaren har slagit på för den typen: e-post via din leverantör, push via Push API.
5. Gränssnittet visar olästa notiser och markerar dem som lästa när de öppnas.

En enda ingångspunkt gör att du kan lägga till en kanal, ändra formuleringar eller respektera inställningar utan att leta igenom kodbasen.

Vad som ska lagras

En notistabell behöver vanligtvis: användar-ID, typ (till exempel comment_reply), en kort titel och brödtext, en länk till relevant sida, skapad tid och läst tid. En separat inställningstabell lagrar vilka kanaler varje användare vill ha för varje typ.

Visa nya notiser

• Ladda vid sidvisning och polla var 30–60 sekund. Enkelt och pålitligt.
• Uppdateringar i realtid med WebSockets eller server-sent events känns omedelbara men lägger till rörliga delar. Börja med polling om inte omedelbara uppdateringar är viktiga.

E-postnotiser

E-post kräver en sändningsleverantör och en verifierad domän; detaljerna finns i så skickar du e-post från din app. För notiser specifikt:

• Skicka från servern, aldrig med en leverantörsnyckel i webbläsaren.
• Batcha frekventa händelser. "3 nya kommentarer" i ett mejl slår tre mejl.
• Erbjud en daglig eller veckovis sammanfattning för aktivitet med låg prioritet.
• Inkludera en länk för avregistrering eller inställningar i icke-nödvändig e-post. Reglerna för marknadsföringsmejl skiljer sig mellan länder; kontrollera vad som gäller för dig.

Webbpushnotiser

Webbpush låter din webbplats skicka larm som ser ut som appnotiser. Enligt MDN:s dokumentation för Push API fungerar det så här:

1. Din webbplats registrerar en service worker, ett skript som webbläsaren kan köra i bakgrunden.
2. När användaren har godkänt prenumererar service workern via PushManager.subscribe(). Webbläsaren returnerar en prenumeration med en slutpunkt och krypteringsnycklar.
3. Din server sparar prenumerationen och skickar, när något händer, ett meddelande till slutpunkten, oftast signerat med VAPID-nycklar (ett nyckelpar som identifierar din server).
4. Webbläsaren startar din service worker, som visar notisen även om din sida inte är öppen.

MDN påpekar också att slutpunkten bör hållas hemlig, eftersom det räcker att känna till den för att skicka meddelanden till användaren.

iPhone och iPad

WebKit lade till webbpush för webbappar i iOS och iPadOS 16.4, med två villkor enligt deras tillkännagivande: webbplatsen måste vara tillagd på startskärmen, och behörighet måste begäras som svar på en användaråtgärd, till exempel ett tryck på en knapp för att prenumerera. På iPhone når push alltså bara användare som har installerat din webbapp. Se native-appar kontra progressiva webbappar för vad det innebär att installera en webbapp.

Att be om behörighet på rätt sätt

Fråga inte vid första besöket. Förklara nyttan först ("Få en påminnelse en timme före din lektion") och visa sedan webbläsarens fråga när användaren trycker på en knapp. Om någon nekar kan webbläsaren hindra dig från att fråga igen, så en för tidig fråga kan förlora dem för alltid.

Schemalagda notiser behöver en utlösare

"Påminnelse 24 timmar före" eller "veckosammanfattning varje måndag" behöver något som körs enligt schema. Det är ett problem med bakgrundsjobb, som beskrivs i så kör du bakgrundsjobb. Ett vanligt mönster: en extern schemaläggare anropar en skyddad slutpunkt var några minut, och slutpunkten skickar det som är på tur.

Prompter till din AI-byggare

Börja med notiser i appen:

Lägg till notiser i appen. Skapa en tabell notifications (user, type, title, body, link, created_at, read_at). Lägg till en serverfunktion notify(userId, type, data) som varje funktion anropar. Visa en klockikon i sidhuvudet med antal olästa, en nedrullningsbar lista med de senaste 20 och en knapp "markera alla som lästa". Hämta nya var 60:e sekund.

Sedan inställningar och e-post:

Lägg till notisinställningar: för varje typ (svar på kommentarer, omnämnanden, fakturering) låter användaren välja i appen, e-post, båda eller ingen. notify() måste respektera dessa. Skicka e-post via [LEVERANTÖR] med hemligheten [ENV_NAME] enbart på servern. Gruppera e-post om kommentarer så att en användare får högst ett mejl var 15:e minut.

Sedan push, om du behöver det:

Lägg till valfri webbpush. Registrera en service worker, generera VAPID-nycklar och spara den privata nyckeln som en hemlighet. Lägg till en knapp "Aktivera notiser" i inställningarna som först frågar om behörighet när den klickas. Spara varje prenumeration per användare och enhet, skicka push från notify() när användaren har valt det, och ta bort prenumerationer som push-tjänsten rapporterar som utgångna.

Vanliga misstag

• Notiser utspridda i koden. Varje funktion skickar sitt eget mejl på sitt sätt, och inställningarna ignoreras. Använd en enda notify()-funktion.
• Att be om pushbehörighet vid sidladdning. De flesta nekar, och du kanske inte får en ny chans.
• Inga inställningar. Användare som inte kan stänga av störande larm stänger av alla, eller lämnar.
• Att skicka från webbläsaren. Nycklar för e-post och push hör hemma på servern.
• Att inte rensa döda pushprenumerationer. Utgångna prenumerationer samlas och slösar på utskick.
• Känslig information i notistexten. Låsskärmar visar den. "Du har ett nytt meddelande" är säkrare än själva meddelandet.
• Ingen logg över vad som skickats. När en användare säger "jag fick aldrig mejlet" hjälper loggar med leverantörens meddelande-ID dig att ta reda på varför.

Checklista

• En serverfunktion notify() används överallt
• Notistabell med lässtatus, och en klocka med antal olästa
• Kanalinställningar per typ, respekterade av notify()
• E-post skickas från servern med verifierad domän; sammanfattning eller gruppering för frekventa händelser
• Pushbehörighet begärs först efter en användaråtgärd, med en förklaring
• Push testad på dator och på en iPhone med appen tillagd på startskärmen
• Utgångna pushprenumerationer tas bort
• Inget känsligt innehåll i förhandsvisningar av push eller e-post
• Schemalagda påminnelser har en pålitlig utlösare

Notiser i Mythex

Mythex inkluderar inte en inbyggd e-post- eller pushtjänst för de appar du bygger, så du tar med din egen e-postleverantör och genererar dina egna pushnycklar, sparade som projekthemligheter. Delen i appen behöver bara projektets databas, som Mythex lägger till när du ber om det. Bygg med prompter som de ovan, testa klockan och e-posten i förhandsgranskningen och testa push på din publicerade URL, eftersom service workers och push kräver en riktig HTTPS-adress. Dokumentationsreceptet Skicka e-post från din app har en startprompt. Mythex dokumenterar inte schemalagda jobb, så planera tidsstyrda påminnelser med en extern utlösare som beskrivs i så kör du bakgrundsjobb.

Frågor