Notificaciones Push Web Bien Hechas

Hola, queridos desarrolladores. Hablemos de las notificaciones push web. En esta breve sesión, compartiré algunos consejos y trucos sobre cómo utilizar esta API extremadamente poderosa para bien. Mi nombre es Maxim Salnikov, vivo y trabajo en Oslo, Noruega, trabajo en el compromiso de desarrolladores en Microsoft, y soy un gran, gran fanático de las comunidades de desarrolladores.

Organizo algunos meetups, conferencias, y a menudo me encuentras presentando sobre tecnologías web y en las etapas de meetups y conferencias. ¿Y saben qué, amigos? Permanezcamos en esta diapositiva durante un par de minutos más porque usando este conjunto de información piezas, quiero explicar o recordarles qué es una notificación push web.

En primer lugar, finjamos que esta es una notificación que llegó a nuestro dispositivo o al dispositivo de nuestro usuario, y tiene un título. En realidad, este es el único componente requerido de un objeto de notificación de la API de notificaciones, pero definitivamente quieres usar más componentes, como un cuerpo. Este es el texto principal de la notificación. Además, muchas plataformas admiten componentes gráficos relativamente pequeños, al menos según la especificación, llamados iconos que normalmente se colocan cerca del título y el cuerpo. Luego, acciones. Todas las plataformas admiten al menos acciones genéricas cuando los usuarios hacen clic o tocan la notificación burbuja, y algunas plataformas admiten incluso múltiples conjuntos de acciones, donde proporcionamos el nombre, icono y qué hacer. Escribes el código tú mismo, por supuesto. Algunas plataformas admiten un componente gráfico más grande llamado Imagen en la API de Notificación. Estas son piezas de información que enviamos como desarrolladores o propietarios de negocios. Además, hay algunos componentes proporcionados por el sistema o el sistema operativo en sí, porque queremos que los usuarios sepan de dónde proviene esta notificación y tal vez puedan tomar algunas acciones adicionales acciones. En primer lugar, hablamos de las notificaciones push web. Es por eso que siempre hay un icono del navegador donde se ejecutaba la aplicación. Además, hay un origen de donde proviene esta notificación, y un conjunto de, digamos, acciones adicionales acciones, ya sea como un elemento de menú o un elemento de tres puntos expandido a algunas acciones adicionales. Es para que los usuarios reaccionen de alguna manera, por ejemplo, a notificaciones no deseadas. Pueden bloquear al remitente, al navegador o las notificaciones en general. Eso realmente depende de una plataforma en particular, este conjunto de características. Esta es la anatomía de las notificaciones push web, si lo desean.

Luego, permítanme proporcionar algunas motivaciones. Por qué utilizar las notificaciones push web es una forma realmente agradable de llegar a sus usuarios. En primer lugar, en comparación con todas las demás formas en las que podemos organizar la comunicación entre nosotros, como desarrolladores o propietarios de negocios, y los usuarios de nuestra aplicación web, las notificaciones push tienen un ventaja muy importante. Funciona independientemente del estado de la aplicación. Entonces, una vez suscritos, los usuarios pueden cerrar la aplicación, la pestaña de la aplicación, pueden cerrar el navegador, la notificación llegará de todos modos. Por supuesto, esto se debe a que los navegadores modernos siempre tienen algún componente de servicio en segundo plano que siempre está en servicio. Así es como funciona todo esto.

En comparación con las formas antiguas, conservadoras o tradicionales de llegar a nuestros usuarios, por ejemplo, las notificaciones push tienen tasas de aceptación y clics mucho más altas en comparación con otras formas tradicionales de llegar a los usuarios, como, por ejemplo, los SMS, es mucho más barato. Y en realidad, dado que el canal de entrega es completamente gratuito, ni siquiera podemos decir cuántas veces más barato es porque no podemos dividir entre cero, ¿verdad?

Luego, espero que mi diapositiva anterior te haya convencido de que el formato en sí mismo es bastante rico en diferentes formas de expresar lo que queremos transmitir al usuario. Y después de todo, al menos es relativamente fácil configurarlo todo y puedes comenzar a enviar mensajes de inmediato. Por supuesto, después de que tus usuarios se hayan suscrito. Y por último, pero no menos importante, este es otro punto de motivación. Después de la llegada de iOS 16.4 y la última versión de macOS, ahora tenemos el 80% de los usuarios de Internet que técnicamente pueden recibir notificaciones push web. Creo que este es un número muy impresionante.

