Novedades de Chrome 96

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage. Por último, estoy grabando en Studio. Veamos las novedades para los desarrolladores en Chrome 96.

Manifiesto id para AWP

Cuando un usuario instala una AWP, el navegador necesita un método para identificarla de manera 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 decidan, lo que generó 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 quitará la dependencia de start_url o de la ubicación del manifiesto, y podrás actualizar esos campos.

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

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

Herramientas para desarrolladores que muestran 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 Manifest del panel Application en Herramientas para desarrolladores.

Para una AWP nueva, puedes configurar 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",
  ...
}

Para obtener más información, consulta Cómo identificar de forma única las AWP con la propiedad de ID del manifiesto de app web.

Controladores de protocolo de URL para AWP

Las apps web pueden usar navigator.registerProtocolHandler() para registrarse como un controlador de protocolos. 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 facilita el envío de un correo electrónico.

A partir de Chrome 96, una AWP puede registrarse como un controlador de protocolo como parte de su instalación. Para hacerlo para tu AWP, agrega una propiedad protocol_handlers al manifiesto de la aplicación web, especifica el protocol que deseas controlar y el url que debería abrirse 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 aquí y no se puede registrar ningún protocolo. Por lo tanto, consulta el registro del controlador de protocolo de URL para AWP para obtener detalles completos y aprender a 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 óptimos en todos los casos.

Las Sugerencias de prioridad son una función experimental, disponible como prueba de origen a partir de Chrome 96, y puede 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, iframes y imágenes.

<!-- 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 Vuelos de Google. Esa imagen de fondo es el Largest Contentful Paint (LCP).

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

Veamos que se cargó 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 Cómo optimizar 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 la renderización.

Emular Chrome 100 en la cadena de UA

A principios del próximo año, llegaremos a Chrome 100, un número de versión de tres dígitos. Se debe verificar cualquier código que verifique los números de versión o analice la cadena UA para garantizar que admita 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 funciona como se espera.

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

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

Chrome Dev Summit

La Chrome Dev Summit está lista. Todos los videos y el contenido están disponibles en línea. Consulta el sitio de Chrome Dev Summit o, si te perdiste el discurso de apertura o la transmisión en vivo, consulta la lista de reproducción de CDS en el canal de YouTube para desarrolladores de Chrome.

Y mucho más.

Por supuesto que hay mucho más.

  • El almacenamiento en la memoria caché atrás y adelante, o bfcache, ahora está disponible de forma estable y alinea Chrome con Firefox y Safari.

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

Suscribirse

Para mantenerte al día, 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 de Chrome.