Depurando Web Push con Mozilla Firefox

17 julio, 2018 3:59 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Introducción

Este artículo es parte de una serie sobre el uso y funcionamiento con Web Push y el servicio Web Push de Mozilla. Este artículo no pretende ser una guía general, sino ofrecer sugerencias y visión en el mejor uso del servicio. Se presume algún conocimiento de JavaScript, Python, u otras tecnologías.

Uno de los retos con los problemas de implementación de Web Push es intentar averiguar qué pasó mal. Web Push tiene un gran número de “partes en movimiento”, sistemas y componentes que necesitan trabajar juntos para que tu mensaje sea satisfactoriamente enviado y recibido. Mientras este artículo no puede localizar todas las razones que un mensaje dado de Push podría fallar, intentaré proporcionar herramientas y guía para los problemas más comunes.

Problemas comunes

Informes de errores

El problema más grande que vemos es desde sitios que no prestan atención a los códigos de retorno que suministramos. Un artículo previo mencionó como puedes manejar suscripciones para reducir tu coste de envío de mensajes que nunca serán entregados. Es también importante prestar atención a el error que es devuelto.

Un error puede retornar un cuerpo como el siguiente:

{
  'errno': 102,
  'message': 'Request did not validate invalid token',
  'code': 404,
  'more_info': 'http://autopush.readthedocs.io/en/latest/http.html#error-codes',
  'error': 'Not Found'
}

La lista de valores errno está disponible en la documentación de Autopush. (Autopush es el nombre del servidor open source que ejecutamos para manejar la recepción y envío de actualizaciones de subscripciones push.) El servidor intenta proporcionar tanto detalle y ayuda como sea posible, así que si tus mensaje no están llegando, los mensajes Autopush pueden ayudarte un poco.

Asuntos relacionados con VAPID

Otro problema potencial es la confusión sobre VAPID. VAPID es una especificación en desarrollo para la “auto identificación” de sitios de suministro de suscripciones. Esto significa que si hay un problema importante, el operador del servidor push tiene una manera de contactar a quien está enviando mensajes problemáticos. Si estás viendo un amplio número de mensajes con código de respuesta “401”,  es posible que tienes un problema con tu autenticación VAPID.

VAPID también permite a un sitio crear “suscripciones restringidas”. Estas suscripciones son bloqueadas así que solo la parte que tiene la clave VAPID puede enviarlas. Esto puede ser un poco confuso.

Muy simple, VAPID es un bloque de datos criptográficos firmado con una clave que consta de dos partes: una clave privada que nunca compartes y es usada para firmar el token VAPID, y una clave pública que es segura para compartir y es usada para crear la suscripción restringida. Generalmente, tienes una clave VAPID que dura por bastante tiempo. No es una buena idea que dure para siempre, pero ciertamente puede durar por un año o similar. Hablaré sobre las implicaciones de esto en un momento.

Cuando tu aplicación solicita un endpoint push, tienes la opción de proporcionar tu clave pública VAPID como applicationServerKey. Esto creará una nuevo endpoint de suscripción que está bloqueado a esa clave. Para poder enviar una petición de suscripción con éxito, debes firmar el bloque VAPID usando la clave privada correspondiente, e incluir la clave pública con tu petición. (Cómo incluir la clave pública cambió entre la versión (Draft) 01 y la versión 02. Probablemente quieres encontrar una librería que realice la firma. También querrás consultar la documentación para el servicio de push que elijas para ver qué formas aceptan. La mayoría de las plataformas push aceptan la versión 02.)

Ten en cuenta que la clave pública VAPID está atada a la URL que hayas solicitado. Esto significa que necesitas usar el mismo par de claves cada vez que quieras enviar datos a esa URL. Si alguna vez quieres cambiar la clave VAPID, necesitarás acceder a un nuevo endpoint y descartar el anterior. Tu decides como hacer esto, por supuesto. Tu aplicación podría simplemente acceder la nueva clave pública desde una localización conocida, generar una nueva petición URL y enviar la nueva información de registro de nuevo al servidor. Estos usa mucho del mismo código que usarías para un evento pushsubscriptionchange.

Así que , para errores 401 VAPID, querrás chequear:

  1. ¿Estás usando la misma clave para que usaste para adquirir la suscripción restringida?
  2. ¿Has firmado correctamente tu clave de autorización VAPID?
  3. ¿Has incluido todas las cabeceras VAPID requeridas con tu petición?

Encriptado de datos

Finalmente, está la encripción de datos. Esto puede ser lo más complicado de depurar porque el servidor push no tiene forma de saber si la encripción es correcta cuando acepta un mensaje para entrega. Además, un mensaje solo es entregado por el agente usuario (UA) si el UA puede descifrarlo satisfactoriamente. Esto previene tu aplicación de despertar para mensajes falsos, lo cual podría agotar la vida de la batería.

