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();
}
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.
Leia mais
Isso abrange apenas alguns dos principais destaques. Acesse os links abaixo para ver outras mudanças no Chrome 86.
- Novidades do Chrome DevTools (86)
- Suspensões de uso e remoções do Chrome 86
- Atualizações do ChromeStatus.com para o Chrome 86
- Novidades em JavaScript no Chrome 86
- Lista de alterações do repositório de origem do Chromium
Inscrever-se
Quer ficar por dentro dos nossos vídeos, inscreva-se no nosso canal Chrome Developers no YouTube para receber uma notificação por e-mail sempre que lançarmos um novo vídeo ou adicionar nosso feed RSS ao seu leitor de feed.
Eu sou Pete LePage e, assim que o Chrome 87 for lançado, estarei aqui para informar a você as novidades do Chrome.