Sincronizando navegadores con BrowserSync

Bienvenidos a un nuevo post del área web de la Escola Espai. En esta entrada hablaremos de BrowserSync, una fantástica herramienta que nos permite sincronizar los navegadores de todos nuestros dispositivos.

Una de las tareas más comunes a la hora de desarrollar nuestros proyectos es la comprobación constante, mediante la recarga del navegador. Hacemos un cambio en el código, vamos al navegador, recargamos la página y comprobamos. A eso hay que sumarle la comprobación en otros navegadores y en los diferentes dispositivos tales como tablets, smartphones, etc… BrowserSync se centra en precisamente esto: actualizar el navegador automáticamente. Además también sincroniza los clicks y el scroll en todos los navegadores conectados.

A modo de ejemplo, supongamos que trabajo con dos pantallas y dispongo de una tablet y un smartphone. Imaginad que estoy desarrollando mi aplicación web con el navegador chrome en segundo plano, en la otra pantalla tengo visible otro navegador, por ejemplo Internet Explorer, y mis dos dispositivos encima de la mesa con sus respectivos navegadores… BrowserSync me permitirá ver los cambios e interacciones que vaya realizando en todos los navegadores a tiempo real.

BrowserSync hace que los ajustes y testeos sean más rápidos al sincronizar los cambios de archivos y las interacciones en muchos dispositivos.

Caracteristicas de BrowserSync

• Recarga en vivo: Esta es probablemente la característica más importante de BrowserSync. Cambiar el código y la página se vuelve a cargar automáticamente.
• Sincronización de la interacción: todas las acciones se reflejan en todos los navegadores. Esta característica es útil para realizar pruebas, especialmente cuando se realizan pruebas en muchos dispositivos. También puede personalizar qué acciones se reflejan en los navegadores.
• Simular conexiones más lentas: Una buena manera de testear tu aplicación ya que no todos los usuarios accederan a tu web con la misma velocidad de conexion.
• Historial de URL: BrowserSync registra todo el historial de navegación para que pueda enviar una URL de prueba a todos los dispositivos.
• Compatibilidad: BrowserSync es compatible con muchos automatizadores de tareas como GULP y Grunt. Y funciona con muchos sistemas operativos.

¿Cómo funciona BrowserSync?

En primer lugar, BrowserSync crea un servidor pequeño, pero si ya tiene un servidor configurado, BrowserSync puede conectarse a ese servidor y actuar como proxy. A continuación, inyecta un archivo javascript en cada página; Este archivo utiliza WebSockets para comunicarse entre el servidor y el cliente para ver los cambios en su código o acción del navegador. Tan pronto como BrowserSync detecta una acción, realiza una recarga de la página.

¿Cómo instalar BrowserSync?

Al igual que Bower y muchas otras herramientas Front End, BrowserSync es un programa realizado con NodeJS por lo que si no tienes Node el primer paso será instalarlo.
Al instalar NodeJS se instala también un gestor de paquetes Javascript llamado “npm”. Este gestor sirve para descargar e instalar en nuestro sistema cualquier programa basado en NodeJS y se opera por línea de comandos. Así que abrimos la consola de comandos y ejecutamos lo siguiente:

npm install -g browser-sync

Una vez terminado el proceso, podemos comprobar si la instalación ha sido exitosa con el siguiente comando:

browser-sync --version

Este comando nos debería mostrar la versión instalada actualmente. En mi caso, en el momento de escribir este articulo, la versión instalada es la 2.17.5

Usando BrowserSync

Para realizar una prueba vamos a crear un proyecto sencillo; con un archivo html base y una hoja de estilo asociada. Mi proyecto de prueba tiene este aspecto:

Ahora solo nos queda decirle a BrwoserSync que actue sobre nuestros archivos. Nos situamos en la carpeta del proyecto desde el termial y ejecutamos el siguiente comando:

browser-sync start --server --files "*.html, css/*.css"

Esta orden mandará BrowserSync a vigilar todos los archivos HTML y CSS. Una vez que ejecute el comando, se abrirá una ventana del navegador con el archivo index.html. En la consola deberíamos ver algo así:

Al ejecutar el comando se abrirá automáticamente una nueva pestaña en el navegador con la versión sincronizada, y también nos indicará la IP desde la que se puede acceder mediante otros dispositivos conectados a la red para que podamos verlo en múltiples dispositivos más fácilmente.

• Local: representa la dirección local para ver el proyecto
• External: representa la dirección en la que cualquier dispositivo (dentro de la misma red) puede visualizar el proyecto
• UI: dirección de la interfaz gráfica de BrwoserSync.

Ya solo nos quedará conectar los dispositivos a la URL externa y empezar a cambiar cosas en el código. Veréis que los navegadores están sincronizados y al producirse un cambio se reflejará en todos ellos.

Si queréis entrar más en detalle os recomiendo visitar la web oficial donde encontrareis su documentación para ampliar las opciones e integrar con otras herramientas.

Saludos!