Novidades no Chrome 102

Pete LePage

Veja o que é necessário saber:

  • Os PWAs instalados podem ser registrados como gerenciadores de arquivos, o que facilita a abertura de arquivos diretamente do disco para os usuários.
  • O atributo inert permite marcar partes do DOM como inertes.
  • Com a API Navigation, é mais fácil para apps de página única gerenciar a navegação e as atualizações do URL.
  • E há muito mais.

Meu nome é Pete LePage. Vamos conhecer as novidades para desenvolvedores no Chrome 102.

API File Handling

A API File Handling permite que os PWAs instalados sejam registrados no SO como um gerenciador de arquivos. Depois de registrado, um usuário pode clicar em um arquivo para abri-lo com o PWA instalado. Isso é perfeito para PWAs que interagem com arquivos, por exemplo, editores de imagem, ambientes de desenvolvimento integrado, editores de texto e assim por diante.

Para adicionar a funcionalidade de gerenciamento de arquivos ao PWA, é necessário atualizar o manifesto do app da Web adicionando uma matriz file_handlers com detalhes sobre os tipos de arquivos que podem ser processados pelo PWA. É necessário especificar o URL a ser aberto, os tipos de MIME, um ícone para o tipo de arquivo e o tipo de inicialização. O tipo de inicialização define se vários arquivos precisam ser abertos em um único cliente ou em vários.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Em seguida, para acessar esses arquivos quando o PWA for iniciado, especifique um consumidor para o objeto launchQueue. As inicializações são colocadas na fila até serem processadas pelo consumidor.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Confira Permitir que os aplicativos da Web instalados sejam gerenciadores de arquivos para saber todos os detalhes.

A propriedade inert

A propriedade inert é um atributo HTML global que instrui o navegador a ignorar eventos de entrada do usuário em um elemento, incluindo eventos de foco e de tecnologias adaptativas.

Isso pode ser útil ao criar IUs. Por exemplo, com uma caixa de diálogo modal, você quer "interceptar" o foco dentro do modal quando ele estiver visível. Ou, para uma gaveta que nem sempre é visível para o usuário, adicionar inert garante que, enquanto a gaveta estiver fora da tela, um usuário de teclado não poderá interagir acidentalmente com ela.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Aqui, inert foi declarado no segundo elemento <div>. Portanto, todo o conteúdo contido nele, incluindo <button> e <label>, não pode receber foco ou ser clicado.

O inert é compatível com o Chrome 102 e será lançado para o Firefox e o Safari.

Confira Introdução ao inert para mais detalhes.

Muitos apps da Web dependem da capacidade de atualizar o URL sem uma navegação na página. Atualmente, usamos a API History, mas ela é complexa e nem sempre funciona como esperado. Em vez de tentar corrigir os problemas da API History, a API Navigation reformula completamente esse espaço.

Para usar a API Navigation, adicione um listener navigate ao objeto navigation global.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

O evento é fundamentalmente centralizado e é disparado em todos os tipos de navegação, independentemente de o usuário ter realizado uma ação, como clicar em um link, enviar um formulário ou voltar e avançar, mesmo quando a navegação for acionada de forma programática. Na maioria dos casos, ele permite que o código substitua o comportamento padrão do navegador para essa ação.

Confira Roteamento moderno do lado do cliente: a API Navigation para conferir todos os detalhes e conferir uma demonstração.

E muito mais.

Claro, há muito mais.

  • O objetivo da nova API Sanitizer é criar um processador robusto para que strings arbitrárias sejam inseridas com segurança em uma página.
  • O atributo hidden=until-found possibilita que o navegador pesquise texto em regiões ocultas e revele essa seção se uma correspondência for encontrada.

Leia mais

Esses são apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 102.

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Eu sou Pete LePage e assim que o Chrome 103 for lançado, estarei aqui para dizer as novidades do Chrome.