Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 95

Pete LePage

Veja o que é necessário saber:

O roteamento fica mais fácil com URLPattern incluído no navegador.
A API Eye Dropper fornece uma ferramenta integrada para selecionar cores.
Há um novo teste de origem que permite ativar o recebimento da string do UA reduzida agora.
Os vídeos do PWA Summit são todos on-line.
E há muito mais.

Sou Pete LePage, trabalhando e gravando em 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 é alterado. URLPattern é uma nova API de plataforma da Web que padroniza a sintaxe do padrão de roteamento.

Ela 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 do URL e, em seguida, retornar informações sobre o token e as correspondências do grupo.

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

Para usá-lo, crie um novo URLPattern() e forneça os detalhes aos quais você quer uma correspondência de 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 pelos Documentos Google. Vamos especificar o kind do arquivo, o arquivo ID e o mode em que ele será aberto. Em seguida, 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"}, ...},
//   ...
// }

URLPattern está ativado por padrão no Chrome e no Edge 95 ou versões mais recentes. Para navegadores ou ambientes como Node, que ainda não são compatíveis, use a biblioteca urlpattern-polyfill.

Confira o artigo de Jeff URLPattern oferece roteamento para plataforma da Web para mais detalhes.

Como escolher cores com a API Eye Dropper

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

A API de conta-gotas, implementada por algumas pessoas da Microsoft, traz essa funcionalidade para a Web. Para usá-lo, crie uma nova instância de 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 que não bloqueie a linha de execução principal. Quando o usuário clicar na cor que ele quer, isso será resolvido 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 PWAs e compartilhando suas experiências. Se você perdeu, os vídeos já estão disponíveis, então não deixe de conferir em PWASummit.org ou no canal PWA Summit do YouTube.

Teste de origem de redução de user agent

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

A partir do Chrome 95, há um novo teste de origem que permite ativar agora o recebimento da string do UA reduzida. Isso permitirá que você descubra e corrija problemas antes que o UA reduzido se torne o comportamento padrão no Chrome.

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

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

E muito mais.

Claro, há muito mais.

Se você está seguindo o trabalho da API Storage Foundation, há um novo teste de origem para identificadores de acesso.
O WebAssembly agora oferece suporte ao processamento de exceções, que permite que o código interrompa o fluxo de controle quando uma exceção for gerada.
O Chrome 100 será lançado no ano que vem. O que significa que é hora de garantir que seu código possa lidar com mais de dois dígitos.

Novidades do Chrome 95

Roteamento com URLPattern

Como escolher cores com a API Eye Dropper

PWA Summit

Teste de origem de redução de user agent

E muito mais.

Leia mais

Fazer inscrição

Roteamento com `URLPattern`