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 antes de que la página comience a llegar.
  • 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 APIs asíncronas.
  • Hay mucho más.

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

Código de estado HTTP 103 103: sugerencias iniciales

Una forma de mejorar el rendimiento de la página es usar sugerencias de recursos. Le dan al navegador "sugerencia" sobre las cosas que podría necesitar más adelante. Por ejemplo, cargar archivos previamente o conectarse a un servidor diferente.

<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 en función de esas sugerencias hasta que el servidor envíe al menos parte de la página.

Imagina que el navegador solicita una página, pero el servidor requiere unos cientos de milisegundos para generarla. Hasta que el navegador comienza 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 recursos secundarios, por ejemplo, un archivo CSS, algo de JavaScript y algunas imágenes, puede responder de inmediato con el nuevo código de estado de sugerencias anticipadas HTTP 103 y pedirle al navegador que precargue esos recursos secundarios.

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

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

Comienza a usar HTTP 103 Sugerencias iniciales:

API de Local Font Access

Las fuentes de la Web siempre fueron un desafío, en especial para las apps que permiten a los usuarios crear sus propios gráficos y diseños. Hasta ahora, las apps 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, lo que es fundamental si necesitas implementar tu propia pila de texto personalizada.

La nueva API de Local Font Access permite a las aplicaciones web 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 debes 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(). Muestra 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 Cómo usar tipografía avanzada con fuentes locales en web.dev para obtener todos los detalles.

Tiempos de espera más fáciles 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 quieres cancelar el fetch() antes de que se muestre, llama a abort() en la instancia de AbortSignal. Hasta ahora, si querías que se anulara después de un período específico, debías unirlo en un setTimeout().

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

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

Por suerte, eso se volvió más fácil con un nuevo método estático timeout() en AbortSignal. Muestra un objeto AbortSignal que se aborta automáticamente después de la cantidad determinada de milisegundos. Lo que solía ser 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 está disponible en Firefox y Safari.

Y mucho más.

Por supuesto, hay mucho más.

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

Lecturas adicionales

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

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

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