Muy buenas, me llamo Luis y esta vez les traigo otro nuevo tutorial.
Índice
Las notificaciones push tienen una reputación terrible, pero si se hacen bien pueden brindar a sus usuarios una experiencia positiva
Usted sabe lo que es cuando va a un sitio web, entonces, antes de poder hacer algo, debe reconocer la solicitud de notificación automática. ¿Odias eso? Sí yo también.
Esa es solo una de las muchas formas en que es fácil molestar a sus usuarios con notificaciones automáticas, este artículo tratará de detallar algunas formas de hacerlo mejor.
Fallar incluso antes de comenzar
Notificaciones push en la web son una de las API más difamadas de la Web y esta es una de las razones. Es posible dar una mala impresión incluso antes de enviar una sola notificación.
Al igual que no pedirías mudarte con alguien en la primera cita, no pidas enviar notificaciones en la primera interacción del usuario.
Suponga que sus usuarios no quieren notificaciones automáticas. Demuestre el valor de su aplicación web con información de alta calidad y una experiencia de usuario agradable. Haga que los usuarios deseen recibir notificaciones automáticas antes de que usted les solicite; la mejor manera de hacerlo es tener una casilla de verificación para habilitar las notificaciones automáticas en contexto.
Esto deja en claro no solo para qué es la solicitud de notificación de inserción, sino también cómo pueden desactivarlas cuando no las desean.
En esta aplicación de ejemplo, los usuarios pueden activar notificaciones para canales de información particulares con la casilla de verificación «notificarme sobre actualizaciones»:
Si marcan la casilla de verificación, llamaremos pushManager.subscribe()
que le pedirá al usuario que habilite las notificaciones. Es más probable que los usuarios habiliten las notificaciones automáticas porque eligen que se les solicite mediante su propia intuición.
En algunos navegadores, los banners de instalación de aplicaciones aparecen de forma similar a las solicitudes de notificación mal hechas. No es una respuesta a una acción del usuario y no están relacionados con el contenido de su aplicación y no forman parte de la interfaz de usuario de su aplicación.
Es posible integrar esto en la interfaz de su aplicación, permitiéndole ocultar este banner y permitiéndole proporcionar su propio botón de instalación.
Haz esto en el beforeInstallPrompt
evento:
window.addEventListener('beforeinstallprompt', handleInstallPrompt);
Puede utilizar este evento para integrar un botón de instalación de la aplicación en su aplicación. Si obtiene este evento, puede mostrar el botón que permite instalar el contenido. En la imagen de abajo, puse una burbuja sutil en la parte inferior de la página de inicio para instalarla. Es fácil de encontrar y acceder, pero no interferirá en la experiencia de la aplicación del usuario.
El usuario paga el costo de la notificación, no sea costoso
El usuario no paga en dinero pero sí en atención.
Cada notificación es un peso en la mente del usuario. Una notificación a un usuario cuando su atención está en su límite podría ser la motivación que el usuario necesita para bloquear todas las notificaciones de todo el navegador web.
Cada notificación debe traer alegría al usuario. ¿Cómo traes alegría?
- Ser oportuno
Si pudo haber proporcionado esta información antes o pudo mostrarla más tarde, ¿por qué molestarse en interrumpir al usuario en este momento?
Notificación incorrecta: «¿Sabías que puedes enviar dinero con nuestra aplicación?»
Buena notificación: ‘Alice te ha enviado $ 20’
- Sé eficiente
Abrir una aplicación o una página web es comparativamente lento, puede tomar unos segundos, lo que es mucho tiempo para alguien que está ocupado cocinando la cena o viendo Netflix o en el trabajo.
Si puede poner toda la información en la notificación sin que ellos abran la aplicación, hágalo. Si toda la respuesta que necesita es una simple pregunta Opción-A / Opción-B como sí / no, agregue esos botones.
Cuando el usuario presiona el botón, actualice la notificación para reconocer el botón presionar pero no abras la aplicación.
Eva ha solicitado $ 15
[Send Now] [Decline]
- Ser claro
Hay muchas opciones para cambiar la apariencia de la notificación, use tantas como sea posible para dejar en claro de dónde es la aplicación, de qué se trata y qué acción se espera del usuario.
Utilice la insignia y el icono del icono de su aplicación. Use el título para dar un resumen de la acción que el usuario debe tomar, use el cuerpo y la imagen para brindar información y contexto relevantes.
La siguiente sección describe cómo personalizar su notificación.
- NO PIERDA EL TIEMPO DEL USUARIO
No publique anuncios, no los use para suplicar a los usuarios que regresen, no envíe notificaciones aburridas para recordarle al usuario que existe su aplicación web.
Sé que es tentador y tienes cuotas que cumplir, pero solo tendrá un efecto adverso en la forma en que el usuario ve tu aplicación y las notificaciones como un todo. Es probable que al usuario no le guste tu aplicación tanto como a ti y será mucho menos indulgente.
Notificaciones push totalmente personalizadas
Aquí hay una notificación de ejemplo donde se ha configurado tanto como sea posible:
{ body: "Awkward Zombie - Disagree to Agree", icon: "/icons/appicon.png", image: "https://example.com/previewimage.jpg", badge: "data:image/png;base64,iVBORw0KGgoAAA...", vibrate: [100, 50, 100], data: data, tag: data.url, actions: [ { action: "Read now", title: "Open" }, { action: "close", title: "Close" }, ], };self.registration.showNotification(title, options);
Si los activos tardan demasiado en cargarse, se ignoran. El icono más importante es el badge
icono ya que es el que se pone en estado. También es muy pequeño, por lo que es ideal para codificarlo en URL y se mantiene constante en el archivo Service Worker para garantizar que se cargue de manera confiable.
Para el icon
Usamos el ícono de la aplicación para que quede más claro de dónde proviene la notificación. Este es un PNG cargado localmente para asegurarse de que se cargue rápidamente.
los image
se carga desde el sitio de terceros el se carga desde la fuente RSS no es necesario que se almacene localmente, está bien que sean de otro lugar. Agrega un buen contexto, pero no es esencial, por lo que si no se carga a tiempo, no es un problema absoluto.
Estos ejemplos de botones de acción que he hecho aquí probablemente no sean totalmente necesarios, ya que las notificaciones se pueden cerrar por otros medios y solo podemos escuchar los clics de notificación. Mejores ejemplos serían algo como «Abrir» y «Recordarme más tarde», por defecto en «Abrir» si no se hace clic en ninguno de los botones.
Combinando notificaciones
No puede garantizar que un usuario revise su dispositivo entre notificaciones. Las notificaciones nuevas de forma predeterminada no reemplazan a las antiguas, por lo que esto puede resultar en una avalancha abrumadora de notificaciones si llegan en una sucesión corta.
Si configura el tag
propiedad luego notificaciones que comparten lo mismo tag
se pueden sobrescribir entre sí. En este ejemplo, la etiqueta se establece en la URL de la fuente RSS, de modo que las notificaciones de la misma fuente RSS se sobrescriben entre sí.
Esto es mejor ya que no nos inundamos, pero ahora, si llega una segunda notificación, perdemos la primera. Probablemente sea una buena idea verificar si está reemplazando una notificación y si las está concatenando.
const existingNotifications = await self.registration.getNotifications({ tag: data.url, });if (existingNotifications.length) { const oldNotification = existingNotifications[0]; options.body = oldNotification.body + 'n' + options.body; }
Hay una cantidad limitada de texto que puede caber en el cuerpo de una notificación. Una solución alternativa sería reemplazar la notificación con una que solo diga ‘Tiene N notificaciones’ y luego, cuando el usuario la toque, abra la interfaz de notificación de su aplicación web.
Actualización de notificaciones
Esta también puede ser una buena forma de actualizar al usuario en las interfaces de solo notificación. Una vez que hayan hecho clic en la notificación para realizar una acción, la solicitud al servidor para realizar esa acción. Una vez que se complete la solicitud, muestre una nueva notificación reconociendo su finalización.
self.addEventListener("notificationclick", async function (e) { const notification = e.notification; const action = e.action;if (action === "close") { notification.close(); } if (action === "respond") { // close the old notification notification.close(); const response = await fetch('/api/respond.json') .then(r => r.json()); // Let the user know if it succeeded or not if (response.ok) { self.registration.showNotification("Success", options); } else { self.registration.showNotification(response.error, options); } } });
Al hacer que el usuario interactúe solo a través de notificaciones push, el usuario puede completar su tarea y tener una interacción positiva con su aplicación sin necesidad de dedicar mucha energía mental a ella, brindando una experiencia positiva.
Juntos podemos utilizar las notificaciones automáticas para enriquecer la vida de las personas y hacer que los usuarios tengan una asociación positiva con las notificaciones automáticas.
Gracias por leer.
Añadir comentario