De nuevo, la mejor manera de resolver esta clase de problemas es usar una librería. Esto no es siempre posible, y puedes tener situaciones donde necesites crear una propia. Hay una página que te puede ayudar a guiarte al proceso de encriptado de tus datos, sin embargo actualmente solo funciona para Firefox.

Ten en cuenta que hay numerosos cambios en las especificaciones que podrían no estar soportadas aún. A partir de la fecha de publicación, la mayoría de implementaciones push aceptaran el encoding ECE Draft 03 “aesgcm”.

Hay una propuesta para que el agente reporte las formas de criptografía que soporta, pero esto no ha sido formalmente aceptado todavía. Desafortunadamente, este es uno de los problemas con el uso de tecnología que aún está en desarrollo. Si deseas seguir con los cambios que están siendo propuestos, deberías seguir los grupos de trabajo.

Desafortunadamente, muchos errores de encriptación no son detectados por el Servicio Push. Esto es porque el servicio Push no puede descrifrar tu mensaje. Afortunadamente, es posible to echar un vistazo al cliente para ver si podría haber un error.

Depurar el escritorio

Usa la consola del navegador para que te ayude a depurar el escritorio. Date cuenta, que esto es diferente a la consola web que aparece en el panel de las herramientas de desarrollador. La consola de navegador muestra un mayor nivel de mensajes que pueden no ser visibles por la página o la consola web.

El beneficio es que serás capaz de ver mensajes que tu service worker así como otros mensajes push. Por ejemplo, si miras a la página de pruebas que usamos, podrías ver algo similar en tu navegador:

 Un ejemplo de la salida de la consola de navegador.


Un ejemplo de la salida de la consola de navegador.

Cerca del final de esa ventana, podrías notar cuatro mensajes desde “sw.js”. Los primeros tres son mensajes console.info() que indican que un nuevo mensaje ha llegado, qué contiene el mensaje, y los clientes asociados. Nota que el cuarto mensaje es un console.error() diciendo "Service worker couldn't send message: Error: No valid client to send to.". Esto puede ocurrir cuando un service worker pierde su asociación con el padre. En resumen: las buenas noticias es que el mensaje llega bien, las malas noticias es que no tiene dónde ir.

Otra herramienta útil para considerar es el depurador de service worker en about:debugging#workers. Esta página muestra todos los service workers registrados y permite desregistrarles, opcionalmente enviar eventos push, y depurar el script de service worker. Mozilla hacks tiene más detalles sobre about: debugging page.

Depurar Android

Depurar push en Android es algo similar. Así como en el escritorio, querrás establecer dom.push.debug como true y dom.push.loglevel como debug. Desafortunadamente, no como en el escritorio, no hay una manera fácil de ver la consola de navegador desde Android. Los mensajes son registrados en el log de error de android, así que es posible usar un comando como adb logcat para seguir el log de error. Algunos desarrolladores pueden ser capaces de usar grep para buscar solo los registros que contengan "Gecko(Push|Console)".

Desafortunadamente, esta vista no es tan bonita, pero muestra más de lo mismo, incluyendo mensajes de consola desde service workers los cuales te pueden ayudar a identificar y resolver bugs. Merece la pena apuntar que adb puede truncar mensajes muy largos.

Un ejemplo de adb log sería así:

04-24 15:18:04.432  7015  7037 I GeckoPushGCM: Cached GCM token exists: crWSbvAk4e4:APA91bHozW8bSTCrBwPerd7...
04-24 15:18:04.432  7015  7037 D GeckoPushManager: Existing uaid is fresh; no need to request from autopush endpoint.
04-24 15:18:04.488  7015  7037 I GeckoPushManager: Got chid: c0ef2... and endpoint: https://updates.push.services...
04-24 15:18:04.500  7015  7038 I GeckoPush: console.debug: PushServiceAndroidGCM:
04-24 15:18:04.520  7015  7038 I GeckoConsole: put() [object Object]
04-24 15:18:04.521  7015  7038 I Gecko   :   put()
04-24 15:18:04.522  7015  7038 I Gecko   : Object
04-24 15:18:04.522  7015  7038 I Gecko   :     - pushEndpoint = https://updates.push.services.mozilla.com/wpush/v1/...
04-24 15:18:04.522  7015  7038 I Gecko   :     - scope = https://jrconlin.github.io/Webpush_QA/
                                               ...
04-24 15:18:04.526  7015  7038 I Gecko   : console.debug: PushDB:
04-24 15:18:04.528  7015  7038 I GeckoConsole: put: Request successful. Updated record c0ef2...
04-24 15:18:04.528  7015  7038 I Gecko   :   put: Request successful. Updated record
04-24 15:18:04.528  7015  7038 I Gecko   :   c0ef2...
04-24 15:18:04.563  7015  7038 I GeckoConsole: receiverKey BNPFRn...
04-24 15:18:04.565  7015  7038 I GeckoConsole: Auth key:  0Gkt8...
04-24 15:18:04.567  7015  7038 I GeckoConsole: data: Amidst the mists and coldest frosts, I thrust my fists against ...
                                               ...
