Novedades de Chrome 95

Pete LePage

Tenga en cuenta lo siguiente:

  • La planificación de ruta se vuelve más fácil con URLPattern integrado en el navegador.
  • La API de Eye Dropper proporciona una herramienta integrada para seleccionar colores.
  • Hay una nueva prueba de origen que te permite aceptar recibir la cadena de UA reducida ahora mismo.
  • Todos los videos de la Cumbre de AWP están en línea.
  • Y hay mucho más.

Soy Pete LePage, trabajo y grabo desde casa. Comencemos y veamos las novedades para los desarrolladores en Chrome 95.

Enrutamiento con URLPattern

Casi todas las apps web dependen del enrutamiento de alguna manera, ya sea que se trate de código que se ejecuta en un servidor que asigna una ruta de acceso a archivos en el disco o de lógica en una app de una sola página que actualiza el DOM cuando cambia la URL. URLPattern es una nueva API de plataforma web que estandariza la sintaxis de los patrones de enrutamiento.

Se basa en la base de los frameworks existentes, lo que facilita la realización de tareas de enrutamiento comunes. Por ejemplo, hacer coincidir URLs completas o una ruta de acceso de URL y, luego, mostrar información sobre las coincidencias de tokens y grupos.

Si ya conoces la sintaxis de enrutamiento que se usa en Express, Ruby on Rails o path-to-regexp, es probable que esto te resulte familiar.

Para usarlo, crea un URLPattern() nuevo y proporciona los detalles con los que deseas que se realice la coincidencia de patrones. Los patrones pueden contener comodines, grupos de tokens nombrados, grupos de expresiones regulares y modificadores de grupos.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Por ejemplo, veamos el URLPattern que podría usar Documentos de Google. Especificaremos el kind del archivo, el ID del archivo y en qué mode se abrirá. Luego, para usar el patrón, podemos llamar a test() o exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern está habilitado de forma predeterminada en Chrome y Edge 95 y versiones posteriores. Y para navegadores o entornos como Node, que aún no lo admiten, puedes usar la biblioteca urlpattern-polyfill.

Consulta el artículo de Jeff URLPattern trae el enrutamiento a la plataforma web para obtener todos los detalles.

Elige colores con la API de Eye Dropper

Casi todas las apps de diseño que usé tienen una herramienta de cuentagotas, lo que facilita saber de qué color es algo. Algunos navegadores tienen la función de cuentagotas integrada en <input type=color>, pero no es ideal.

La API de Eye Dropper, que implementó parte del equipo de Microsoft, lleva esa funcionalidad a la Web. Para usarla, crea una instancia de EyeDropper() nueva y, luego, llama a open() en ella.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Al igual que muchas otras APIs web modernas, funciona de forma asíncrona para no bloquear el subproceso principal. Cuando el usuario haga clic en el color que desee, se resolverá con el color en el que hizo clic.

Puedes probar una demostración rápida y ver el código en Glitch.

Cumbre de AWP

¿Asististe a la Cumbre de AWP a principios de este mes?

Fue genial ver a tantas personas hablar sobre las AWP y compartir sus experiencias. Si te lo perdiste, todos los videos están listos, así que asegúrate de revisarlos en PWASummit.org o en el canal de YouTube de AWP Summit.

Prueba de origen de reducción de usuario-agente

La reducción de usuario-agente es una iniciativa para reducir las superficies pasivas de creación de huellas digitales, ya que se reduce la información de la string de usuario-agente solo a la marca y la versión importante del navegador, a su distinción para computadoras de escritorio o dispositivos móviles, y la plataforma en la que se ejecuta.

A partir de Chrome 95, hay una nueva prueba de origen que te permite aceptar recibir la cadena de UA reducida ahora. Esto te permitirá descubrir y corregir problemas antes de que la UA reducida se convierta en el comportamiento predeterminado en Chrome.

Los cambios se aplicarán de forma incremental en varias versiones, pero todo lo que necesitas para preparar y probar está listo en este momento.

Todos los detalles y el cronograma se encuentran en la entrada sobre la prueba de origen de la reducción de usuario-agente en developer.chrome.com.

Y mucho más.

Por supuesto, hay mucho más.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 95.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube para desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y, en cuanto se lance Chrome 96, estaré aquí para contarte las novedades.