Novedades de Chrome 73

Pete LePage

En Chrome 73, agregamos compatibilidad con lo siguiente:

¡Y hay mucho más!

Soy Pete LePage. Profundicemos y veamos las novedades para los 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, por lo que la compatibilidad con aplicaciones web progresivas se aplica a todas las plataformas de escritorio (Mac, Windows, ChromeOS y Linux), así como para dispositivos móviles, lo que simplifica el desarrollo de aplicaciones web.

Una Progressive Web App es rápida y confiable, y siempre se carga y se ejecuta 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 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 a la plataforma web que te den acceso a elementos como el sistema de archivos, el bloqueo de activación, la incorporación de una insignia de ambiente a la barra de direcciones para que los usuarios sepan que tu AWP se puede instalar, la instalación de políticas para empresas y mucho más.

Si ya compilas una AWP para dispositivos móviles, una AWP para computadoras de escritorio no es diferente. De hecho, si usaste el diseño responsivo, es probable que ya tengas todo listo para hacerlo. 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 retiene la integridad y 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 construibles

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 la propiedad de su hoja para obtener una referencia a la instancia CSSStyleSheet subyacente y configura el diseño.

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 a una CSSStyleSheet compartida se aplican a todas las raíces en las que se adoptó, y la adopción de una hoja de estilo es rápida y síncrona una vez que se carga la hoja.

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 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 trabaja en una consulta de medios de CSS: prefers-color-scheme, que se puede usar para detectar si el usuario solicitó que el sistema use un tema de color oscuro o claro. El error de seguimiento para esto es Agregar compatibilidad con la función 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.