Novedades de Chrome 95

Pete LePage

Tenga en cuenta lo siguiente:

  • El enrutamiento es más fácil gracias a que URLPattern está integrado en el navegador.
  • La API de Eye Dropper brinda una herramienta integrada para seleccionar colores.
  • Hay una nueva prueba de origen que te permite aceptar recibir el string de UA reducida ahora.
  • Los videos de la Cumbre de AWP están todos en línea.
  • Hay mucho más.

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

Enrutamiento con URLPattern

Casi todas las aplicaciones web dependen del enrutamiento de alguna manera, ya sea como código ejecutándose en un servidor que asigna una ruta de acceso 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 Web de plataforma que estandariza la sintaxis de patrones de enrutamiento.

Se basa en los frameworks existentes, lo que facilita el rendimiento tareas de enrutamiento comunes. Por ejemplo, la coincidencia con URLs completas o con una URL pathname, devuelve información sobre las coincidencias de token y grupo.

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 usarla, crea un nuevo elemento URLPattern() y proporciona los detalles que desees de coincidencia de patrones. Los patrones pueden contener comodines, grupos de tokens con nombre, grupos de expresiones regulares y modificadores de grupo.

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

Por ejemplo, observemos el elemento URLPattern que podría usar Documentos de Google. Especificaremos el kind del archivo, el archivo ID y qué mode para 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 lleva el enrutamiento a la plataforma web de Jeff para ver todos los detalles.

Elige colores con la API de Eye Dropper

Casi todas las aplicaciones de diseño que he usado tienen un cuentagotas, por lo que fácil determinar de qué color es algo. Algunos navegadores tienen cuentagotas integrada en <input type=color>, pero no es ideal.

La API de Inyector, implementada por algunos ingenieros de Microsoft, ofrece esa funcionalidad a la Web. Para usarlo, crea un nuevo elemento EyeDropper(). y, luego, llama a open() en ella.

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

Como muchas otras APIs web modernas, funciona de forma asíncrona, por lo que no bloquee el subproceso principal. Cuando el usuario hace clic en el color que desea, se resolverá con el color en el que hicieron clic.

Puedes probar una demostración rápida y ver la code 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 echarle un vistazo. en PWASummit.org o en la Canal de YouTube de la Cumbre de AWP.

Prueba de origen de reducción de usuario-agente

La reducción de usuario-agente es una iniciativa para reducir la de huellas digitales, reduciendo la información del usuario-agente cadena solo para la marca y la versión importante del navegador, su escritorio o la distinción de 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 habilitar la opción para recibir la cadena UA reducida ahora mismo. Esto habilitará te permite descubrir y solucionar problemas antes de que la UA reducida se convierta en la opción predeterminada en Chrome.

Los cambios se aplicarán de forma incremental en varias versiones, pero todo lo que necesita para prepararse y realizar pruebas ya está listo.

Todos los detalles y el cronograma están en el Prueba de origen de reducción de usuario-agente el 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 a continuación cambios adicionales en Chrome 95.

Suscribirse

Para mantenerte al tanto, 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 apenas se lance Chrome 96, estaré aquí para contarte las novedades de Chrome.