Novedades de Chrome 73

En Chrome 73, agregamos compatibilidad con lo siguiente:

Además, hay mucho más.

Soy Pete LePage. Veamos las novedades para desarrolladores de Chrome 73.

Registro de cambios

Esto solo abarca algunos de los aspectos destacados. Consulta los vínculos que aparecen a continuación para conocer cambios adicionales en Chrome 73.

Las apps web progresivas funcionan en todas partes

Las apps web progresivas proporcionan una experiencia instalable similar a una app, que se compila y entrega directamente a través de la Web. En Chrome 73, agregamos compatibilidad con macOS, lo que lleva la compatibilidad con las apps web progresivas a todas las plataformas de escritorio, como Mac, Windows, ChromeOS y Linux, además de dispositivos móviles, lo que simplifica el desarrollo de apps web.

Una app web progresiva es rápida y confiable, ya que siempre se carga y funciona a la misma velocidad, independientemente de la conexión de red. Proporcionan experiencias enriquecidas y atractivas a través de funciones web modernas que aprovechan al máximo las capacidades del dispositivo.

Los usuarios pueden instalar tu AWP desde el menú contextual de Chrome o puedes promocionar directamente la experiencia de instalación con el evento beforeinstallprompt. Una vez instalada, una AWP se integra con el SO para comportarse como una aplicación nativa: los usuarios las encuentran y las inician desde el mismo lugar que otras apps, se ejecutan en su propia ventana, aparecen en el selector de tareas, los íconos pueden mostrar insignias de notificaciones, etcétera.

Queremos cerrar la brecha de capacidad entre la Web y la versión nativa para proporcionar una base sólida para las aplicaciones modernas entregadas en la Web. Estamos trabajando para agregar nuevas capacidades de plataforma web que te permitan acceder a funciones como el sistema de archivos, el bloqueo de activación, la incorporación de una insignia ambiente en la barra de direcciones para que los usuarios sepan que se puede instalar tu AWP, instalación de políticas para empresas y mucho más.

Si ya estás compilando una AWP para dispositivos móviles, lo mismo sucede con una AWP para computadoras de escritorio. De hecho, si usaste el diseño adaptable, es probable que ya estés listo. Tu base de código única funcionará en computadoras de escritorio y dispositivos móviles. Si recién comienzas a usar AWP, te sorprenderá lo fácil que es crearlas.

  1. Cómo agregar un manifiesto
  2. Cómo crear un conjunto de íconos
  3. Agrega un service worker estándar

Luego, itera a partir de ahí.

Intercambios HTTP firmados

Los intercambios HTTP firmados (SXG), parte de una tecnología emergente llamada paquetes web, ahora están disponibles en Chrome 73. Un intercambio de HTTP firmado permite crear contenido "portátil" que otras partes pueden entregar. Este es el aspecto clave, ya que conserva la integridad y la atribución del sitio original.

Intercambio firmado: la esencia

Esto separa el origen del contenido del servidor que lo entrega, pero como está firmado, es como si se estuviera entregando desde tu servidor. Cuando el navegador carga este intercambio firmado, puede mostrar tu URL de forma segura en la barra de direcciones porque la firma en el intercambio indica que el contenido provino originalmente de tu origen.

Los intercambios HTTP firmados permiten una entrega de contenido más rápida para los usuarios, lo que posibilita obtener los beneficios de una CDN sin tener que ceder el control de la clave privada del certificado. El equipo de AMP planea usar intercambios HTTP firmados en las páginas de resultados de la Búsqueda de Google para mejorar las URLs de AMP y acelerar los clics en los resultados de la Búsqueda.

Consulta la publicación Intercambios HTTP firmados de Kinuko para obtener detalles sobre cómo comenzar.

Hojas de estilo para construir

Las hojas de estilo construibles, nuevas en Chrome 73, nos brindan una nueva forma de crear y distribuir estilos reutilizables, lo cual es muy importante cuando se usa Shadow DOM.

Siempre fue posible crear hojas de estilo con JavaScript. Crea un elemento <style> con document.createElement('style'). Luego, accede a su propiedad de hoja para obtener una referencia a la instancia CSSStyleSheet subyacente y configura el diseño.

Diagrama en el que se muestra la preparación y aplicación de CSS

El uso de este método tiende a provocar un sobredimensionamiento de la hoja de estilo. Y lo que es peor, causa un destello de contenido sin estilo. Las hojas de estilo construibles permiten definir y preparar estilos CSS compartidos y, luego, aplicar esos estilos a varias shadow roots o el documento de manera sencilla y sin duplicación.

Las actualizaciones de un CSSStyleSheet compartido se aplican a todas las raíces en las que se adoptó. Además, la adopción de una hoja de estilo es rápida y síncrona una vez que la hoja se carga.

Comenzar es sencillo, crea una instancia nueva de CSSStyleSheet y, luego, usa replace o replaceSync para actualizar las reglas de la hoja de estilo.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Consulta la publicación de Jason Miller sobre Hojas de estilo creables: estilos reutilizables y sin interrupciones para obtener más detalles y muestras de código.

Y mucho más.

Estos son solo algunos de los cambios en Chrome 73 para desarrolladores; por supuesto, hay mucho más.

  • matchAll() es un nuevo método de coincidencia de expresiones regulares en el prototipo de cadena y muestra un array que contiene las coincidencias completas.
  • El elemento <link> ahora admite las propiedades imagesrcset y imagesizes para que coincidan con los atributos srcset y sizes de HTMLImageElement.
  • La implementación del radio de desenfoque de las sombras de Blink ahora coincide con Firefox y Safari.
  • El modo oscuro para la IU de Chrome ahora es compatible con Mac y pronto se admitirá Windows. Además, hay trabajo en una consulta de medios CSS: prefers-color-scheme, que se puede usar para detectar si el usuario solicitó que el sistema utilice un tema de color oscuro o claro. El error de seguimiento es el de agregar compatibilidad con la función de medios prefers-color-scheme de CSS para Chrome y Firefox.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage, y apenas se lance Chrome 74, estaré aquí para contarte las novedades de Chrome.