En este punto, ya analizamos cómo suscribir un usuario y enviar un mensaje push. El siguiente paso recibir este mensaje push en el dispositivo del usuario y mostrar una notificación (y realizar cualquier otra el trabajo que podríamos querer hacer).
El evento push
Cuando se recibe un mensaje, se envía un evento push a tu service worker.
El código para configurar un objeto de escucha de eventos push debe ser bastante similar al de cualquier otro evento. de escucha que escribirías en JavaScript:
self.addEventListener('push', function(event) {
if (event.data) {
console.log('This push event has data: ', event.data.text());
} else {
console.log('This push event has no data.');
}
});
Para la mayoría de los desarrolladores que son nuevos en los service workers, el elemento más extraño de este código es self
de salida. Por lo general, self
se usa en los Web Workers, que es un service worker. self
hace referencia a
el alcance global, como window
en una página web. Pero para los trabajadores web y service workers,
self
se refiere al trabajador en sí.
En el ejemplo anterior, se puede considerar que self.addEventListener()
agrega un objeto de escucha de eventos a
el propio service worker.
Dentro del ejemplo del evento push, verificamos si hay datos y, luego, imprimimos algo en la consola.
Existen otras formas de analizar datos a partir de un evento push:
// Returns string
event.data.text()
// Parses data as JSON string and returns an Object
event.data.json()
// Returns blob of data
event.data.blob()
// Returns an arrayBuffer
event.data.arrayBuffer()
La mayoría de las personas usan json()
o text()
según lo que esperan de su aplicación.
En este ejemplo, se muestra cómo agregar un objeto de escucha de eventos push y cómo acceder a los datos, pero es
y le faltan dos partes de funcionalidad muy importantes. No se muestra una notificación y es
no usa event.waitUntil()
.
Esperar hasta
Algo que se debe entender sobre los service workers es que se tiene poco control sobre cuándo
se ejecutará el código del service worker. El navegador decide cuándo activarlo y cuándo
y rescindirlo. La única forma de decirle al navegador: "Estoy muy ocupada haciendo tareas
cosas", es pasar una promesa al método event.waitUntil()
. De esta forma, el navegador
mantiene el service worker en ejecución hasta que se detenga la promesa que pasaste.
Con los eventos push, existe un requisito adicional de que debes mostrar una notificación antes se estableció la promesa que pasaste.
A continuación, se incluye un ejemplo básico de cómo mostrar una notificación:
self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
event.waitUntil(promiseChain);
});
Llamar a self.registration.showNotification()
es el método que muestra una notificación a
el usuario y muestra una promesa que se resolverá cuando se muestre la notificación.
Para que este ejemplo sea lo más claro posible, he asignado esta promesa a un
variable llamada promiseChain
. Luego, se pasa a event.waitUntil()
. Sé que esto es
pero he visto muchos problemas que culminaron
No entendemos bien lo que se debe pasar a waitUntil()
o como resultado de una promesa dañada.
cadenas.
Un ejemplo más complicado con una solicitud de red para datos y seguimiento del evento push con Analytics podría verse así:
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
return self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
Aquí se llama a una función que muestra una promesa pushReceivedTracking()
.
que, a los fines de este ejemplo, podemos suponer que hará una solicitud de red
a nuestro proveedor de herramientas de análisis. También haremos una solicitud de red para obtener la
respuesta y mostrar una notificación con los datos de las respuestas del título y
mensaje de la notificación.
Podemos asegurarnos de que el service worker se mantenga activo mientras se combinan estas tareas
estas promesas con Promise.all()
. La promesa resultante se pasa a event.waitUntil()
.
lo que significa que el navegador esperará hasta que ambas promesas hayan terminado antes de verificar que se haya
y finalizando el service worker.
La razón por la que deberíamos preocuparnos por waitUntil()
y cómo usarla es que una de las
problemas comunes que enfrentan los desarrolladores es que cuando la cadena de la promesa es incorrecta o no funciona, Chrome
muestra este valor “predeterminado” notificación:
![Una imagen de la notificación predeterminada en Chrome](https://web.developers.google.cn/static/articles/push-notifications-handling-messages/image/an-image-the-default-not-ec0a0feda0315.png?authuser=7&hl=es-419)
Chrome solo mostrará el mensaje "Este sitio se actualizó en segundo plano". notificación cuando un
se recibe un mensaje push y el evento push en el service worker no muestra un
después de que finalice la promesa pasada a event.waitUntil()
.
La razón principal por la que los desarrolladores se ven atrapados
por esto es que su código
suelen llamar a self.registration.showNotification()
, pero no lo hacen
cualquier cosa con la promesa que devuelve. Esto genera de forma intermitente la notificación
que se muestra. Por ejemplo, podemos quitar la devolución para
self.registration.showNotification()
en el ejemplo anterior y corremos el riesgo de ver esto
notificación.
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
Puedes ver que es fácil pasarlo por alto.
Solo recuerda que, si ves esa notificación, verifica tus cadenas de promesa y event.waitUntil()
.
En la próxima sección, veremos lo que podemos hacer para aplicar estilo a las notificaciones qué contenido podemos mostrar.
Próximos pasos
- Descripción general de las notificaciones push web
- Cómo funciona el envío
- Cómo suscribir a un usuario
- UX de permisos
- Envía mensajes con bibliotecas push web
- Protocolo de envío web
- Maneja eventos de envío
- Cómo mostrar una notificación
- Comportamiento de las notificaciones
- Patrones de notificación comunes
- Preguntas frecuentes sobre las notificaciones push
- Problemas comunes e informar errores