Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 86

Pet LePage

Twitter GitHub Glitch Mastodon Página inicial

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

Veja o que é necessário saber:

A API File System Access agora está disponível na versão estável.
Há novos testes de origem para o HID da Web e a API Multi-screen Window Placement.
Há algumas novidades no CSS e muito mais.

Sou Pete LePage, trabalhando e gravando em casa. Vamos nos aprofundar e ver as novidades para os 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 mudanças, adicione download a uma tag âncora. O seletor de arquivos vai ser mostrado e o arquivo será salvo. Não há como gravar no mesmo arquivo que você abriu. Esse fluxo de trabalho é chato.

Com a API File System Access (antiga API Native File System), que com upgrade do teste de origem e agora está disponível de modo estável, você pode chamar showOpenFilePicker(), que mostra um seletor de arquivos e retorna um identificador 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 em disco, use o identificador que você aprendeu anteriormente ou chame showSaveFilePicker() para receber um novo identificador de arquivo.

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 da solicitação de permissão — Solicitar permissão ao usuário para gravar em um arquivo.

Antes de gravar, o Chrome verifica se o usuário concedeu permissão de gravação. Se essa permissão não tiver sido concedida, o Chrome solicitará primeiro o usuário.

Chamar showDirectoryPicker() abrirá um diretório, permitindo que você acesse uma lista de arquivos ou crie novos arquivos nesse diretório. Perfeito para coisas como ambientes de desenvolvimento integrado ou players de mídia que interagem com muitos arquivos. Obviamente, antes de você poder gravar algo, o usuário precisa conceder permissão de gravação.

A API tem muito mais a oferecer, então confira o artigo sobre Acesso ao sistema a arquivos (link em inglês) em web.dev.

Teste de origem: WebHID

Dispositivos de interface humana, geralmente chamados de HID, recebem ou fornecem saídas para humanos. Há uma longa lista de dispositivos de interface humana que são muito novos, antigos ou incomuns para serem acessados pelos drivers de dispositivos dos sistemas.

A API WebHID, agora disponível como um teste de origem, resolve isso 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, acionadores, LEDs, pacotes de som 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 baseados na Web podem usar os botões de telefonia em alto-falantes especializados para iniciar ou encerrar chamadas, silenciar o áudio e muito mais.

Obviamente, APIs poderosas como essa só podem interagir com dispositivos quando o usuário permite explicitamente.

Confira Como se conectar a dispositivos HID incomuns para ver mais detalhes, exemplos, como começar e uma demonstração interessante.

Teste de origem: API Multi-Screen Window Placement

Hoje, é possível conseguir as propriedades da tela em que a janela do navegador está chamando window.screen(). Mas e se você tiver uma configuração de várias telas? O navegador vai informar apenas sobre a tela em que está atualmente.

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 posicionar janelas em telas específicas. É fundamental poder posicionar janelas em telas específicas para apps de apresentação, de serviços financeiros e muito mais.

Antes de usar a API, é necessário solicitar permissão. Caso contrário, o navegador solicitará o usuário 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 conceder a permissão, chamar 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 que o navegador usa para decidir se vai exibir 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 para listas com o pseudoelemento ::marker do CSS.

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

A Conferência de Desenvolvedores Chrome será lançada em uma tela perto de você. Fique ligado no nosso canal do YouTube para mais informações.

Novidades do Chrome 86

Acesso ao sistema de arquivos

Teste de origem: WebHID

Teste de origem: API Multi-Screen Window Placement

E mais

Leia mais

Inscrever-se