Automatiza el Navegador con la API de Renderizado del Navegador de Workers

¡Hola a todos! Estoy realmente emocionado de estar aquí en JS Nation. Voy a hablar sobre cómo automatizar el navegador con la API de renderizado del navegador de los trabajadores. Ahora, eso es un trabalenguas. A partir de ahora, me referiré a esto como simplemente API de renderizado o renderizado del navegador. Estoy realmente triste de no poder asistir a la conferencia en persona, pero espero que disfruten mi sesión.

En esta sesión, te mostraré cómo puedes realizar tareas de automatización del navegador utilizando la Plataforma de Desarrollo de Cloudflare. Y al final, te mostraré algunos casos de uso interesantes y ejemplos de algunas tareas que puedes automatizar con el navegador. Nuevamente, soy Gift Iguenu. Trabajo como defensor del desarrollo en Cloudflare. Estoy realmente emocionado acerca de la Plataforma de Desarrollo en Cloudflare, y hablo de ello en Twitter slash mi blog personal. Entonces, si quieres seguirme allí, sería genial.

Muy bien. Tengo una breve historia personal que contar antes de comenzar esta charla, y probablemente esté basada en mi experiencia como expatriado viviendo en los Países Bajos. Así que siento que esto será algo con lo que te podrás identificar si vives en los Países Bajos, o si vives en alguna ciudad importante que tenga una crisis de vivienda. Es súper difícil encontrar un apartamento. Por lo general, lleva alrededor de, ¿qué, uno a tres meses, si acabas de mudarte o te mudaste a una nueva ciudad, conseguir un buen apartamento, ¿verdad? Y también es bastante caro. En los Países Bajos, el año pasado, hubo escasez de viviendas, más de 390,000 hogares tenían escasez. Así que fue muy difícil encontrar un apartamento.

Y en ese momento, estaba buscando un apartamento en los Países Bajos, específicamente en Ámsterdam, porque vivía en una ciudad diferente y quería mudarme a Ámsterdam. Y tenía en mente un apartamento específico al que quería mudarme. Es como un complejo de edificios con varios tipos de apartamentos. Ahora, lo interesante de este lugar específico se llama nuestro dominio. Básicamente, cómo funciona es que solo necesitas ir al sitio web y una vez que haya un apartamento disponible, lo pagas, y eso significa que una vez que puedas pagar, significa que tienes el apartamento.

Ahora, el problema es que para cada apartamento que está disponible en ese edificio, ya está reservado, ¿verdad? Así que cada semana, si tal vez alguien se muda o hay disponibilidad, actualizarían eso cada semana los miércoles a las 12 p.m. Así que durante el próximo mes, iba al sitio web los miércoles a las 12 p.m. para verificar si había disponibilidad, ¿verdad? Así que estaba buscando un apartamento de dos habitaciones. Y, por supuesto, me llevó un tiempo poder encontrar esto. Estaba verificando manualmente los sitios web cada semana, lo cual no era agradable. Pero pensando en el tema en cuestión, la automatización del navegador, en ese momento, si hubiera sabido sobre esto, es algo que habría hecho.

Pero solo para que todos lo sepan, así es como lo resolví, utilizando la automatización del navegador. La API de renderizado del navegador de los trabajadores básicamente te permite ejecutar automatización dentro de tu navegador. Puedes hacer cosas como navegar a un sitio web específico, tomar una captura de pantalla del sitio web, crear un PDF a partir del sitio web, y más.

Para mi caso específico, en lugar de ir al sitio web los miércoles a las 12 p.m. cada semana, quería automatizar este proceso, ¿verdad? Quería permitir que mi navegador lo hiciera por mí, sin tener que hacerlo yo mismo. ¿Qué hice entonces? Básicamente escribí el trabajador de renderizado del navegador que navegaría al sitio web específico en el momento específico. Honestamente, simplemente lo ejecutaría cada vez, solo porque quería asegurarme de poder encontrar un apartamento, ¿verdad? Lo que hace es navegar a los sitios web, tomar una captura de pantalla de la página de disponibilidad específica. Así que si hay disponibilidad en un momento determinado, el sitio web me dirá `oh, tienes suerte, actualmente hay un apartamento disponible`. De hecho, en este momento específico, había tres apartamentos diferentes disponibles. Así que pude ir al sitio web y pagar por el apartamento que quería hacer.