04-24 15:18:04.650  7015  7038 I GeckoConsole: echo -ne "\xa\xc6\xfb\xd3\x13\x0e\xa\xa\xa\xad\x59\xad\x71\xa\xa\...
04-24 15:18:04.652  7015  7038 I GeckoConsole: payload 191,40,74,54,29,62,188,190,133,70,86,70,120,194,173,100,62,...
04-24 15:18:04.653  7015  7038 I GeckoConsole: Fetching: https://updates.push.services.mozilla.com/wpush/v1/gAAAAA...
04-24 15:18:04.960  7015  7038 I GeckoConsole: Message sent 201
04-24 15:18:05.753  7015  9696 D GeckoPushGCM: Message received.  Processing on background thread.
04-24 15:18:05.754  7015  7037 I GeckoPushService: Google Play Services GCM message received; delivering.
                                              ...
04-24 15:18:05.774  7015  7038 I Gecko   : console.debug: PushService:
04-24 15:18:05.774  7015  7037 I GeckoPushService: Delivering dom/push message to Gecko!
04-24 15:18:05.777  7015  7038 I GeckoPush: console.debug: PushServiceAndroidGCM:
04-24 15:18:05.781  7015  7038 I GeckoPush:   ReceivedPushMessage with data
04-24 15:18:05.782  7015  7038 I GeckoPush: Object
04-24 15:18:05.782  7015  7038 I GeckoPush:     - channelID = c0ef2...
04-24 15:18:05.782  7015  7038 I GeckoPush:     - con = aesgcm
                                                ...
04-24 15:18:05.783  7015  7038 I GeckoPush: console.debug: PushServiceAndroidGCM:
04-24 15:18:05.784  7015  7038 I GeckoConsole: Delivering message to main PushService: [object ArrayBuffer] ...
                                           ...
04-24 15:18:05.786  7015  7038 I Gecko   : console.debug: PushService:
04-24 15:18:05.787  7015  7038 I GeckoConsole: receivedPushMessage()
04-24 15:18:05.787  7015  7038 I Gecko   :   receivedPushMessage()
04-24 15:18:05.788  7015  7038 I Gecko   : console.debug: PushDB:
04-24 15:18:05.789  7015  7038 I GeckoConsole: getByKeyID()
04-24 15:18:05.789  7015  7038 I Gecko   :   getByKeyID()
04-24 15:18:05.795  7015  7038 I Gecko   : console.debug: PushDB:
04-24 15:18:05.797  7015  7038 I GeckoConsole: getByKeyID: Got record [object Object]
04-24 15:18:05.810  7015  7038 I Gecko   : console.debug: PushDB:
04-24 15:18:05.811  7015  7038 I GeckoConsole: update: Update successful c0ef2...
                                               ...
04-24 15:18:05.840  7015  7038 I Gecko   : console.debug: PushService:
04-24 15:18:05.841  7015  7038 I GeckoConsole: notifyApp() https://jrconlin.github.io/Webpush_QA/
04-24 15:18:05.841  7015  7038 I Gecko   :   notifyApp()
04-24 15:18:05.841  7015  7038 I Gecko   :   https://jrconlin.github.io/Webpush_QA/
04-24 15:18:05.848  7015  7038 I GeckoConsole: **** Recv'd a push message:: {"isTrusted":true}
04-24 15:18:05.850  7015  7038 I GeckoConsole: Service worker just got: Amidst the mists and coldest frosts, I ...
04-24 15:18:05.853  7015  7038 I GeckoConsole: Service worker found clients {}
04-24 15:18:05.854  7015  7038 I GeckoConsole: Service worker sending to client... [object WindowClient]
04-24 15:18:05.857  7015  7038 I GeckoConsole: Service Worker sent: {"type":"content","content":"Amidst the mists ...
04-24 15:18:08.033   527 32517 E ResourceManagerService: Rejected removeResource call with invalid pid.
04-24 15:18:05.865  7015  7015 D GeckoToolbar: onTabChanged: LOCATION_CHANGE

Date cuenta que tienes un poco más de información aquí, incluyendo mensajes indicando que GCM recibió el mensaje y transmitido a Gecko. Puede que los mensajes de log hayan sido borrados o comprimidos sin espacios para la publicación, pero esto puede ayudar a aislar si el problema está en tu aplicación o en la red.

Conclusión

Trabajar con Push es gratificante, pero recuerda que es una tecnología nueva. Esto significa que las cosas pueden cambiar, y que puede haber elementos ásperos para tener en cuenta. Como siempre, apreciamos los bugs cuando los encuentres y sugerencias en como hacer las cosas más fáciles. Puedes encontrarnos en irc.mozilla.org en el canal #push si tienes preguntas.

The following two tabs change content below.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa