Novedades de Chrome 86

Pete LePage

Ya está empezando a lanzarse a la versión estable en Chrome 86.

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. ¡Comencemos y veamos las novedades para los desarrolladores en Chrome 86!

Acceso al sistema de archivos

Actualmente, puedes usar el elemento <input type="file"> para leer un archivo desde el disco. Para guardar los cambios, agrega download a una etiqueta de ancla. 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 API de Native File System), que ya finalizó su prueba de origen y ahora está disponible en versión estable, puedes llamar a showOpenFilePicker(), que muestra un selector de archivos y, luego, muestra un identificador de archivo que puedes usar para leer el archivo.

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 el controlador de archivo que obtuviste antes o llamar a showSaveFilePicker() para obtener un controlador de archivo 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 del mensaje de permiso
Se le solicita al usuario permiso para escribir en un archivo.

Antes de escribir, Chrome verificará si el usuario otorgó el permiso de escritura. Si no lo hizo, Chrome le pedirá primero 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 escribir algo, el usuario debe otorgar permiso de escritura.

La API tiene mucho más para ofrecer, así que consulta el artículo sobre el 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, reciben entradas de los humanos o les proporcionan salidas. Hay una cola larga de dispositivos de interfaz humana que son demasiado nuevos, demasiado antiguos o demasiado poco comunes para que los controladores de dispositivos del sistema puedan acceder a ellos.

La API de WebHID, que ahora está disponible como una prueba de origen, resuelve este problema, ya que proporciona una forma de acceder a estos dispositivos en JavaScript. Con WebHID, los juegos basados en la Web pueden aprovechar al máximo los gamepads, incluidos todos los botones, joysticks, sensores, activadores, LED, paquetes de vibración 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 en bocinas especializadas para iniciar o finalizar llamadas, silenciar el audio y mucho más.

Selector de dispositivos HID
Selector de dispositivos HID.

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

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


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? Lo siento, el navegador solo te informará sobre la pantalla en la que se encuentra.

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, que te permite enumerar las pantallas conectadas a tu máquina y colocar ventanas en pantallas específicas. Poder colocar ventanas en pantallas específicas es fundamental para funciones como las apps de presentación, las de servicios financieros y mucho más.

Para poder usar la API, deberás solicitar permiso. De lo contrario, el navegador le pedirá al usuario cuando lo intentes usar 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, llamar 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 llame a requestFullScreen() o coloque ventanas nuevas. Tom tiene todos los detalles en su artículo Cómo administrar varias pantallas con la API de Multi-Screen Window Placement en web.dev.

Y mucho más

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 de las listas con el pseudoelemento ::marker de CSS.

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

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

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

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Chrome Developers, y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo o agregues nuestro feed RSS a tu lector de feeds.

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