Por supuesto, este es solo un ejemplo interesante de cómo la automatización del navegador puede ayudarte. Hay mucho más que puedes hacer. Por ejemplo, con esta demostración, también podría ir un paso más allá y hacer un trabajo en Chrome para que este trabajador se ejecute en un día específico cada semana. También podría agregar la automatización de correo electrónico, donde si hay un apartamento, en lugar de devolver el valor del apartamento al sitio web, podría enviarme un correo electrónico y me informaría automáticamente de la disponibilidad, ¿verdad? Ese es un caso de uso real en el que creo que la automatización del navegador puede ayudar.

Con eso, quiero hablar sobre la tecnología subyacente en esa configuración que acabo de mostrarte, que son los trabajadores de Cloudflare. Si no estás familiarizado, los trabajadores de Cloudflare es un entorno sin servidor que te permite crear nuevas aplicaciones o mejorar las existentes con lenguajes que ya conoces como JavaScript, TypeScript o incluso Python. Este es un ejemplo de trabajador de Cloudflare. Básicamente, lo que hace es devolver una cadena o una matriz de datos de conferencia, en este caso, GSNation, y lo devuelvo a mi navegador. Está escrito en JavaScript. Este ejemplo que te estoy mostrando, pero también puedes escribirlo en TypeScript o en Python si quieres.

Avanzando, solo unos pocos diapositivas más. Sí, la API de renderizado del navegador es uno de los servicios que ofrecemos en la plataforma de desarrollo de Cloudflare. Básicamente, te permite como desarrollador controlar e interactuar con una instancia de navegador sin cabeza. A partir de eso, puedes crear flujos automáticos, por ejemplo, navegar a un sitio web, tomar una captura de pantalla y mucho más. La tecnología subyacente aquí, si alguna vez has explorado el tema de la automatización del navegador, es posible que hayas oído hablar de Puppeteer. Puppeteer es una biblioteca de Node.js del equipo de Chrome DevTools. Básicamente proporciona una abstracción del protocolo de DevTools para ayudarte a controlar Chrome o Chromium. Ahora, la API de renderizado del navegador de los trabajadores es un fork de Puppeteer.

Básicamente lo que hicimos en Cloudflare es crear una bifurcación y parchearla para conectarse a la API de renderizado del navegador de los trabajadores, de modo que dentro de tu trabajador de Cloudflare puedas usar directamente la biblioteca Puppeteer. Esto no era posible antes, por cierto. Así que te permitimos utilizar Puppeteer dentro de los trabajadores con esta integración.

¿Y cómo surgió esto? En realidad, nació como una necesidad interna dentro del equipo. En Cloudflare, necesitábamos realizar automatización del navegador, pero no era posible dentro de los trabajadores en ese momento. Muchos equipos querían realizar tareas como tomar capturas de pantalla automatizadas o crear PDF automatizados. Por ejemplo, una de las herramientas dentro de Cloudflare llamada Cloudflare Radar, que es un producto para monitorear las tendencias de Internet, utiliza la API de renderizado del navegador de los trabajadores para implementar el escáner de URL. Básicamente, lo que hace es tomar capturas de pantalla de cualquier URL que ingreses y generará un informe del rendimiento y la seguridad de la URL.

¿Cómo funciona esto internamente? Intentaré explicarte cómo estamos utilizando Puppeteer internamente para permitirte usarlo dentro de un trabajador. La API de renderizado combina el poder del aislamiento remoto del navegador para ayudarte a simplificar el proceso de ejecución de Puppeteer dentro de un trabajador. El aislamiento remoto del navegador te permite interactuar con un navegador web en un entorno remoto en lugar de en tu propio dispositivo. Hemos envuelto la biblioteca Puppeteer para que funcione directamente dentro de tu proyecto. Así es como podemos permitirte usar Puppeteer dentro de tu trabajador. Una vez que se establece una conexión de socket web, nuestro aislamiento remoto del navegador manejará todas las solicitudes entrantes a tu trabajador para que puedas realizar tareas como tomar una captura de pantalla o realizar otras tareas de automatización que desees.

