En Chrome 73, agregamos compatibilidad con lo siguiente:
- Crear contenido portátil es más fácil con los intercambios HTTP firmados.
- Cambiar los estilos de forma dinámica es mucho más fácil con las hojas de estilo con construcción.
- La compatibilidad con las apps web progresivas llega a Mac y ofrece compatibilidad con AWP para todas las plataformas de escritorio y dispositivos móviles, lo que facilita la creación de apps instalables en la Web.
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.
- Lista de cambios del repositorio de código fuente de Chromium
- Actualizaciones de ChromeStatus.com para Chrome 73
- Bajas y eliminaciones de Chrome 73
- Actualizaciones de contenido multimedia en Chrome 73
- Novedades de JavaScript 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.
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.
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.
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 propiedadesimagesrcset
yimagesizes
para que coincidan con los atributossrcset
ysizes
deHTMLImageElement
. - 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 mediosprefers-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.