Novidades do Chrome 91

Pete LePage

Veja o que é necessário saber:

Sou Pete LePage, trabalho e tiros de casa. Vamos conferir as novidades para desenvolvedores no Chrome 91.

Nomes sugeridos para a API File System Access

Uma das minhas APIs favoritas do projeto Fugu deste ano são as APIs de acesso ao sistema de arquivos. Depois que o usuário concede a permissão, os apps podem interagir com arquivos no dispositivo local do usuário, da mesma forma que outros apps instalados, permitindo que você crie uma experiência de usuário mais natural.

A partir do Chrome 91, agora é possível sugerir o nome e o local de um arquivo ou diretório para interagir. Para fazer isso, transmita uma propriedade suggestedName como parte das opções showSaveFilePicker.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

O mesmo vale para o diretório de início padrão. Por exemplo, um editor de texto provavelmente quer iniciar a caixa de diálogo para salvar ou abrir o arquivo na pasta documents. Já um editor de imagens provavelmente quer começar na pasta pictures. Você pode sugerir um diretório inicial padrão transmitindo uma propriedade startIn.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Confira a postagem Acesso ao sistema de arquivos de Tom para saber todos os detalhes.

Como ler arquivos da área de transferência

Há outra API nova e interessante para interagir com arquivos que é lançada no Chrome 91. No computador, os apps da Web agora podem ler arquivos da área de transferência. A leitura de arquivos da área de transferência está disponível no Safari desde 2018.

Obviamente, você não tem acesso irrestrito à área de transferência, então é necessário configurar um listener de eventos paste. Em seguida, no manipulador de eventos, você pode acessar o conteúdo de cada arquivo na área de transferência.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Compartilhar credenciais em sites afiliados

Caso seu site tenha vários domínios e eles compartilhem o mesmo back-end de gerenciamento de conta, agora será possível associá-los. Assim, os usuários poderão salvar credenciais uma vez e solicitar que o Gerenciador de senhas do Chrome as sugira para qualquer um dos seus sites afiliados.

Isso é ideal quando o site é veiculado em diferentes domínios de nível superior, como google.com e google.ca. Ou talvez você tenha vários nomes de domínio.

Para associar seus sites, você precisa criar um arquivo assetlinks.json que defina a relação entre os domínios. No exemplo abaixo, estou informando ao navegador que os domínios .com e .co.uk estão relacionados e podem compartilhar as credenciais.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Em seguida, hospede o arquivo assetlinks.json na pasta .well-known para cada domínio.

Essa funcionalidade vai ser lançada gradualmente no Chrome 91 e pode não estar disponível no primeiro dia. Confira Ativar o Chrome para compartilhar credenciais de login em sites afiliados para conferir os detalhes mais recentes.

E muito mais.

É claro que há muito mais.

Todos os vídeos do I/O 2021 já estão on-line, tem muito conteúdo, então não perca!

Web Transport, que antes era chamado de Quic Transport, passou por várias mudanças e está iniciando um novo teste de origem.

O Web Assembly SIMD concluiu o teste de origem e está disponível para todos os usuários.

Os elementos de formulário atualizados finalmente chegaram ao Android, melhorando a experiência do usuário.

O atributo media do elemento <link> será respeitado para link rel="icon", o que significa que você pode definir ícones diferentes com base em consultas de mídia. Por exemplo, ícones diferentes para os modos claro e escuro.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Leitura adicional

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

Inscrever-se

Para ficar por dentro das novidades, 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.

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