También, dentro de tu trabajador de Cloudflare, necesitarías configurar algo llamado un enlace de navegador. Básicamente, esto le dará a un trabajador un punto de conexión autenticado para interactuar con una instancia remota de tu navegador. Este es un ejemplo de un script de trabajador que básicamente está ejecutando la API de renderizado del navegador de Cloudflare dentro del script. Entonces, lo que está sucediendo aquí es que necesitas importar la biblioteca Cloudflare Puppeteer y luego configurar la instancia llamando a la función Puppeteer.launch. Básicamente, lo que estoy haciendo aquí es iniciar Puppeteer y también navegar a una página específica en el navegador. Todo esto está disponible en GitHub. Como mencioné, hicimos una bifurcación de Puppeteer. La biblioteca específica que estamos utilizando dentro de los trabajadores de Cloudflare se llama biblioteca Cloudflare Puppeteer y la hicimos de código abierto. El equipo que trabaja en esto siempre intenta mantener la paridad de funciones con la bifurcación real, que es la biblioteca Puppeteer de Google.

En el momento de esta charla, el renderizado del navegador está disponible de manera general. Entonces, si estás interesado en probarlo, puedes usarlo desde hoy para automatizar tus tareas dentro del navegador. También hemos lanzado características adicionales. Por ejemplo, tenemos una característica adicional llamada gestión del navegador, donde puedes reutilizar sesiones de navegación. Entonces, cuando necesité realizar dos o más tareas dentro de un trabajador específico, encontré que era difícil debido a los límites que impone la API de renderizado del navegador. Hemos facilitado la reutilización de sesiones de navegación. Voy a mostrarte un ejemplo de cómo funciona esto.

También hemos agregado análisis y registros para que puedas ver la cantidad de navegadores que se han generado durante el tiempo de integración del trabajador con la API de renderizado.

Entonces, ¿cuáles son algunos casos de uso, por qué usarías esto en tu aplicación? Ya te mostré algunos, pero también compartiré algunos más para que estés familiarizado con algunos buenos casos de uso de la API de renderizado del navegador. Obviamente, ya mencioné tomar una captura de pantalla. Por ejemplo, si alguna vez quisieras hacerlo, estás ejecutando una prueba y necesitas tomar una captura de pantalla o necesitas hacer una captura de pantalla de una página específica, o no quieres hacerlo manualmente, puedes usarlo como ejemplo de caso de uso. Puedes usarlo para generar un PDF a partir de una página web. Puedes usarlo para automatizar aplicaciones web. Por supuesto, también úsalo para recopilar métricas de rendimiento.

Tengo unos minutos más, así que te mostraré rápidamente algunos ejemplos de cómo normalmente querrías usar la API de renderizado del navegador del trabajador en tu aplicación. El primer ejemplo que te mostraré es cómo tomar una captura de pantalla y también almacenar esta captura de pantalla en R2 de Cloudflare. R2 es un almacenamiento de blobs que ofrecemos en Cloudflare y que te permite almacenar cosas como imágenes y mucho más. Voy a tomar una captura de pantalla de una página y almacenar la imagen en R2. Básicamente, lo que necesito hacer aquí es que ya tengo mucho de esto configurado. Así que te mostraré rápidamente el código. Tengo mi trabajador aquí donde ya he instalado la biblioteca Puppeteer. También he instalado bibliotecas adicionales que me permiten realizar las tareas que quiero realizar aquí. Lo que destacaré primero es que estoy iniciando el navegador. Básicamente, quiero iniciar un navegador y luego abrir una nueva pestaña dentro del navegador. Y para la URL específica que voy a pasar, quiero tomar una captura de pantalla, que es lo que estoy haciendo aquí. Y luego, después de tomar una captura de pantalla, subo la imagen a R2, que es lo que hago en este bloque de código. Permíteme probar esto rápidamente y mostrártelo.

