Novidades do Chrome 86

Pete LePage

O Chrome 86 está começando a ser lançado na versão estável.

Veja o que é necessário saber:

Meu nome é Pete LePage, trabalho e filmo de casa. Vamos conferir as novidades para desenvolvedores no Chrome 86.

Acesso ao sistema de arquivos

Atualmente, é possível usar o elemento <input type="file"> para ler um arquivo do disco. Para salvar as alterações, adicione download a uma tag de âncora. Ela vai mostrar o seletor de arquivos e salvar o arquivo. Não é possível gravar no mesmo arquivo que você abriu. Esse fluxo de trabalho é irritante.

Com a API File System Access (antiga API Native File System), que graduou do seu teste de origem e agora está disponível na versão estável, você pode chamar showOpenFilePicker(), que mostra um seletor de arquivos e, em seguida, retorna um identificador que pode ser usado para ler o arquivo.

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

Para salvar um arquivo no disco, use o identificador de arquivo que você recebeu anteriormente ou chame showSaveFilePicker() para receber um novo identificador.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
captura de tela do aviso de permissão
Solicita ao usuário a permissão para gravar em um arquivo.

Antes de gravar, o Chrome vai verificar se o usuário concedeu a permissão de gravação. Se a permissão de gravação não tiver sido concedida, o Chrome vai solicitar a permissão ao usuário.

Chamar showDirectoryPicker() vai abrir um diretório, permitindo que você receba uma lista de arquivos ou crie novos arquivos nesse diretório. Perfeito para coisas como IDEs ou players de mídia que interagem com muitos arquivos. É claro que, antes de gravar qualquer coisa, o usuário precisa conceder a permissão de gravação.

Há muito mais na API. Confira o artigo sobre acesso ao sistema de arquivos no web.dev.

Teste de origem: WebHID

Controle de jogos
Controle de jogo.

Os dispositivos de interface humana, comumente chamados de HID, recebem entrada ou fornecem saída para... humanos. Há uma longa cauda de dispositivos de interface humana que são muito novos, muito antigos ou muito incomuns para serem acessados pelos drivers de dispositivo do sistema.

A API WebHID, agora disponível como um teste de origem, resolve esse problema fornecendo uma maneira de acessar esses dispositivos em JavaScript. Com o WebHID, os jogos baseados na Web podem aproveitar ao máximo os gamepads, incluindo todos os botões, joysticks, sensores, gatilhos, LEDs, pacotes de vibração e muito mais.

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);
});

Os apps de chat por vídeo na Web podem usar os botões de telefonia em alto-falantes especializados para iniciar ou encerrar chamadas, desativar o áudio e muito mais.

Seletor de dispositivos HID
Seletor de dispositivo HID.

É claro que APIs poderosas como essa só podem interagir com dispositivos quando o usuário permite isso explicitamente.

Consulte Como se conectar a dispositivos HID incomuns para mais detalhes, exemplos, dicas e uma demonstração.


Teste de origem: API Multi-Screen Window Placement

Atualmente, é possível acessar as propriedades da tela em que a janela do navegador está chamando window.screen(). Mas e se você tiver uma configuração com vários monitores? O navegador informará apenas sobre a tela em que está no momento.

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

A API Multi-Screen Window Placement inicia um teste de origem no Chrome 86. Ela permite enumerar as telas conectadas à máquina e colocar janelas em telas específicas. Poder colocar janelas em telas específicas é fundamental para apps de apresentação, de serviços financeiros e muito mais.

Antes de usar a API, você precisa solicitar permissão. Caso contrário, o navegador vai solicitar que o usuário faça isso quando você tentar usá-lo pela primeira vez.

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

Depois que o usuário concede a permissão, a chamada window.getScreens() retorna uma promessa que é resolvida com uma matriz 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, ...},
// ]

Posso usar essas informações ao chamar requestFullScreen() ou colocar novas janelas. Tom tem todos os detalhes no artigo Como gerenciar várias telas com a API Multi-Screen Window Placement em web.dev.

E mais

O novo seletor de CSS, :focus-visible, permite ativar a mesma heurística usada pelo navegador ao decidir se vai mostrar o indicador de foco padrão.

/* 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);
}

É possível personalizar a cor, o tamanho ou o tipo de número ou marcador de lista com o pseudoelemento ::marker do CSS.

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

O Chrome Dev Summit vai chegar a uma tela perto de você. Fique ligado no nosso canal do YouTube para mais informações.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 86.

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo ou adicione nosso feed RSS ao seu leitor de feeds.

Meu nome é Pete LePage, e assim que o Chrome 87 for lançado, estarei aqui para contar as novidades do Chrome.