Novedades de Chrome 73

Pete LePage

En Chrome 73, agregamos compatibilidad con lo siguiente:

¡Y hay mucho más!

Soy Pete LePage. Analicemos las novedades para desarrolladores en Chrome 73.

Registro de cambios

Aquí se incluyen solo algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver los cambios adicionales en Chrome 73.

Las apps web progresivas funcionan en todas partes

Las aplicaciones web progresivas proporcionan una experiencia instalable similar a la de las aplicaciones, que se crea y se entrega directamente a través de la Web. En Chrome 73, agregamos compatibilidad con macOS, lo que brinda compatibilidad con aplicaciones web progresivas para todas las plataformas de computadoras, como Mac, Windows, ChromeOS y Linux, así como para dispositivos móviles, lo que simplifica el desarrollo de apps web.

Una Progressive Web App es rápida y confiable, y siempre se carga y funciona con 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 bien puedes promover directamente la experiencia de instalación con el evento beforeinstallprompt. Una vez instalada, una AWP se integra al 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, sus íconos pueden mostrar insignias de notificaciones, etcétera.

Queremos cerrar la brecha de capacidades entre la Web y lo nativo para proporcionar una base sólida para las aplicaciones modernas que se entregan en la Web. Estamos trabajando para agregar nuevas funciones de la plataforma web que te brinden acceso a elementos como el sistema de archivos, el bloqueo de activación, la adición de una insignia ambiente a la barra de direcciones para informar a los usuarios que se puede instalar tu AWP, la instalación de políticas para empresas y muchos más.

Si ya compilas una AWP para dispositivos móviles, una AWP para computadoras de escritorio no es diferente. De hecho, si ya usaste el diseño responsivo, es probable que ya esté todo listo. Tu base de código única funcionará en computadoras y dispositivos móviles. Si estás dando los primeros pasos con las AWP, te sorprenderá lo fácil que es crearlas.

  1. Cómo agregar un manifiesto
  2. Crea un conjunto de íconos
  3. Agrega un servicio de trabajo de plantilla

Luego, itera desde allí.

Intercambios HTTP firmados

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

Intercambio firmado: La esencia

Esto desvincula el origen del contenido del servidor que lo entrega, pero, como está firmado, es como si se entregara 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 hace posible obtener los beneficios de una CDN sin tener que ceder el control de la clave privada de tu 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 componibles

Las hojas de estilo componibles, nuevas en Chrome 73, nos brindan una nueva forma de crear y distribuir estilos reutilizables, lo que es particularmente 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 subyacente de CSSStyleSheet y establece el estilo.

Diagrama que muestra la preparación y aplicación de CSS

El uso de este método suele generar un aumento excesivo de las hojas de estilo. Peor aún, causa un destello de contenido sin diseño. Las hojas de estilo componibles permiten definir y preparar estilos CSS compartidos y, luego, aplicarlos a varias raíces de sombras o al documento con facilidad y sin duplicaciones.

Las actualizaciones de un CSSStyleSheet compartido se aplican a todas las raíces en las que se adoptó, y adoptar un diseño de página es rápido y síncrono una vez que se cargó la hoja.

El proceso de puesta en marcha es sencillo: crea una instancia nueva de CSSStyleSheet y, luego, usa replace o replaceSync para actualizar las reglas del diseño de página.

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 Constructable Stylesheets: seamless reusable styles de Jason Miller 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 muchos más.

  • matchAll() es un nuevo método de coincidencia de expresión regular 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 correspondan a los atributos srcset y sizes de HTMLImageElement.
  • La implementación del radio de desenfoque de sombras de Blink ahora coincide con Firefox y Safari.
  • El modo oscuro para la IU de Chrome ahora es compatible con Mac, y la compatibilidad con Windows está en camino. Además, se está trabajando en una consulta de medios CSS: prefers-color-scheme, que se puede usar para detectar si el usuario solicitó que el sistema use un tema de color claro o oscuro. El error de seguimiento para esto es Agregar compatibilidad con la función de contenido multimedia prefers-color-scheme de CSS para Chrome y Firefox.

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de 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 74, estaré aquí para contarte las novedades.