Voy a ejecutar npm run dev. Y una vez que esto esté en ejecución, apagaré algo rápidamente y lo intentaré de nuevo. Una vez que esto esté en ejecución, navegaré a mi URL aquí y también necesito pasar los parámetros de la URL que quiero pasar. Para este ejemplo específico, usaré el sitio web de Hacker News para mi demostración. hackernews.com. Y una vez que lo ponga, debería obtener una captura de pantalla de las noticias actuales de Hacker News. Obviamente, esto se ha almacenado en R2. Lo que estoy obteniendo es la URL pública de R2. Y aquí puedes ver la imagen generada. Este es un ejemplo de lo que puedes hacer con la API de renderizado del navegador.

Otra demostración que me gustaría mostrar es cómo puedes usar Durable Objects para persistir sesiones de navegador. Así que mencioné que si quieres realizar más de una tarea dentro de tu worker, a veces puede ser difícil y también disminuiría el performance. Bien, ahora te permitimos reutilizar sesiones de navegador utilizando Durable Objects o utilizando la gestión de sesiones que mencioné anteriormente. Así que te mostraré un ejemplo rápido de cómo usar Durable Objects. Ten en cuenta que tienes un límite de dos navegadores nuevos que puedes abrir dentro de una cuenta y estos se mantendrán activos durante un minuto. Es decir, tienes 60 segundos para hacer cualquier tarea que desees antes de que se cierre la sesión. Pero puedes usar Durable Objects para extender eso un poco. Entonces, en este ejemplo, estoy usando un Durable Object para crear una alarma que extenderá mi sesión por otros 60 segundos, para que pueda hacer lo que quiero hacer. Por ejemplo, quiero tomar una captura de pantalla como lo hice en el ejemplo de efectos. Pero también quiero tomar una captura de pantalla de todas las dimensiones posibles dentro de la pantalla. Así que para móviles, tablets y para un tamaño de laptop. Eso esencialmente se ejecutaría durante más de 60 segundos. Así que estoy agregando 60 segundos adicionales para extender la sesión del navegador. Correcto. Estoy haciendo eso usando Durable Objects. En segundo lugar, una de las características adicionales que podrías usar dentro de la API de renderizado del navegador de Workers se llama Gestión de Sesiones, donde puedes reducir una sesión. Básicamente, la diferencia entre hacer esto y usarlo de manera ordinaria es que ahora puedes pasar algo llamado puppeteer que se conecta. Y en lugar de finalizar tu sesión de navegador, simplemente puedes desconectarla. Y luego, si necesitas reutilizar la sesión para la próxima tarea posible que tengas, es posible dentro de tu worker. Saltaré esta última demostración, simplemente porque no tengo mucho tiempo para revisarla. Pero otra cosa que podrías hacer dentro de la API de renderizado del navegador de Workers es tomar métricas de performance de una aplicación. Correcto. Y este es un ejemplo de lo que estoy haciendo aquí con Hacker News. Bien. Esas son diferentes cosas que podrías hacer con la API de renderizado del navegador. Sé que he pasado rápidamente por muchas de ellas, pero te recomiendo que consultes la docs para obtener más información y también ver algunos ejemplos y probarlo por ti mismo. Si tienes un caso de uso que te gustaría automatizar con la API de renderizado del navegador, te recomendaría que consultes la docs. Y también tenemos publicaciones en el blog de Cloudflare que profundizan un poco más en cómo funciona todo esto. Así que te recomiendo que también lo revises. Muchas gracias por escuchar mi sesión. Espero que hayas tenido un buen tiempo y también hayas aprendido algo de esto. Si deseas acceder a las diapositivas, puedes escanear el código QR code en la pantalla. Gracias. Y que tengas un maravilloso resto de la conferencia.