Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 91

Pete LePage

Veja o que é necessário saber:

Os apps da Web que interagem com arquivos agora podem sugerir nomes de arquivos e diretórios ao usar a API File System Access.
É possível ler arquivos da área de transferência.
Se o site tiver mais de um domínio e eles compartilharem o mesmo back-end de gerenciamento de conta, você poderá informar ao Chrome que eles são iguais, permitindo que o Gerenciador de senhas sugira as credenciais corretas.
Todos os vídeos do I/O estão disponíveis no canal do YouTube Chrome Developers.
E há muito mais.

Sou Pete LePage, trabalhando e gravando em casa. Vamos conferir as novidades para desenvolvedores no Chrome 91.

Nomes sugeridos para a API File System Access

Uma das minhas APIs favoritas que sairá do projeto Fugu este 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 do 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 interação. 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 inicial padrão. Por exemplo, um editor de texto provavelmente quer iniciar a caixa de diálogo para salvar arquivos ou abrir o arquivo na pasta documents. 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 mais detalhes.

Ler arquivos da área de transferência

Há outra API nova e incrível para interagir com arquivos que chegam 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.

Como você não tem acesso irrestrito à área de transferência, será necessário configurar um listener de eventos paste. Em seguida, no manipulador de eventos, é possível 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 contas, agora será possível associar seus sites entre si, permitindo que os usuários salvem credenciais uma vez e o Gerenciador de senhas do Chrome as sugira para qualquer um dos seus sites afiliados.

Isso é ideal quando seu site é veiculado de 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 de cada domínio.

Essa funcionalidade começará a ser lançada gradualmente no Chrome 91 e pode não estar disponível no primeiro dia. Portanto, consulte Permitir que o Chrome compartilhe credenciais de login entre sites afiliados para ver os detalhes mais recentes.

E muito mais.

Claro, há muito mais.

Todos os vídeos do I/O 2021 estão disponíveis on-line agora. Tem conteúdo incrível, então confira!

Transporte da Web, anteriormente chamado de Transporte Quic, passou por várias mudanças e está iniciando um novo teste de origem.

O Web Assembly SIMD terminou 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.

Além disso, 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">

Novidades do Chrome 91

Nomes sugeridos para a API File System Access

Ler arquivos da área de transferência

Compartilhar credenciais em sites afiliados

E muito mais.

Leia mais

Fazer inscrição