Novedades de Chrome 91

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. Comencemos y veamos las novedades para desarrolladores en Chrome 91.

Nombres sugeridos para la API de File System Access

Una de mis APIs favoritas que surgió del proyecto Fugu este año son las 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 ello, pasa una propiedad suggestedName como parte de las opciones de 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 o abrir el archivo en la carpeta documents. Mientras que un editor de imágenes probablemente quiera comenzar en la carpeta pictures. Para sugerir un directorio de inicio predeterminado, pasa una propiedad startIn.

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

Consulta la publicación de Tom sobre Acceso al sistema de archivos para conocer todos los detalles.

Cómo leer archivos del portapapeles

Hay otra API nueva y genial para interactuar con archivos que llega a Chrome 91. En computadoras, las apps web ahora pueden leer archivos del portapapeles. (La lectura de archivos desde el portapapeles está disponible en Safari desde 2018).

Por supuesto, no tienes acceso sin restricciones 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 en el portapapeles.

window.addEventListener('paste', onPaste);

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

Cómo 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 que los usuarios guarden las credenciales una vez y que el Administrador de contraseñas de Chrome se las sugiera en 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 tal vez tienes varios nombres de dominios.

Para asociar tus sitios web, deberás crear un archivo assetlinks.json que defina la relación entre los dominios. En el siguiente ejemplo, le digo al navegador que los dominios .com y .co.uk están relacionados y 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 de cada dominio.

Esta funcionalidad comenzará a lanzarse gradualmente en Chrome 91 y es posible que no esté disponible el primer día, así que consulta Cómo habilitar Chrome para que comparta credenciales de acceso en sitios afiliados y obtén los detalles más recientes.

Y mucho más.

Por supuesto, hay mucho más.

Ya están en línea todos los videos de I/O 2021. Hay contenido fantástico, así que no te los pierdas.

Web Transport, que antes se llamaba Quic Transport, sufrió 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 mejora la experiencia del usuario.

Y el atributo media del elemento <link> se respetará 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 claro y oscuro.

<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 que aparecen a continuación para ver cambios adicionales en Chrome 91.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube para desarrolladores de Chrome 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.