Com afegir notificacions a la teva app: dins de l'app, correu i push

Per afegir notificacions a una web app, comença per les notificacions dins de l'app: una taula de notificacions a la base de dades i una icona de campana que mostra els elements no llegits. Afegeix el correu per a les coses que la gent necessita saber quan no és a l'app, fent servir un proveïdor de correu, i afegeix el push web només quan les alertes puntuals siguin importants, ja que necessita un service worker, el permís de l'usuari i, a l'iPhone, que l'app estigui desada a la pantalla d'inici. Sigui quins siguin els canals que facis servir, crea cada notificació en un sol lloc al servidor i deixa que els usuaris triin què volen rebre.

Aquesta guia compara els canals, mostra una arquitectura senzilla i dona indicacions que pots fer servir amb un constructor d'apps amb IA.

Els canals principals comparats

La majoria d'apps necessiten la de dins de l'app més el correu. El push i l'SMS valen la pena quan el moment importa de veritat, com un recordatori de reserva o una comanda que ja està preparada.

Com encaixa un sistema de notificacions

Mantén-ho senzill i centralitzat:

1. Passa alguna cosa. Es publica un comentari, falla un pagament, una cita és demà.
2. El teu servidor crida una sola funció, com notify(user, type, data).
3. Aquesta funció comprova les preferències de l'usuari i escriu una fila a la taula notifications (per a la campana).
4. Després envia als altres canals que l'usuari hagi activat per a aquell tipus: el correu a través del teu proveïdor, el push a través de l'API Push.
5. El frontend mostra les notificacions no llegides i les marca com a llegides quan s'obren.

Un sol punt d'entrada vol dir que pots afegir un canal, canviar el text o respectar les preferències sense buscar pel codi.

Què cal emmagatzemar

Una taula de notificacions normalment necessita: l'ID de l'usuari, el tipus (per exemple comment_reply), un títol i un cos curts, un enllaç a la pàgina rellevant, l'hora de creació i l'hora de lectura. Una taula de preferències separada guarda quins canals vol cada usuari per a cada tipus.

Mostrar les notificacions noves

• Carregar en veure la pàgina i fer sondeig cada 30–60 segons. Senzill i fiable.
• Actualitzacions en temps real amb WebSockets o esdeveniments enviats pel servidor se senten instantànies, però afegeixen més peces mòbils. Comença amb el sondeig, tret que les actualitzacions instantànies siguin importants.

Notificacions per correu

El correu necessita un proveïdor d'enviament i un domini verificat; els detalls són a com enviar correus des de la teva app. Per a les notificacions en concret:

• Envia des del servidor, mai amb una clau del proveïdor al navegador.
• Agrupa els esdeveniments massius. «3 comentaris nous» en un sol correu és millor que tres correus.
• Ofereix un resum diari o setmanal per a l'activitat de baixa prioritat.
• Inclou un enllaç per donar-se de baixa o de preferències en els correus no essencials. Les regles sobre el correu de màrqueting varien segons el país; comprova què et serveix a tu.

Notificacions push web

El push web permet que el teu lloc enviï alertes que apareixen com les notificacions d'una app. Segons la documentació de l'API Push de MDN, funciona així:

1. El teu lloc registra un service worker, un script que el navegador pot executar en segon pla.
2. Quan l'usuari accepta, el service worker es subscriu a través de PushManager.subscribe(). El navegador retorna una subscripció amb un endpoint i les claus de xifratge.
3. El teu servidor guarda aquesta subscripció i, quan passa alguna cosa, envia un missatge a l'endpoint, normalment signat amb claus VAPID (un parell de claus que identifica el teu servidor).
4. El navegador activa el teu service worker, que mostra la notificació, encara que la teva pàgina no sigui oberta.

MDN també indica que l'endpoint s'ha de mantenir en secret, perquè conèixer-lo n'hi ha prou per enviar missatges a aquest usuari.

iPhone i iPad

WebKit va afegir Web Push per a les web apps a iOS i iPadOS 16.4, amb dues condicions segons el seu anunci: el lloc s'ha d'afegir a la pantalla d'inici, i el permís s'ha de demanar en resposta a una acció de l'usuari, com tocar un botó de Subscriure's. Així que a l'iPhone, el push només arriba als usuaris que han instal·lat la teva web app. Consulta apps natives vs. aplicacions web progressives per saber què vol dir instal·lar una web app.

Demanar el permís com cal

