Novedades de Chrome 91

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajando y disparando desde casa. Veamos las novedades para desarrolladores en Chrome 91.

Nombres sugeridos para la API de File System Access

Una de mis APIs favoritas que surgieron del proyecto Fugu este año son las APIs de Acceso al sistema de archivos. Una vez que el usuario otorga el permiso, las apps pueden interactuar con los archivos en el dispositivo local del usuario, de la misma manera que lo hacen otras apps instaladas, lo que te permite crear una experiencia del usuario más natural.

A partir de Chrome 91, ahora puedes sugerir el nombre y la ubicación de un archivo o directorio con el que interactuar. Para hacerlo, pasa una propiedad suggestedName como parte de las opciones showSaveFilePicker.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Lo mismo ocurre con el directorio de inicio predeterminado. Por ejemplo, es probable que un editor de texto quiera iniciar el diálogo para guardar el archivo o abrir el archivo en la carpeta documents. Por otro lado, un editor de imágenes probablemente desee comenzar en la carpeta pictures. Puedes sugerir un directorio de inicio predeterminado si pasas una propiedad startIn.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Consulta la publicación de Tom sobre Acceso al sistema de archivos para obtener detalles completos.

Cómo leer archivos del portapapeles

Hay otra API nueva genial para interactuar con los archivos que llegan en Chrome 91. En el escritorio, las aplicaciones web ahora pueden leer archivos del portapapeles. (la lectura de archivos del portapapeles está disponible en Safari desde 2018).

Por supuesto, no tienes acceso ilimitado al portapapeles, por lo que deberás configurar un objeto de escucha de eventos paste. Luego, en el controlador de eventos, puedes acceder al contenido de cada archivo del portapapeles.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Compartir credenciales en sitios afiliados

Si tu sitio tiene varios dominios y comparten el mismo backend de administración de cuentas, ahora puedes asociar tus sitios entre sí, lo que permite a los usuarios guardar credenciales una vez y hacer que el Administrador de contraseñas de Chrome las sugiera a cualquiera de tus sitios afiliados.

Esto es ideal cuando tu sitio se publica desde diferentes dominios de nivel superior, como google.com y google.ca. O, quizás, tienes varios nombres de dominio.

Para asociar tus sitios web, deberás crear un archivo assetlinks.json que defina la relación entre los dominios. En el siguiente ejemplo, se indica al navegador que los dominios .com y .co.uk están relacionados y que pueden compartir las credenciales.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Luego, aloja el archivo assetlinks.json en la carpeta .well-known para cada dominio.

Esta función comenzará a lanzarse de forma gradual en Chrome 91 y es posible que no esté disponible desde el primer día, así que consulta Habilita Chrome para compartir credenciales de acceso entre sitios afiliados para obtener los detalles más recientes.

Y mucho más.

Por supuesto que hay mucho más.

Todos los videos de I/O 2021 están en línea ahora. Hay un excelente contenido allí, así que revísalos.

Web Transport, antes llamado Quic Transport, experimentó varios cambios y comenzará una nueva prueba de origen.

Web Assembly SIMD finalizó su prueba de origen y está disponible para todos los usuarios.

Los elementos del formulario actualizados finalmente llegaron a Android, lo que mejoró la experiencia del usuario.

Además, se respetará el atributo media del elemento <link> para link rel="icon", lo que significa que puedes definir diferentes íconos según las consultas de contenido multimedia. Por ejemplo, íconos diferentes para los modos oscuro y claro.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

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

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