Novidades do Chrome 95

Pete LePage

O que você precisa saber:

  • O roteamento fica mais fácil com o URLPattern integrado ao navegador.
  • A API Eye Dropper (em inglês) oferece uma ferramenta integrada para selecionar cores.
  • Há um novo teste de origem que permite ativar o recebimento da string de UA reduzida agora.
  • Os vídeos da PWA Summit estão todos on-line.
  • E tem muito mais.

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

Roteamento com URLPattern

Quase todos os apps da Web dependem do roteamento de alguma forma, seja um código executado em um servidor que mapeia um caminho para arquivos no disco ou uma lógica em um app de página única que atualiza o DOM quando o URL muda. URLPattern é uma nova API de plataforma da Web que padroniza a sintaxe de padrões de roteamento.

Ele se baseia em frameworks atuais, facilitando a execução de tarefas comuns de roteamento. Por exemplo, correspondência com URLs completos ou um nome de caminho de URL, retornando informações sobre o token e as correspondências de grupo.

Se você já conhece a sintaxe de roteamento usada no Express, Ruby on Rails ou path-to-regexp, isso provavelmente vai parecer familiar.

Para usar, crie um novo URLPattern() e forneça os detalhes que você quer comparar com o padrão. Os padrões podem conter caracteres curinga, grupos de tokens nomeados, grupos de expressões regulares e modificadores de grupo.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Por exemplo, vamos analisar o URLPattern que pode ser usado pelo Google Docs. Vamos especificar o kind do arquivo, o ID e o mode para abrir. Para usar o padrão, podemos chamar test() ou exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

O URLPattern é ativado por padrão no Chrome e no Edge 95 e versões mais recentes. Para navegadores ou ambientes como o Node, que ainda não oferecem suporte a ele, use a biblioteca urlpattern-polyfill.

Confira o artigo de Jeff URLPattern traz roteamento para a plataforma da Web para detalhes completos.

Como escolher cores com a API Eye Dropper

Quase todos os apps de design que já usei têm um conta-gotas, o que facilita descobrir a cor de algo. Alguns navegadores têm a capacidade de conta-gotas integrada ao <input type=color>, mas não é o ideal.

A API conta-gotas, implementada por algumas pessoas da Microsoft, traz essa funcionalidade para a Web. Para usar, crie uma nova instância EyeDropper() e chame open() nela.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Como muitas outras APIs da Web modernas, ela funciona de forma assíncrona para não bloquear a linha de execução principal. Quando o usuário clicar na cor desejada, ela será resolvida com a cor clicada.

PWA Summit

Você acompanhou o PWA Summit no início deste mês?

Foi ótimo ver tantas pessoas falando sobre PWAs e compartilhando suas experiências. Se você perdeu, os vídeos já estão disponíveis. Confira em PWASummit.org ou no canal do PWA Summit no YouTube.

Teste de origem da redução do user agent

A redução do user agent é uma iniciativa para reduzir as superfícies de impressão digital passiva, diminuindo as informações na string do user agent para apenas a marca e a versão significativa do navegador, a distinção entre computador e dispositivo móvel e a plataforma em que ele está sendo executado.

A partir do Chrome 95, há um novo teste de origem que permite ativar o recebimento da string do UA reduzida agora. Assim, é possível descobrir e corrigir problemas antes que a UA reduzida se torne o comportamento padrão no Chrome.

As mudanças serão aplicadas de forma incremental em várias versões, mas tudo o que você precisa para se preparar e testar já está pronto.

Todos os detalhes e o cronograma estão na postagem do teste de origem da redução do user agent em developer.chrome.com.

E muito mais.

Claro que há muito mais.

Leitura adicional

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

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.

Sou Pete LePage e, assim que o Chrome 96 for lançado, vou estar aqui para contar as novidades do Chrome!