No ho demanis en la primera visita. Explica primer el benefici («Rep un recordatori una hora abans de la teva classe») i després mostra el quadre del navegador quan l'usuari toca un botó. Si algú el rebutja, el navegador potser no et deixa tornar a demanar-ho, així que una petició prematura pot fer-te perdre aquella persona per sempre.

Les notificacions programades necessiten un disparador

«Recordatori 24 hores abans» o «resum setmanal cada dilluns» necessiten alguna cosa que s'executi segons un calendari. Això és un problema de tasques en segon pla, que es tracta a com executar tasques en segon pla. Un patró habitual: un planificador extern crida un endpoint protegit cada pocs minuts, i aquest endpoint envia el que toca.

Indicacions per al teu constructor d'IA

Comença amb les de dins de l'app:

Afegeix notificacions dins de l'app. Crea una taula de notificacions (usuari, tipus, títol, cos, enllaç, created_at, read_at). Afegeix una funció de servidor notify(userId, type, data) que cridi cada funcionalitat. Mostra una icona de campana a la capçalera amb un comptador de no llegides, un desplegable amb les 20 més recents i un botó de «marca-ho tot com a llegit». Fes sondeig per a les noves cada 60 segons.

Després, preferències i correu:

Afegeix la configuració de notificacions: per a cada tipus (respostes a comentaris, mencions, facturació), deixa que l'usuari triï dins de l'app, correu, els dos o cap. notify() ha de respectar-ho. Envia correus a través de [PROVEÏDOR] fent servir el secret [ENV_NAME] només al servidor. Agrupa els correus de comentaris perquè un usuari rebi com a màxim un correu cada 15 minuts.

Després, push, si el necessites:

Afegeix push web opcional. Registra un service worker, genera claus VAPID i guarda la clau privada com a secret. Afegeix un botó «Activa les notificacions» a la configuració que demani el permís només quan es faci clic. Guarda cada subscripció per usuari i dispositiu, envia els push des de notify() quan l'usuari hi hagi optat, i elimina les subscripcions que el servei de push indiqui com a caducades.

Errors habituals

• Notificacions dispersades pel codi. Cada funcionalitat envia el seu correu de manera diferent, i les preferències s'ignoren. Fes servir una sola funció notify().
• Demanar el permís de push en carregar la pàgina. La majoria de la gent ho rebutja, i potser no tindràs una altra oportunitat.
• Sense preferències. Els usuaris que no poden desactivar les alertes molestes les desactiven totes, o se'n van.
• Enviar des del navegador. Les claus de correu i de push pertanyen al servidor.
• No netejar les subscripcions de push caducades. S'acumulen i malgasten enviaments.
• Detalls sensibles al text de la notificació. Les pantalles de bloqueig el mostren. «Tens un missatge nou» és més segur que el missatge en si.
• Cap registre del que s'ha enviat. Quan un usuari diu «no m'ha arribat el correu», els registres amb els IDs de missatge del proveïdor t'ajuden a saber-ne la causa.

Llista de comprovació

• Una funció notify() al servidor, usada a tot arreu
• Taula de notificacions amb estat de lectura, i una campana amb un comptador de no llegides
• Preferències de canal per tipus, respectades per notify()
• Correu enviat des del servidor amb un domini verificat; resum o agrupació per als esdeveniments massius
• Permís de push demanat només després d'una acció de l'usuari, amb una explicació
• Push provat a l'escriptori i en un iPhone amb l'app afegida a la pantalla d'inici
• Subscripcions de push caducades eliminades
• Cap contingut sensible a les previsualitzacions de push o de correu
• Els recordatoris programats tenen un disparador fiable

Notificacions a Mythex

Mythex no inclou un servei de correu ni de push integrat per a les apps que construeixes, així que portes el teu propi proveïdor de correu i generes les teves pròpies claus de push, guardades com a secrets del projecte. La part dins de l'app només necessita la base de dades del projecte, que Mythex afegeix quan la demanes. Construeix amb indicacions com les de dalt, prova la campana i els correus a la Vista prèvia, i prova el push a la teva URL publicada, ja que els service workers i el push necessiten una adreça HTTPS real. La recepta de la documentació Envia correus des de la teva app té una indicació inicial. Mythex no documenta les tasques programades, així que planifica els recordatoris amb hora fixa amb un disparador extern, tal com s'explica a com executar tasques en segon pla.

Preguntes