Novedades de Chrome 95

Pete LePage

Tenga en cuenta lo siguiente:

  • La navegación es 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 habilitar la recepción de la cadena de UA reducida ahora.
  • Los videos de la Cumbre de AWP ya están disponibles en línea.
  • Y hay mucho más.

Soy Pete LePage, y estoy trabajando y grabando desde casa. Veamos las novedades para desarrolladores en Chrome 95.

Cómo obtener indicaciones sobre rutas con URLPattern

Casi todas las apps web dependen del enrutamiento de alguna manera, ya sea código que se ejecuta en un servidor que asigna una ruta a archivos en el disco o lógica en una app de una sola página que actualiza el DOM cuando cambia la URL. URLPattern es una nueva API de la 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 con URLs completas o con una ruta de acceso de URL y, luego, devolver 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 te resulte familiar.

Para usarlo, crea un objeto URLPattern() nuevo y proporciona los detalles con los que deseas hacer la correlación de patrones. Los patrones pueden contener comodines, grupos de tokens con nombre, 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 abrirlo. 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 los navegadores o entornos, como Node, que aún no lo admiten, puedes usar la biblioteca urlpattern-polyfill.

Consulta el artículo de Jeff URLPattern brings routing to the web platform para obtener todos los detalles.

Cómo seleccionar colores con la API de Eye Dropper

Casi todas las apps de diseño que he usado tienen una herramienta de cuentagotas, lo que facilita averiguar de qué color es algo. Algunos navegadores tienen la capacidad de cuentagotas integrada en <input type=color>, pero no es ideal.

La API de cuentagotas, implementada por algunas personas de Microsoft, lleva esa funcionalidad a la Web. Para usarlo, crea una instancia 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, por lo que no bloquea el subproceso principal. Cuando el usuario haga clic en el color que desee, se resolverá con el color en el que hizo clic.

Cumbre de PWAs

¿Viste la Cumbre de PWA a principios de este mes?

Fue genial ver a tantas personas hablando sobre las APW y compartiendo sus experiencias. Si te lo perdiste, ya están disponibles todos los videos en PWASummit.org y en el canal de YouTube de PWA Summit.

Prueba de origen de reducción del usuario-agente

La reducción de usuario-agente es un esfuerzo por reducir las superficies de creación pasiva de huellas digitales, ya que reduce la información de la cadena de usuario-agente a solo la marca y la versión significativa del navegador, su distinción de escritorio o dispositivo móvil, y la plataforma en la que se ejecuta.

A partir de Chrome 95, hay una nueva prueba de origen que te permite habilitar la recepción de 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 prepararte y realizar pruebas ya está listo.

Todos los detalles y el cronograma se encuentran en la publicación de 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 solo abarca algunos de los aspectos destacados clave. Consulta los vínculos a continuación para ver otros cambios en Chrome 95.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers 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.