Novedades de Chrome 96

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage y, por fin, estoy grabando en el estudio. Comencemos y veamos las novedades para los desarrolladores en Chrome 96.

Manifiesto id para AWP

Cuando un usuario instala una AWP, el navegador necesita una forma de identificarla de forma inequívoca. Sin embargo, hasta hace poco, la especificación del manifiesto de la app web no especificaba cómo identificar una AWP, lo que dejaba que los navegadores decidieran y generaba diferentes implementaciones. En algunos navegadores, se usa start_url, mientras que en otros, se usa la ruta de acceso al archivo de manifiesto.

Eso hace que sea imposible cambiar cualquiera de esos campos sin interrumpir la experiencia de instalación. Ahora, hay una nueva propiedad id opcional que te permite definir de forma explícita el identificador que se usa para tu AWP.

Si agregas la propiedad id al manifiesto, se quita la dependencia de start_url o la ubicación del manifiesto, y se permite que se actualicen esos campos.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

La compatibilidad con la propiedad id llega a los navegadores para computadoras de escritorio basados en Chromium a partir de Chrome 96. La compatibilidad con dispositivos móviles, que actualmente usa la URL del manifiesto como el ID único, debería lanzarse en la primera mitad de 2022.

DevTools muestra el ID de app calculado

Si ya tienes una AWP en producción y quieres agregar un id a tu manifiesto, deberás usar el ID que asignó el navegador. Puedes encontrar el id en el panel Manifiesto del panel Aplicación en Dev Tools.

Para una nueva AWP, puedes establecer id en cualquier valor de cadena que desees, pero recuerda que no podrás cambiarlo en el futuro, así que elige con cuidado.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Consulta Cómo identificar de forma inequívoca las AWP con la propiedad del ID de manifiesto de la app web para obtener más información.

Controladores de protocolo de URL para AWP

Las apps web pueden usar navigator.registerProtocolHandler() para registrarse como controlador de protocolo. Por ejemplo, Gmail puede registrar el protocolo mailto. Luego, cuando un usuario haga clic en un vínculo con el prefijo mailto:, se abrirá Gmail, lo que le permitirá enviar un correo electrónico fácilmente.

A partir de Chrome 96, una AWP puede registrarse como controlador de protocolo como parte de su instalación. Para hacerlo en tu AWP, agrega una propiedad protocol_handlers al manifiesto de tu app web, especifica el protocol que deseas controlar y el url que se debe abrir cuando se haga clic en él.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Hay algunas restricciones, y no puedes registrar cualquier protocolo, así que consulta el registro de controladores de protocolo de URL para AWPs para obtener detalles completos y cómo puedes usar la sintaxis web+ para crear tus propios protocolos.

Sugerencias de prioridad (prueba de origen)

Cuando un navegador analiza una página web y comienza a descubrir y descargar recursos, como imágenes, secuencias de comandos o CSS, les asigna una prioridad de recuperación para intentar optimizar la carga de la página. Los navegadores son bastante buenos para asignar prioridades, pero es posible que no sean la opción óptima en todos los casos.

Las sugerencias de prioridad son una función experimental, disponible como una prueba de origen a partir de Chrome 96, y pueden ayudar a optimizar las métricas web esenciales. El atributo importance te permite especificar la prioridad para tipos de recursos, como CSS, fuentes, secuencias de comandos, imágenes y marcos de iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Por ejemplo, esta es la página de Vuelos de Google. Esa imagen de fondo es el procesamiento de imagen con contenido más grande (LCP).

Captura de pantalla de Vuelos de Google con una imagen de fondo grande

Veamos cómo se carga con y sin sugerencias de prioridad. Con la prioridad establecida en high en la imagen de fondo, el LCP disminuye de 2.6 segundos a 1.9 segundos.

Consulta Optimización de la carga de recursos con la API de Fetch Priority para obtener todos los detalles, cómo registrarte en la prueba de origen y algunos ejemplos excelentes de cómo puede ayudarte a mejorar el rendimiento de renderización.

Emula Chrome 100 en la cadena UA

A principios del próximo año, lanzaremos Chrome 100, un número de versión de tres dígitos. Se debe verificar cualquier código que compruebe los números de versión o analice la cadena de UA para asegurarse de que controle tres dígitos.

A partir de Chrome 96, hay una nueva marca #force-major-version-to-100 que cambiará el número de versión actual a 100, de modo que puedas asegurarte de que todo funcione como se espera.

Página de funciones experimentales de Chrome en la que se destaca la nueva opción #force-major-version-to-100

Para obtener más información, consulta Cómo forzar la versión principal de Chrome a 100 en la cadena de usuario-agente.

Chrome Dev Summit

La Chrome Dev Summit finalizó. Todos los videos y el contenido están disponibles en línea. Consulta el sitio de la Chrome Dev Summit o, si te perdiste la presentación principal o la transmisión en vivo, mira la playlist de la CDS en el canal de YouTube de Chrome Developers.

Y mucho más.

Por supuesto, hay mucho más.

  • La caché de Atrás y Adelante (bfcache) ahora está disponible en la versión estable y alinea a Chrome con Firefox y Safari.

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 96.

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, en cuanto se lance Chrome 97, estaré aquí para contarte las novedades.