Notificaciones Push Web Bien Hechas

Rate this content
Bookmark

Finalmente, la API de Notificaciones Push Web está disponible en todos los principales navegadores y plataformas. Es una característica que puede llevar la experiencia de tus usuarios al siguiente nivel o... ¡arruinarla! En mi sesión, después de una introducción técnica sobre cómo funcionan las Notificaciones Push Web, exploraremos la implementación de diálogos inteligentes de solicitud de permisos, varios tipos de notificaciones en sí mismas y la comunicación con tu aplicación para escenarios más sofisticados, todo hecho correctamente, con la mejor experiencia de usuario posible.

11 min
05 Jun, 2023

Video Summary and Transcription

Hablemos sobre las notificaciones push web y sus beneficios. Las notificaciones push web tienen tasas de aceptación y clics más altas en comparación con los métodos tradicionales. La API de notificaciones push web debe usarse de manera responsable, con solicitudes de suscripción iniciadas solo después de una acción explícita del usuario. Mejora la participación utilizando emojis en las notificaciones. Conéctate con el orador en LinkedIn para obtener más información sobre la API de notificaciones push web.

Available in English

1. Introducción a las notificaciones push web

Short description:

Hablemos de las notificaciones push web. Compartiré consejos sobre cómo utilizar esta poderosa API. Las notificaciones push funcionan independientemente del estado de la aplicación, lo que permite que las notificaciones lleguen incluso si la aplicación o el navegador están cerrados.

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.

2. Beneficios de las notificaciones push web

Short description:

En comparación con los métodos tradicionales como los SMS, las notificaciones push web tienen tasas de aceptación y clics más altas. También son más rentables debido al canal de entrega gratuito. Además, con el 80% de los usuarios de Internet que ahora pueden recibir notificaciones push web, el alcance potencial es significativo.

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.

3. Web Push Subscription and Sending Notifications

Short description:

La API de notificaciones push web es el último recurso para llegar a los usuarios. Los navegadores son protectores, así que no molesten a los usuarios con notificaciones no deseadas. Inicie las solicitudes de suscripción solo después de una acción explícita del usuario. Muestre un mensaje suave con información sobre su canal de mensajería antes de solicitar permiso. Separe la suscripción y la solicitud de permiso para manejar las interacciones del usuario. Sea transaccional y evite los mensajes de difusión masiva. Utilice el formato de la API de notificaciones para enviar información relevante y una llamada a la acción clara. Los emojis pueden mejorar la participación.

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.

4. Improving Generic Notification and Call to Action

Short description:

Mejoré una notificación genérica de mi aerolínea imaginaria utilizando el formato de la API de notificaciones push al máximo. Las notificaciones push web son poderosas y convenientes para los usuarios en todas las plataformas principales. Es importante que los desarrolladores no hagan un mal uso o abuso de esta API. Creé una pequeña aplicación para probar las notificaciones push web en múltiples dispositivos. Encuéntrame en LinkedIn para mantenernos conectados y preguntarme sobre la API de notificaciones push web.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
React Advanced Conference 2023React Advanced Conference 2023
23 min
Superpowers of Browser’s Web API
When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

Workshops on related topic

Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.