Novedades de Chrome 102

Pete LePage

Tenga en cuenta lo siguiente:

  • Las AWP instaladas pueden registrarse como controladores de archivos, lo que facilita que los usuarios abran archivos directamente desde el disco.
  • El atributo inert te permite marcar partes del DOM como inertes.
  • La API de Navigation permite que las apps de una sola página controlen la navegación y las actualizaciones de la URL con mayor facilidad
  • Además, hay mucho más.

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

API de File Handling

La API de File Handling permite que las AWP instaladas se registren en el SO como un controlador de archivos. Una vez que se registra, un usuario puede hacer clic en un archivo para abrirlo con la AWP instalada. Esto es perfecto para las AWP que interactúan con archivos, como editores de imágenes, IDEs, editores de texto, etcétera.

Para agregar la funcionalidad de control de archivos a tu AWP, deberás actualizar el manifiesto de la app web. Para ello, agrega un array file_handlers con detalles sobre los tipos de archivos que puede controlar tu AWP. Deberás especificar la URL que quieres abrir, los tipos de MIME, un ícono para el tipo de archivo y el tipo de inicio. El tipo de lanzamiento define si se deben abrir varios archivos en un solo cliente o en varios.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Luego, para acceder a esos archivos cuando se inicia la AWP, debes especificar un consumidor para el objeto launchQueue. Los lanzamientos se ponen en cola hasta que el consumidor los controla.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Consulta Permite que las aplicaciones web instaladas sean controladores de archivos para obtener todos los detalles.

La propiedad inert

La propiedad inert es un atributo HTML global que le indica al navegador que ignore los eventos de entrada del usuario para un elemento, incluidos los eventos de enfoque y los eventos de tecnologías de accesibilidad.

Esto puede ser útil cuando se compilan IUs. Por ejemplo, con un diálogo modal, quieres "atrapar" el enfoque dentro de la ventana modal cuando esté visible. En el caso de un panel lateral que no siempre es visible para el usuario, agregar inert garantiza que mientras el panel lateral esté fuera de la pantalla, el usuario del teclado no pueda interactuar accidentalmente con él.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Aquí, se declaró inert en el segundo elemento <div>, por lo que todo el contenido dentro, incluidos <button> y <label>, no puede recibir el enfoque ni se puede hacer clic en él.

inert es compatible con Chrome 102 y estará disponible en Firefox y Safari.

Consulta Introducción a inert para obtener más detalles.

Muchas apps web dependen de la capacidad de actualizar la URL sin navegación de página. Hoy en día, usamos la API de History, pero es engorrosa y no siempre funciona como se espera. En lugar de intentar aplicar parches a los puntos débiles de la API de History, la API de Navigation reforma por completo este espacio.

Para usar la API de Navigation, agrega un objeto de escucha navigate en el objeto navigation global.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

El evento está fundamentalmente centralizado y se activará para todos los tipos de navegaciones, ya sea que el usuario haya realizado una acción, como hacer clic en un vínculo, enviar un formulario o ir hacia delante y hacia atrás, incluso cuando la navegación se active de manera programática. En la mayoría de los casos, permite que tu código anule el comportamiento predeterminado del navegador para esa acción.

Consulta Enrutamiento moderno del cliente: API de Navigation para obtener todos los detalles y una demostración que puedes probar.

Y mucho más.

Por supuesto que hay mucho más.

  • El objetivo de la nueva API de Sanitizer es compilar un procesador sólido para que las cadenas arbitrarias se inserten de forma segura en una página.
  • El atributo hidden=until-found permite que el navegador busque texto en regiones ocultas y revele esa sección si se encuentra una coincidencia.

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

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 103, estaré aquí para contarte las novedades de Chrome.