Ahora, algunos consejos y trucos. En primer lugar, las notificaciones push web como flujo constan de dos partes separadas. La suscripción y luego el envío de la notificación en sí. Hablemos de la suscripción. La cortesía es imprescindible en este caso. Todos los navegadores modernos son extremadamente protectores en ese sentido. No quieren molestar o molestar a los usuarios con notificaciones no deseadas, ni siquiera solicitudes para suscribirse a notificaciones o permitir mostrar notificaciones. Es por eso que puede sonar extraño viniendo de mí, como embajador de la API de notificaciones push web. Pero queridos desarrolladores, consideren diferentes alternativas.

Primero, piensen literalmente en la API de notificaciones push web como último recurso para llegar a este usuario en particular. Porque todos sabemos cómo funcionan las notificaciones push en general. Si no estamos en modo de enfoque o no estamos en modo de no molestar, como usuario serás interrumpido por esta ventana emergente como un mensaje de burbuja o algo así. Ahora, técnicamente solo se puede iniciar solicitudes de suscripción después de una acción explícita del usuario. Así que ni siquiera intenten suscribir a los usuarios de alguna manera en segundo plano. No, simplemente no funcionará ni siquiera técnicamente. Se requiere un clic u otra acción por parte del usuario.

En realidad, solo tienes una oportunidad de obtener el permiso para mostrar notificaciones del usuario. Porque una vez que bloqueen o incluso descarten varias veces, la solicitud de suscripción a las notificaciones no se mostrará, será bloqueada por el propio navegador. Es por eso que es una buena idea mostrar un mensaje suave. Antes de llamar a este método de la API con el cuadro de diálogo de solicitud de permiso, muestra tu propio componente de interfaz de usuario como una barra de notificaciones o un cuadro de diálogo o lo que sea, donde proporciones toda la información sobre tu canal de mensajería, qué tipo de contenido vas a enviar, frecuencia y, por supuesto, cómo darse de baja de estos mensajes. Y luego, solo entonces, si el usuario está completamente consciente y está de acuerdo, y hace clic en el botón Acepto, luego llama a este cuadro de diálogo de solicitud de permiso y luego suscríbete. Y es realmente bueno separar estas dos partes en tu código porque este cuadro de diálogo de permiso de notificación se llamará implícitamente después de intentar simplemente suscribir al usuario a las notificaciones push, pero puedes hacerlo explícitamente y luego tienes una mejor flexibilidad para tener un plan B o plan C si el usuario bloquea o descarta tu cuadro de diálogo.

Ahora, ha llegado el mejor momento para enviar algo al usuario. Así que se transaccional, trata de no usar, mi petición personal para ti es que nunca uses una API de notificaciones push para enviar mensajes de difusión masiva a todos los usuarios. Mantenlo solo para usuarios concretos y tareas concretas, como verificar la disponibilidad de nuevos mensajes, ¿verdad? Algo así. Por supuesto, entonces será oportuno, personal y relevante. Y sí, tienes todas las posibilidades del formato de la API de notificaciones para enviar la información en sí, no solo una pista sobre algo que se ha actualizado. Y sí, nuevamente tienes todas las posibilidades de proporcionar una llamada a la acción clara, o incluso un conjunto de llamadas a la acción si las acciones son compatibles con esta plataforma. Y después de todo, solo tenemos unos pocos píxeles en la pantalla. Así que trata de no repetirte y las últimas investigaciones muestran que los emojis funcionan mejor para la participación.

Por eso, como ejercicio, mejoré una notificación genérica de mi aerolínea imaginaria sobre la disponibilidad de vuelos, utilizando el formato de la API de notificaciones push al máximo. Por eso, intenté eliminar todos los componentes repetidos y traté de incluir la mayor cantidad de información posible, y proporcioné una llamada a la acción muy concisa.

Resumiendo, la función de notificaciones push web es muy poderosa y conveniente para los usuarios, y actualmente está disponible en todas las plataformas principales. Recuerda que el 80% de los usuarios de Internet pueden recibir notificaciones push web ahora. Es muy importante para nosotros, los desarrolladores, no hacer un mal uso ni abusar de esta API tan poderosa.

Sí, tenemos un conjunto de servicios que pueden simplificar nuestras vidas al configurar todo. Como este. Creé una pequeña aplicación para que puedas comenzar a testing las notificaciones push web de inmediato en múltiples dispositivos, y en el mismo sitio web encontrarás una presentación extendida sobre el tema con más detalles técnicos, tanto en grabación de video como en diapositivas. Y mi principal llamado a la acción para ti es mantenernos conectados. Encuéntrame en LinkedIn y pregúntame sobre la API de notificaciones push web. Muchas gracias.