Novidades no Chrome 102

Pete LePage

Veja o que é necessário saber:

  • Os PWAs instalados podem ser registrados como gerenciadores de arquivos, facilitando a abertura de arquivos diretamente do disco.
  • O atributo inert permite marcar partes do DOM como inativas.
  • A API Navigation facilita a navegação e as atualizações do URL em apps de página única.
  • E há muito mais.

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

API File Handling

A API File Handling permite que PWAs instalados sejam registrados no SO como um gerenciador de arquivos. Depois de registrado, o 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, IDEs, editores de texto e assim por diante.

Para adicionar a funcionalidade de processamento de arquivos ao PWA, atualize o manifesto do app da Web adicionando uma matriz file_handlers com detalhes sobre os tipos de arquivos que o PWA pode processar. Você vai precisar especificar o URL a ser aberto, os tipos 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 clientes.

"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. Os lançamentos são enfileirados até serem processados 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 mais detalhes.

A propriedade inert

A propriedade inert é um atributo global do HTML que informa ao navegador para ignorar eventos de entrada do usuário para um elemento, incluindo eventos de foco e eventos de tecnologias adaptativas.

Isso pode ser útil ao criar interfaces. Por exemplo, com uma caixa de diálogo modal, você quer "armadilha" o foco dentro da modal quando ela estiver visível. Ou, para uma gaveta que não está sempre visível para o usuário, adicionar inert garante que, enquanto a gaveta está fora da tela, um usuário de teclado não possa 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 nem ser clicado.

O inert tem suporte no Chrome 102 e será lançado no Firefox e no Safari.

Confira Introdução ao estado inerte para mais detalhes.

Muitos apps da Web dependem da capacidade de atualizar o URL sem a navegação nas páginas. Hoje, usamos a API History, mas ela é desajeitada e nem sempre funciona como esperado. Em vez de tentar corrigir as falhas da API History, a API Navigation faz uma revisão completa desse espaço.

Para usar a API Navigation, adicione um listener navigate no 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 é centralizado e é acionado para todos os tipos de navegação, seja quando o usuário realiza uma ação, como clicar em um link, enviar um formulário ou voltar e avançar, mesmo quando a navegação é acionada programaticamente. 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 ver detalhes completos e uma demonstração para testar.

E muito mais.

Claro que 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 permite que o navegador pesquise texto em regiões ocultas e revele essa seção se uma correspondência for encontrada.

Leitura adicional

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

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 103 for lançado, estarei aqui para contar as novidades do Chrome.