Novedades de Chrome 86

Pete LePage

Ahora Chrome 86 está comenzando a lanzarse de forma estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage. Trabajo y disparo desde casa. Veamos las novedades para desarrolladores en Chrome 86.

Acceso al sistema de archivos

Actualmente, puedes usar el elemento <input type="file"> para leer un archivo del disco. Para guardar los cambios, agrega download a una etiqueta de anclaje; se mostrará el selector de archivos y, luego, se guardará el archivo. No hay forma de escribir en el mismo archivo que abriste. Ese flujo de trabajo es molesto.

Con la API de File System Access (antes conocida como la API de Native File System), que se graduó de su prueba de origen y ahora está disponible de forma estable, puedes llamar a showOpenFilePicker(), que muestra un selector de archivos y, luego, muestra un controlador de archivo que puedes usar para leerlo.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Para guardar un archivo en el disco, puedes usar ese controlador de archivo que obtuviste antes o llamar a showSaveFilePicker() para obtener uno nuevo.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
captura de pantalla de solicitud de permiso
Mensaje al usuario que solicita permiso para escribir en un archivo.

Antes de escribir, Chrome verificará si el usuario otorgó permiso de escritura. Si no se otorgó ese permiso, Chrome le preguntará al usuario.

Si llamas a showDirectoryPicker(), se abrirá un directorio que te permitirá obtener una lista de archivos o crear archivos nuevos en ese directorio. Es perfecto para IDE o reproductores multimedia que interactúan con muchos archivos. Por supuesto, antes de que puedas escribir algo, el usuario debe otorgar permiso de escritura.

Hay mucho más acerca de la API, así que consulta el artículo sobre Acceso al sistema de archivos en web.dev.

Prueba de origen: WebHID

Control de juegos
Control de juegos.

Los dispositivos de interfaz humana, comúnmente conocidos como HID, toman información de... humanos o proporcionan salidas a ellos. Existe una larga lista de dispositivos de interfaz humana que son demasiado nuevos, demasiado antiguos o poco comunes para que los controladores de los sistemas de los sistemas puedan acceder a ellos.

La API de WebHID, que ahora está disponible como prueba de origen, proporciona una forma de acceder a estos dispositivos en JavaScript para solucionar este problema. Con WebHID, los juegos basados en la Web pueden aprovechar al máximo los controles de juegos, incluidos los botones, los joysticks, los sensores, los gatillos, los LED, los paquetes de ruidos y mucho más.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Las apps de videochat basadas en la Web pueden usar los botones de telefonía de bocinas especializadas para iniciar o finalizar llamadas, silenciar el audio y mucho más.

Selector de dispositivo HID
Selector de dispositivos HID.

Por supuesto, las APIs potentes como esta solo pueden interactuar con dispositivos cuando el usuario elige permitirlo explícitamente.

Consulta Cómo conectarse a dispositivos HID poco comunes para obtener más detalles, ejemplos, cómo comenzar y una demostración genial.


Prueba de origen: API de Multi-Screen Window Placement

Actualmente, puedes llamar a window.screen() para obtener las propiedades de la pantalla en la que se encuentra la ventana del navegador. Pero ¿qué sucede si tienes una configuración de varios monitores? El navegador solo te informará acerca de la pantalla en la que se encuentra actualmente.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

La API de Multi-Screen Window Placement inicia una prueba de origen en Chrome 86 y te permite enumerar las pantallas conectadas a tu máquina y colocar ventanas en pantallas específicas. La capacidad de colocar ventanas en pantallas específicas es fundamental para funciones como apps de presentación, apps de servicios financieros y mucho más.

Antes de poder usar la API, deberás solicitar permiso. De lo contrario, el navegador le pedirá al usuario que lo utilice por primera vez.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Una vez que el usuario otorga el permiso, la llamada a window.getScreens() muestra una promesa que se resuelve con un array de objetos Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Luego, puedo usar esa información cuando llamo a requestFullScreen() o colocando ventanas nuevas. Tom tiene todos los detalles en el artículo Cómo administrar varias pantallas con la API de posición de ventanas multipantalla en web.dev.

Más entornos

El nuevo selector de CSS, :focus-visible, te permite habilitar la misma heurística que usa el navegador cuando decide si mostrar el indicador de enfoque predeterminado.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Puedes personalizar el color, el tamaño o el tipo de número o viñeta para las listas con el seudoelemento ::marker de CSS.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Chrome Dev Summit se presentará en una pantalla cerca de ti, así que mantente atento a nuestro canal de YouTube para obtener más información.

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

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo o agreguemos nuestro feed RSS a tu lector de feeds.

Soy Pete LePage, y apenas se lance Chrome 87, estaré aquí para contarte las novedades de Chrome.