Novidades do Chrome 94

Pete LePage

Veja o que é necessário saber:

  • O espaço de cor padrão para elementos <canvas> agora é definido formalmente na especificação como sRGB, e você pode mudar para Display P3.
  • O WebCodecs é uma nova maneira de baixo nível de acessar codecs de áudio e vídeo integrados, importante para jogos de streaming, editores de vídeo e assim por diante.
  • O WebGPU começa o teste de origem.
  • O PWA Summit vai acontecer de 6 a 7 de outubro.
  • E há muito mais.

Meu nome é Pete LePage, trabalho e filmo de casa. Vamos conferir as novidades para desenvolvedores no Chrome 94.

Espaço de cores padrão para elementos canvas

A forma como a cor é renderizada na tela é fundamental para alguns usuários. Para fotógrafos, ilustradores e muitos outros, as cores na tela precisam corresponder ao que é impresso. A partir do Chrome 94, os elementos <canvas> são totalmente gerenciados por cores usando sRGB. Anteriormente, o sRGB era uma convenção, mas não era definido explicitamente na especificação.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Mais importante, agora é possível especificar qual espaço de cores usar ao criar um objeto 2D de contexto de renderização <canvas> ou um objeto ImageData, incluindo o espaço de cores P3.

WebCodecs

Colocar um vídeo em uma página é bem fácil. No entanto, se você precisar fazer algo um pouco mais complexo e interagir com os componentes de uma transmissão de vídeo, será difícil e, normalmente, será necessário usar o Web Assembly para enviar seus próprios codecs.

No entanto, enviar seu próprio codec significa escrever código que o navegador já tem e não pode aproveitar a aceleração de hardware. A API Web Codecs permite usar os componentes de mídia e codecs que já estão no navegador.

Pessoalmente, sempre tive dificuldade para lembrar das opções de linha de comando corretas para codificar um vídeo para a Web ou converter um GIF em um arquivo de vídeo. Usando as APIs disponíveis com o WebCodecs, pude criar rapidamente um app da Web que lê um arquivo e exporta os arquivos corretos necessários para a Web.

O caminho de uma tela ou de uma ImageBitmap para a rede ou para o armazenamento
O caminho de um Canvas ou ImageBitmap para a rede ou para o armazenamento

Apps da Web que exigem controle total sobre a forma como o conteúdo de mídia é processado, como editores de vídeo, videoconferências, apps de streaming e assim por diante. O acesso aos navegadores com controles de mídia integrados é enorme.

Mostrar algo útil em 30 segundos é difícil, então confira Processamento de vídeo com WebCodecs no web.dev para uma análise detalhada com muito código e algumas demonstrações legais.

WebGPU

A WebGPU é uma nova API que expõe recursos gráficos modernos, especificamente Direct3D 12, Metal e Vulkan. Ele é semelhante ao WebGL, mas oferece acesso a recursos mais avançados da GPU e também oferece suporte para a realização de cálculos gerais na GPU.

Diagrama de arquitetura mostrando a conexão da WebGPU entre as APIs do SO e o Direct3D 12, Metal e Vulkan.
Diagrama da arquitetura da WebGPU

Ele está iniciando um teste de origem no Chrome 94, e o Safari e o Firefox estão trabalhando nas implementações.

Uma demonstração do Babylon.js de um mar agitado sendo simulado usando o recurso de sombreador de computação da WebGPU.

François tem um ótimo artigo, Acesso a recursos modernos de GPU com a WebGPU no web.dev com os detalhes e compara o desempenho da multiplicação de matrizes executada na CPU em comparação com a GPU. Aqui vai uma dica. A GPU vence.

PWA Summit

O PWA Summit vai acontecer de 6 a 7 de outubro. É uma conferência on-line sem custo financeiro focada em ajudar todos a ter sucesso com Progressive Web Apps. O PWA Summit é uma colaboração entre pessoas de várias empresas diferentes envolvidas na criação de tecnologias de PWA: Google, Intel, Microsoft e Samsung.

Há muitas palestras e conteúdos incríveis. Saiba mais e faça sua inscrição em PWASummit.org. Esperamos por você!

E muito mais.

Claro que há muito mais.

O método priorizado scheduler.postTask() permite programar tarefas e mudar dinamicamente as prioridades delas ou cancelá-las todas.

Se você já teve problemas com um redimensionamento quando as barras de rolagem aparecem, a propriedade scrollbar-gutter vai deixar você feliz. Ele fornece controle sobre a presença de gutters de barra de rolagem, permitindo que você impeça mudanças de layout à medida que o conteúdo se expande.

O uso do WebSQL em contextos de terceiros está descontinuado, e a remoção está prevista para o Chrome 97. O padrão do Web SQL Database foi abandonado em novembro de 2010. Ele nunca foi implementado no Firefox e foi descontinuado no Safari em 2019. Ele será descontinuado e removido do Chrome quando o uso for baixo o suficiente. Se você ainda estiver usando o WebSQL, agora é um bom momento para começar a planejar a migração.

A API de teclado virtual oferece mais controle sobre como e quando o teclado virtual na tela é mostrado. Ele permite controlar explicitamente qualquer comportamento de rolagem ou mudanças no layout quando o teclado aparece ou desaparece.

Leitura adicional

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

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