Si le preguntas a una sala de desarrolladores qué funciones de dispositivos móviles faltan en la las notificaciones push siempre son la prioridad.
Las notificaciones push permiten que tus usuarios acepten recibir actualizaciones oportunas de los sitios que adoran y permiten volver a atraerlos eficazmente con contenido personalizado y atractivo.
A partir de la versión 42 de Chrome, la API de Push y La API de notificaciones está disponible para desarrolladores.
La API de Push en Chrome se basa en diferentes piezas de tecnología, como las siguientes: Manifiestos de apps web y Service Workers. En esta publicación, veremos cada una de estas tecnologías, pero solo lo mínimo para poner en marcha los mensajes push. Para comprender mejor algunos de las demás funciones de los manifiestos y las capacidades sin conexión de los service workers consulta los vínculos de arriba.
También veremos lo que se agregará a la API en versiones futuras de Chrome y, por último, tenemos una sección de preguntas frecuentes.
Implementación de la mensajería push para Chrome
En esta sección, se describe cada paso que debes completar para admitir la mensajería en tu aplicación web.
Registra un Service Worker
Hay una dependencia de tener un service worker para implementar mensajes push la Web. Esto se debe a que, cuando se recibe un mensaje push, el navegador puede iniciar un service worker, que se ejecuta en segundo plano sin de que la página se abra y enviar un evento para que puedas decidir cómo manejar esa mensaje push.
A continuación, se muestra un ejemplo de cómo registrar un service worker en tu app web. Cuándo si se completó correctamente el registro, llamamos a initialiseState(), que abordaremos en breve.
var isPushEnabled = false;
…
window.addEventListener('load', function() {
var pushButton = document.querySelector('.js-push-button');
pushButton.addEventListener('click', function() {
if (isPushEnabled) {
unsubscribe();
} else {
subscribe();
}
});
// Check that service workers are supported, if so, progressively
// enhance and add push messaging support, otherwise continue without it.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(initialiseState);
} else {
console.warn('Service workers aren\'t supported in this browser.');
}
});
El controlador de clics del botón suscribe o anula la suscripción al usuario para enviar mensajes. isPushEnabled es una variable global que hace un seguimiento está suscrito o no. Se mencionará a lo largo de los fragmentos de código.
Luego, verificaremos que los service workers sean compatibles antes de registrar el service-worker.js
que tiene la lógica para manejar un mensaje push. Aquí
le dicen al navegador
que este archivo JavaScript es el service worker
para nuestro sitio.
Configura el estado inicial
Una vez que se registra el service worker, debemos configurar el estado de nuestra IU.
Los usuarios esperarán que una IU sencilla habilite o inhabilite los mensajes push para tu sitio, y esperarán que se mantenga al día con los cambios que se produzcan. En otro palabras, si habilitan los mensajes push para tu sitio, abandonar y regresar una semana después, tu IU debería destacar que los mensajes push ya están habilitados.
Puedes encontrar algunos lineamientos de UX en este documento. en este artículo, nos centraremos en los aspectos técnicos.
En este punto, puede que pienses que solo hay dos estados con los que tratar, habilitar o inhabilitar. Sin embargo, hay otros estados cerca notificaciones que debes tener en cuenta.
Hay varias APIs que debemos verificar antes de habilitar el botón. si todo es compatible, podemos habilitar nuestra IU y establecer el estado inicial en indica si la mensajería push está suscrita o no.
Dado que la mayoría de estas verificaciones hacen que se inhabilite nuestra IU, deberías configura el estado inicial como inhabilitado. Esto también evita cualquier confusión si un problema con el código JavaScript de tu página, por ejemplo, el archivo JS no se puede descargado o el usuario inhabilitó JavaScript.
<button class="js-push-button" disabled>
Enable Push Messages
</button>
Con este estado inicial, podemos realizar las comprobaciones descritas anteriormente en el
initialiseState(), es decir, después de registrar el service worker.
// Once the service worker is registered set the initial state
function initialiseState() {
// Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
console.warn('Notifications aren\'t supported.');
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
console.warn('The user has blocked notifications.');
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
console.warn('Push messaging isn\'t supported.');
return;
}
// We need the service worker registration to check for a subscription
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Do we already have a push message subscription?
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
// Enable any UI which subscribes / unsubscribes from
// push messages.
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = false;
if (!subscription) {
// We aren't subscribed to push, so set UI
// to allow the user to enable push
return;
}
// Keep your server in sync with the latest subscriptionId
sendSubscriptionToServer(subscription);
// Set your UI to show they have subscribed for
// push messages
pushButton.textContent = 'Disable Push Messages';
isPushEnabled = true;
})
.catch(function(err) {
console.warn('Error during getSubscription()', err);
});
});
}
Una breve descripción general de estos pasos:
- Comprobamos que
showNotificationesté disponible en ServiceWorkerRegistration. para crear un prototipo. Sin él, no podremos mostrar una notificación de nuestro service worker cuando se recibe un mensaje push. - Verificamos cuál es el
Notification.permissionactual para asegurarnos de que no lo sea"denied"Si se rechaza un permiso, no podrás mostrar notificaciones hasta que el usuario cambie manualmente el permiso en el navegador. - Para verificar si se admite la mensajería push, verificamos que
PushManagersea disponibles en el objeto window. - Por último, usamos
pushManager.getSubscription()para verificar si ya tengan o no una suscripción. De ser así, enviamos los detalles de la suscripción a nuestro para asegurarnos de tener la información correcta y configurar nuestra IU para indicar que la mensajería push ya está habilitada o no. Analizaremos los detalles en el objeto de suscripción que se encuentra más adelante en este artículo.
Esperamos hasta que se resuelva navigator.serviceWorker.ready para buscar un
suscripción y habilitar el botón push porque es solo después de que el servicio
trabajador está activo y, de hecho, puede suscribirse a los mensajes de envío.
El siguiente paso es controlar cuándo el usuario quiere habilitar los mensajes de envío, pero Para poder hacerlo, debemos configurar un proyecto de Google Play Console y agregaremos algunos parámetros a nuestro manifiesto para usa Firebase Cloud Messaging (FCM), antes conocido como Google Cloud Messaging (GCM).
Crea un proyecto en Firebase Developer Console
Chrome usa FCM para manejar el envío y la entrega de mensajes push. sin embargo, para Si usas la API de FCM, debes configurar un proyecto en Firebase Developer Console.
Los siguientes pasos son específicos de Chrome, Opera para Android y Samsung navegador que usa FCM. Analizaremos más adelante en este artículo cómo funcionaría esto en otros navegadores.
Crea un nuevo proyecto de desarrollador de Firebase
Para comenzar, debes crear un proyecto nuevo en https://console.firebase.google.com/. haciendo clic en "Crear proyecto nuevo".
Agrega un nombre de proyecto, créalo y se te redireccionará al proyecto Panel:
Desde este panel, haz clic en el engranaje junto al nombre de tu proyecto en la parte superior. en la esquina izquierda y haz clic en “Configuración del proyecto”.
En la página de configuración, haz clic en “Cloud Messaging” .
Esta página contiene la clave de API para la mensajería push, que usaremos más adelante, y el ID de remitente que debemos colocar en el manifiesto de la aplicación web en la próxima sección.
Agrega el manifiesto de una app web
Para los envíos, necesitamos agregar un archivo de manifiesto con un campo gcm_sender_id. para que la suscripción de envío se realice correctamente. Solo se requiere este parámetro para Chrome, Opera para Android y los navegadores Samsung para que puedan usar FCM o GCM.
Estos navegadores usan el gcm_sender_id cuando suscribe a un usuario dispositivo con FCM. Esto significa que FCM puede identificar el dispositivo del usuario y hacer asegúrate de que tu ID de remitente coincida con la clave de API correspondiente y de que el usuario les permitió a tu servidor enviarles mensajes push.
A continuación, se muestra un archivo de manifiesto supersimple:
{
"name": "Push Demo",
"short_name": "Push Demo",
"icons": [{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"gcm_sender_id": "<Your Sender ID Here>"
}
Deberás establecer el valor gcm_sender_id en el ID de remitente de tu proyecto de Firebase.
Una vez que hayas guardado el archivo de manifiesto en tu proyecto (manifest.json es un buen ), haz referencia a él desde el código HTML con la siguiente etiqueta en el encabezado de la .
<link rel="manifest" href="/manifest.json">
Si no agregas un manifiesto web con estos parámetros, obtendrás una excepción.
Cuando intentas suscribir al usuario a mensajes push, con el error
"Registration failed - no sender id provided" o "Registration failed -
permission denied".
Suscribirse a la mensajería de aplicación
Ahora que ya configuraste un manifiesto, puedes volver al código JavaScript de tu sitio.
Para suscribirte, debes llamar al método subscribe() en la PushManager, a la que accedes a través del ServiceWorkerRegistration.
Se le pedirá al usuario que otorgue permiso de origen para enviar mensajes notificaciones. Sin este permiso, no podrás se suscriban.
Si la promesa mostró por el método subscribe(), recibirás un PushSubscription que contendrá un extremo.
El extremo debería guardarse en tu servidor para cada ya que los necesitarás para enviar mensajes push más adelante.
El siguiente código suscribe al usuario a los mensajes push:
function subscribe() {
// Disable the button so it can't be changed while
// we process the permission request
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe()
.then(function(subscription) {
// The subscription was successful
isPushEnabled = true;
pushButton.textContent = 'Disable Push Messages';
pushButton.disabled = false;
// TODO: Send the subscription.endpoint to your server
// and save it to send a push message at a later date
return sendSubscriptionToServer(subscription);
})
.catch(function(e) {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
console.warn('Permission for Notifications was denied');
pushButton.disabled = true;
} else {
// A problem occurred with the subscription; common reasons
// include network errors, and lacking gcm_sender_id and/or
// gcm_user_visible_only in the manifest.
console.error('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
}
});
});
}
En este punto, tu app web está lista para recibir un mensaje push, aunque hasta que agreguemos un objeto de escucha de eventos push a nuestro archivo de service worker.
Objeto de escucha de eventos push de service worker
Cuando se recibe un mensaje push (hablaremos sobre cómo enviar en la siguiente sección), un evento push se enviarán al service worker, y en ese momento necesitarás para mostrar una notificación.
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
Este código registra un objeto de escucha de eventos push y muestra una notificación con un
un título predefinido, texto del cuerpo, ícono y una etiqueta de notificación.
Una sutileza que debes destacar en este ejemplo es la event.waitUntil().
. Este método toma un
promise y extiende el
la vida útil de un controlador de eventos (o que puede considerarse que mantiene el Service
trabajador activo), hasta que la promesa se
liquidado;
En este caso, la promesa que se pasa a event.waitUntil es la promesa que se devuelve.
desde showNotification().
La etiqueta de notificación actúa como una identificador único para notificaciones únicas. Si enviamos dos mensajes push al mismo extremo, con un breve retraso entre ellos, y mostrar notificaciones con la misma etiqueta, el navegador mostrará la primera notificación y la reemplazará con la segunda notificación cuando se recibe el mensaje push.
Si deseas mostrar varias notificaciones a la vez, utiliza una etiqueta diferente. ninguna etiqueta. Veremos un ejemplo más completo de cómo mostrar una notificación más adelante en este publicación. Por ahora, mantengamos las cosas simples y veamos si el envío de un mensaje push aparece esta notificación.
Envía un mensaje push
Nos suscribimos a los mensajes "push" y nuestro service worker está listo para mostrar por lo que es momento de enviar un mensaje push a través de FCM.
Esto solo se aplica a los navegadores que usan FCM.
Cuando envías la variable PushSubscription.endpoint a tu servidor, el
para FCM es especial. Tiene un parámetro al final de la URL
es un registration_id.
Un extremo de ejemplo sería el siguiente:
https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
La URL de FCM es la siguiente:
https://fcm.googleapis.com/fcm/send
La registration_id sería la siguiente:
APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
Esto es específico para los navegadores que usan FCM. En un navegador normal, solo obtenemos un extremo y lo llamarías de forma estándar para que funcione independientemente de la URL.
Esto significa que, en tu servidor, deberás comprobar si el extremo es para FCM y, de ser así, extrae el logging_id. Para hacer esto en Python, podrías hacer algo como lo siguiente:
if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
endpointParts = endpoint.split('/')
registrationId = endpointParts[len(endpointParts) - 1]
endpoint = 'https://fcm.googleapis.com/fcm/send'
Una vez que tengas el ID de registro, podrás realizar una llamada a la API de FCM. Tú Encuentra documentos de referencia sobre la API de FCM aquí.
Estos son los aspectos clave que debes recordar cuando llames a FCM:
- Un encabezado de Authorization con un valor de
key=<YOUR_API_KEY>se debe configurar cuando llames a la API, donde<YOUR_API_KEY>es el Clave de API del proyecto de Firebase.- FCM usa la clave de API para encontrar el ID de remitente adecuado. Asegúrate de que el usuario dio permiso para tu proyecto y, por último, lo que garantiza que la dirección IP del servidor esté incluida en la lista de entidades permitidas de ese proyecto.
- Un encabezado
Content-Typeadecuado deapplication/jsonoapplication/x-www-form-urlencoded;charset=UTF-8dependiendo de si envía los datos en formato JSON o como datos de formulario. - Un array de
registration_ids: estos son los IDs de registro que necesitas extraer de los extremos de tus usuarios.
Consulta los documentos sobre cómo enviar mensajes push desde tu servidor pero para revisar rápidamente tu service worker, puedes usar cURL para enviar un mensaje push a tu navegador.
Intercambia <YOUR_API_KEY> y <YOUR_REGISTRATION_ID>
en este comando cURL con el tuyo y ejecútalo desde una terminal.
Deberías ver una notificación excelente:
curl --header "Authorization: key=<YOUR_API_KEY>" --header
"Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
"{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
Cuando desarrolles la lógica de tu backend, recuerda que el encabezado de autorización y formato del cuerpo de POST son específicos del extremo de FCM, por lo que debes detectar cuando es para FCM y agrega condicionalmente el encabezado y el formato del cuerpo de POST. Para otros navegadores (y Chrome en el futuro), deberás implementar el protocolo de envío web.
Una desventaja de la implementación actual de la API de Push en Chrome es que no puede enviar datos con un mensaje de envío. No, nada. Esto se debe a que que, en una implementación futura, los datos de la carga útil deberán encriptarse en tu servidor antes de que se envíen a un extremo de mensajería push. De esta manera, el extremo sea cual sea, no podrán ver fácilmente el contenido del mensaje push. Esto también protege contra otras vulnerabilidades, certificados HTTPS y los ataques de intermediario entre tus servidor y el proveedor de notificaciones push. Sin embargo, aún no se admite esta encriptación. mientras tanto, deberás recuperar la información necesaria para completar una notificación.
Un ejemplo más completo de evento push
La notificación que vimos hasta ahora es bastante básica y, en lo que respecta a las muestras, es bastante deficiente para cubrir un caso de uso del mundo real.
En realidad, la mayoría de las personas querrán obtener información de su servidor antes de mostrar la notificación. Pueden ser datos para completar en el título y el mensaje de la notificación con algo específico, o ir un paso más allá y almacenar en caché algunas páginas o datos para que cuando el usuario haga clic todo está disponible de inmediato cuando se abre el navegador, incluso si el red no está disponible en ese momento.
En el siguiente código, recuperamos algunos datos de una API y convertimos la respuesta en un y usarlo para propagar la notificación.
self.addEventListener('push', function(event) {
// Since there is no payload data with the first version
// of push messages, we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(SOME_API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
var notificationTag = data.notification.tag;
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = URL_TO_DEFAULT_ICON;
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
});
Vale la pena destacar que event.waitUntil() requiere una promesa.
que da como resultado la promesa que devuelve showNotification(), lo que significa
que nuestro objeto de escucha de eventos no se cerrará hasta que se complete la llamada a fetch() asíncrona.
se muestra la notificación.
Notarás que mostramos una notificación incluso cuando hay un error. Este es ya que si no lo hacemos, Chrome mostrará su propia notificación genérica.
Abrir una URL cuando el usuario hace clic en una notificación
Cuando el usuario hace clic en una notificación, se envía un evento notificationclick.
en tu service worker. En el controlador, puedes tomar las medidas adecuadas,
como enfocar una pestaña o abrir una ventana con una URL específica:
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWindow('/');
}
})
);
});
En este ejemplo, se abre el navegador en la raíz del origen del sitio con un enfoque pestaña existente del mismo origen (si existe) y, de lo contrario, abrir una nueva.
Hay una publicación dedicada a algunas de las acciones que puedes hacer con la API de Notification aquí.
Anula la suscripción al dispositivo de un usuario
Supongamos que se suscribió al dispositivo de un usuario y este está recibiendo mensajes push, pero ¿cómo puedes o anular la suscripción?
Lo más importante para anular la suscripción del dispositivo de un usuario es llamar al
unsubscribe() en la
PushSubscription
y quitar el extremo de tus servidores (para no
enviar mensajes push que sabes que no se recibirán). El siguiente código no
exactamente esto:
function unsubscribe() {
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// To unsubscribe from push messaging, you need get the
// subscription object, which you can call unsubscribe() on.
serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) {
// Check we have a subscription to unsubscribe
if (!pushSubscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
isPushEnabled = false;
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
return;
}
var subscriptionId = pushSubscription.subscriptionId;
// TODO: Make a request to your server to remove
// the subscriptionId from your data store so you
// don't attempt to send them push messages anymore
// We have a subscription, so call unsubscribe on it
pushSubscription.unsubscribe().then(function(successful) {
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
isPushEnabled = false;
}).catch(function(e) {
// We failed to unsubscribe, this can lead to
// an unusual state, so may be best to remove
// the users data from your data store and
// inform the user that you have done so
console.log('Unsubscription error: ', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
});
}).catch(function(e) {
console.error('Error thrown while unsubscribing from push messaging.', e);
});
});
}
Cómo mantener la suscripción actualizada
Es posible que las suscripciones entre FCM y tu servidor no estén sincronizadas. Asegúrate de que
Tu servidor analiza el cuerpo de la respuesta de la solicitud POST de envío de la API de FCM en busca de
Resultados de error:NotRegistered y canonical_id, como se explica en la documentación de FCM.
También es posible que las suscripciones no estén sincronizadas entre el service worker y tu
servidor. Por ejemplo, después de suscribirse o anular la suscripción con éxito, se produce un error
Es posible que la conexión de red impida que actualices tu servidor. o un usuario podría
Revoca el permiso de notificaciones, lo que activa una anulación automática de la suscripción. Mango
de estos casos comprobando el resultado de
serviceWorkerRegistration.pushManager.getSubscription() periódicamente (p.ej.,
en la carga de la página) y sincronizarla con el servidor. Si lo deseas, también puedes
volver a suscribirte automáticamente si ya no tienes una suscripción y
Notification.permission == 'granted'.
En sendSubscriptionToServer(), deberás evaluar cómo manejas
con errores en las solicitudes de red cuando actualizaste endpoint. Una solución es
para realizar un seguimiento del estado de endpoint en una cookie
para determinar si tu servidor necesita o no los detalles más recientes.
Todos los pasos anteriores dan como resultado una implementación completa de mensajes push en la la Web en Chrome 46. Todavía hay funciones especificadas que facilitarán las cosas (como una API estándar para activar mensajes push), pero esta versión comenzar a crear mensajes push en tus aplicaciones web hoy mismo.
Cómo depurar tu app web
Cuando implementas mensajes push, los errores se encontrarán en uno de dos lugares: tu página o tu service worker.
Los errores de la página pueden depurarse usando DevTools. Para depurar un service worker problemas, tienes dos opciones:
- Ve a chrome://inspect > Service workers. Esta vista no proporciona mucha información aparte de los service workers que están en ejecución.
- Dirígete a chrome://serviceworker-internals y, desde aquí, puedes ver el el estado de los service workers y ver los errores, si los hay. Esta página es temporal hasta que Herramientas para desarrolladores tenga un conjunto de funciones similares.
Uno de los mejores consejos que puedo darle a cualquiera que sea nuevo en los trabajadores de servicio es uso de la casilla de verificación denominada "Abrir la ventana de Herramientas para desarrolladores y pausar la ejecución de JavaScript" en el inicio del service worker para depuración". Esta casilla de verificación agregará un punto de interrupción en el inicio del service worker y detener la ejecución; esto te permite reanudar o revisar la secuencia de comandos del service worker y ver si encuentras problemas.
Si parece haber un problema entre FCM y el evento push de tu service worker, entonces no podrás hacer mucho para depurar el problema, ya que no hay para ver si Chrome recibió algo. El aspecto clave que debes asegurarte de que respuesta de FCM se realiza correctamente cuando el servidor realiza una llamada a la API. Se verá algo como:
{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}
Observa la respuesta "success": 1. Si, en cambio, ves un error, entonces
indica que hay un problema con el ID de registro de FCM y el mensaje
el mensaje no se envía a Chrome.
Depuración de Service Workers en Chrome para Android
Por el momento, la depuración de service workers en Chrome para Android no es evidente. Debes navegar a chrome://inspect, encontrar tu dispositivo y buscar un elemento de lista con el nombre "Worker pid:...." que tiene la URL de tu servicio trabajador.
UX para notificaciones de aplicación
El equipo de Chrome está elaborando un documento con prácticas recomendadas para la UX de notificaciones push y un documento que abarca algunos de los casos límite cuando se trabaja con notificaciones push.
- Prácticas recomendadas para la UX de permisos de notificaciones push
- Casos y mitigaciones de las notificaciones push
El futuro de la mensajería push en Chrome y la Web abierta
En esta sección, se detallan algunas de las funciones de Chrome partes específicas de esta implementación que debes conocer y cómo será diferente de otras implementaciones del navegador.
Protocolo de envío web y extremos
Lo bueno del estándar de la API de Push es que debe poder realizar el endpoint, pásalas a tu servidor y envíalas con la implementación del protocolo de envío web.
El protocolo de envío web es un nuevo estándar que los proveedores de envío pueden implementar lo que permite que los desarrolladores no tengan que preocuparse por quién es el proveedor de envío. El es que esto evita la necesidad de registrarse en las claves de API y enviar al igual que ocurre con FCM.
Chrome fue el primer navegador en implementar la API de Push y FCM no
es compatible con el protocolo de envío web. Por eso, Chrome requiere
gcm_sender_id y debes usar la API de RESTful para FCM.
El objetivo final para Chrome es avanzar hacia el uso del protocolo de envío web con Chrome y FCM.
Hasta entonces, debes detectar el extremo "https://fcm.googleapis.com/fcm/send" y manejarla por separado de otros endpoints, es decir, formatear los datos de carga útil en un una forma específica y agrega la clave de autorización.
¿Cómo implementar el protocolo de envío web?
En este momento, Firefox Nightly está trabajando en la extracción y es probable que sea el primer navegador para implementar el protocolo de envío web.
Preguntas frecuentes
¿Dónde están las especificaciones?
https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/
¿Puedo evitar notificaciones duplicadas si mi presencia en la Web tiene varios orígenes o si tengo presencia nativa y en la Web?
No hay una solución para esto en este momento, pero puedes seguir el progreso en Chromium.
Lo ideal sería tener algún tipo de ID para el dispositivo de un usuario y luego del servidor hacen coincidir los IDs de la aplicación nativa y de la suscripción de la aplicación web, y decidir a cuál enviar un mensaje push. Podrías hacer esto a través del tamaño de la pantalla, dispositivo compartido de una clave generada entre la app web y la app nativa, pero cada enfoque tiene ventajas y desventajas.
¿Por qué necesito un gcm_sender_id?
Esto es necesario para que Chrome, Opera para Android y el navegador de Samsung puedan usa la API de Firebase Cloud Messaging (FCM). El objetivo es utilizar la el protocolo de envío web cuando se finaliza el estándar y FCM puede admitirlo.
¿Por qué no usar Web Sockets o eventos enviados por el servidor (EventSource)?
La ventaja de usar mensajes push es que, incluso si tu página está cerrada, tu service worker se despertará y podrá mostrar una notificación. Enchufes web y EventSource tienen la conexión cerrada cuando se cierra la página o el navegador.
¿Qué sucede si no necesito enviar eventos en segundo plano?
Si no necesitas entrega en segundo plano, entonces Web Sockets es una excelente opción.
¿Cuándo puedo usar notificaciones push sin mostrar notificaciones (es decir, push silenciosa en segundo plano)?
Aún no tenemos un cronograma que indique cuándo estará disponible, pero intención de implementar la sincronización en segundo plano y, si bien no está decidido ni especificado, se debate sobre la habilitación envío silencioso con sincronización en segundo plano.
¿Por qué esto requiere HTTPS? ¿Cómo corrijo esto durante el desarrollo?
Los service workers requieren orígenes seguros para garantizar que tiene el origen previsto y no proviene de un intermediario de seguridad cibernética exitoso. Actualmente, eso significa usar HTTPS en sitios activos, aunque localhost el trabajo durante el desarrollo.
¿Cómo funciona la compatibilidad con los navegadores?
Chrome admite la versión estable, y Mozilla está trabajando en la implementación de push en Firefox Nightly. Consulta el error Cómo implementar la API de Push para obtener más información. y puedes hacer un seguimiento de la implementación de notificaciones aquí.
¿Puedo quitar una notificación después de un período determinado?
Esto no es posible por el momento, pero planeamos agregar más asistencia para obtener una una lista de notificaciones visibles actualmente. Si tienes un caso de uso para configurar el vencimiento de la notificación después de que se haya creado, nos gustaría saber Agrega un comentario y lo enviaremos al equipo de Chrome.
Si solo necesitas evitar que se envíe una notificación push al usuario después de un período determinado, y no le importa cuánto tiempo permanezca la notificación puedes usar el parámetro de tiempo de actividad (ttl) de FCM, obtén más información aquí.
¿Cuáles son las limitaciones de la mensajería push en Chrome?
Existen algunas limitaciones que se describen en esta publicación:
- El uso de la CCM por parte de Chrome como servicio push crea y los requisitos de cumplimiento. Estamos trabajando juntos para ver si se pueden incorporar algunos de estos el futuro.
- Debes mostrar una notificación cuando recibes un mensaje push.
- Chrome para computadoras de escritorio tiene la advertencia de que, si no se ejecuta Chrome, los mensajes no se recibirán. Esto es diferente de ChromeOS y Android, en los que los mensajes push siempre se recibirán.
¿No deberíamos usar la API de Permissions?
El La API de Permission se implementa en Chrome. pero no necesariamente estará disponible en todos los navegadores. Aquí puedes obtener más información.
¿Por qué Chrome no abre la pestaña anterior cuando hago clic en una notificación?
Este problema solo afecta a las páginas que actualmente no controla ningún servicio trabajador. Aquí puedes obtener más información sobre el tema.
¿Qué sucede si una notificación está desactualizada para el momento en que el dispositivo del usuario recibió el envío?
Siempre debes mostrar una notificación cuando recibes un mensaje push. Cuando quieres enviar una notificación, pero solo es útil durante un período determinado, puedes usar "time_to_live" parámetro en CCM para que FCM no envíe el mensaje push si pasa la hora de vencimiento.
Puedes obtener más detalles aquí.
¿Qué sucede si envío 10 mensajes push, pero solo quiero que el dispositivo reciba uno?
FCM tiene una clave “contraer_key” que puedes usar para indicarle a FCM que reemplace que tiene la misma 'contraer_key', con el nuevo mensaje.