Novidades do Chrome 95

Pete LePage

Veja o que é necessário saber:

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

Meu nome é Pete LePage, e estou trabalhando e gravando de casa. Vamos conferir as novidades para desenvolvedores no Chrome 95.

Roteamento com URLPattern

Quase todos os apps da Web dependem de roteamento de alguma forma, seja um código em execução 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. A URLPattern é uma nova API da plataforma da Web que padroniza a sintaxe do padrão de roteamento.

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

Se você já conhece a sintaxe de roteamento usada no Express, Ruby on Rails ou path-to-regexp, provavelmente vai reconhecer o padrão.

Para usá-lo, crie uma nova URLPattern() e forneça os detalhes que você quer para a correspondência de padrões. 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 Documentos Google. Vamos especificar o kind do arquivo, o arquivo ID e em qual mode ele será aberto. 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 versão 95 e mais recentes. E para navegadores ou ambientes como o Node, que ainda não oferecem suporte, use a biblioteca urlpattern-polyfill.

Confira o artigo do Jeff URLPattern traz roteamento para a plataforma da Web para saber mais detalhes.

Como escolher cores com a API Eyedropper

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

A API Eye Dropper, implementada por algumas pessoas da Microsoft, traz essa funcionalidade para a Web. Para usá-lo, 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 modernas da Web, ela funciona de forma assíncrona, para não bloquear a linha de execução principal. Quando o usuário clicar na cor que quiser, ela será resolvida com a cor em que ele clicou.

Você pode testar uma demonstração rápida e conferir o código no Glitch.

PWA Summit

Você assistiu ao PWA Summit no início deste mês?

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

Teste de origem de redução do user agent

A redução do user agent é uma tentativa de reduzir as plataformas de impressão digital passivas, reduzindo as informações na string do user agent apenas à marca e à versão significativa do navegador, à distinção entre computador e dispositivo móvel e à plataforma em execução.

A partir do Chrome 95, há um novo teste de origem que permite ativar o recebimento da string do UA reduzida. Isso vai permitir que você descubra e corrija 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 preparar e testar está pronto agora.

Todos os detalhes e o cronograma estão na postagem 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 ver 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.

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