Novedades de Chrome 103

Pete LePage

Tenga en cuenta lo siguiente:

  • Hay un nuevo código de estado HTTP 103 que ayuda al navegador a decidir qué contenido precargar incluso antes de que comience a llegar la página.
  • La API de Local Font Access permite a las aplicaciones web enumerar y usar las fuentes instaladas en la computadora del usuario.
  • AbortSignal.timeout() es una forma más fácil de implementar tiempos de espera en las APIs asíncronas.
  • Además, hay mucho más.

Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 103.

Código de estado HTTP 103 103 (sugerencias tempranas)

Una forma de mejorar el rendimiento de la página es usar sugerencias de recursos. Le dan al navegador "sugerencias" sobre qué cosas podría necesitar más adelante. Por ejemplo, cuando se precargan archivos o se conecta a otro servidor.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Sin embargo, el navegador no puede actuar sobre esas sugerencias hasta que el servidor envíe al menos una parte de la página.

Imagina que el navegador solicita una página, pero el servidor necesita unos cientos de milisegundos para generarla. Hasta que el navegador comience a recibir la página, solo se queda allí y espera. Sin embargo, si el servidor sabe que la página siempre necesitará un conjunto determinado de subrecursos (por ejemplo, un archivo CSS, JavaScript y algunas imágenes), puede responder de inmediato con el nuevo código de estado HTTP 103 Sugerencias tempranas y pedirle al navegador que precarga esos subrecursos.

Luego, una vez que el servidor genera la página, puede enviarla con la respuesta HTTP 200 normal. A medida que aparece la página, el navegador ya comenzó a cargar los recursos requeridos.

Como se trata de un nuevo código de estado HTTP, su uso requiere actualizaciones en tu servidor.

Comienza a usar HTTP 103 Sugerencias tempranas:

API de Local Font Access

Las fuentes en la Web siempre han sido un desafío y, en especial, para las apps que permiten a los usuarios crear sus propios gráficos y diseños. Hasta ahora, las aplicaciones web solo podían usar fuentes web. No había forma de obtener una lista de las fuentes que el usuario había instalado en su computadora. Además, no había forma de acceder a los datos completos de la tabla de fuentes, algo fundamental si necesitas implementar tu propia pila de texto personalizada.

La nueva API de Local Font Access proporciona a las aplicaciones web la capacidad de enumerar las fuentes locales en el dispositivo del usuario y proporciona acceso a los datos de la tabla de fuentes.

Para obtener una lista de las fuentes instaladas en el dispositivo, primero deberás solicitar permiso.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Luego, llama a window.queryLocalFonts(). Devuelve un array de todas las fuentes instaladas en el dispositivo del usuario.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Si solo te interesa un subconjunto de fuentes, puedes filtrarlas agregando un parámetro postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Consulta el artículo de Tom Usa la tipografía avanzada con fuentes locales en web.dev para obtener más detalles.

Tiempos de espera más sencillos con AbortSignal.timeout()

En JavaScript, AbortController y AbortSignal se usan para cancelar una llamada asíncrona.

Por ejemplo, cuando realizas una solicitud fetch(), puedes crear un AbortSignal y pasarlo a fetch(). Si deseas cancelar el fetch() antes de que se muestre, llama a abort() en la instancia de AbortSignal. Hasta ahora, si quieres que se anule después de un período específico, debes unirlo en una setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Afortunadamente, eso ahora es más fácil con un nuevo método estático timeout() en AbortSignal. Muestra un objeto AbortSignal que se anula automáticamente después de una cantidad determinada de milisegundos. Lo que antes eran un puñado de líneas de código, ahora es solo una.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() es compatible con Chrome 103 y ya se encuentra en Firefox y Safari.

Y mucho más.

Por supuesto que hay mucho más.

  • Compartir en la Web ahora puede compartir el formato de archivo de imagen avif
  • Chromium ahora coincide con Firefox activando popstate inmediatamente después de los cambios en la URL. Ahora, el orden de los eventos es popstate y, luego, hashchange en ambas plataformas.
  • Y Element.isVisible() te indica si un elemento es visible o no.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 103.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers. 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 104, estaré aquí para contarte las novedades de Chrome.