Novedades de Chrome 102

Pete LePage

Tenga en cuenta lo siguiente:

  • Los AWP instalados se pueden registrar como controladores de archivos, lo que facilita a los usuarios abrir archivos directamente desde el disco.
  • El atributo inert te permite marcar partes del DOM como inactivas.
  • La API de Navigation facilita que las apps de una sola página controlen la navegación y las actualizaciones de la URL.
  • Y hay mucho más.

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

API de File Handling

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

Para agregar la funcionalidad de control de archivos a la AWP, deberás actualizar el manifiesto de la app web y agregar un array file_handlers con detalles sobre los tipos de archivos que puede controlar la AWP. Deberás especificar la URL que se abrirá, los tipos mime, un ícono para el tipo de archivo y el tipo de lanzamiento. El tipo de inicio 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 inicie 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 IU. Por ejemplo, con un diálogo modal, quieres "atrapar" el enfoque dentro de la ventana modal cuando sea visible. O bien, 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, un 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í, inert se declaró en el segundo elemento <div>, por lo que todo el contenido que contiene, incluidos <button> y <label>, no puede recibir enfoque ni hacer clic.

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

Consulta Presentamos inert para obtener más detalles.

Muchas apps web dependen de la capacidad de actualizar la URL sin una navegación de página. En la actualidad, usamos la API de History, pero es engorrosa y no siempre funciona como se espera. En lugar de intentar corregir los problemas de la API de History, la API de Navigation revisa 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 es 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 retroceder y avanzar, incluso cuando la navegación se active de forma 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: la API de Navigation para obtener detalles completos y una demostración que puedes probar.

Y mucho más.

Por supuesto, hay mucho más.

  • La nueva API de Sanitizer tiene como objetivo 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 solo abarca algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 102.

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