Novidades do Chrome 73

Pete LePage

No Chrome 73, adicionamos suporte para:

• Criação de conteúdo portátil mais fácil com trocas HTTP assinadas.
• A mudança dinâmica de estilos fica muito mais fácil com folhas de estilo configuráveis.
• O suporte a Progressive Web Apps chegou ao Mac, trazendo suporte a PWAs para todas as plataformas para computador e dispositivos móveis, facilitando a criação de apps instaláveis entregues pela Web.

E tem muito mais!

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

Registro de alterações

Este artigo aborda apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 73.

• Lista de mudanças do repositório de origem do Chromium
• Atualizações do ChromeStatus.com para o Chrome 73
• Supressões e remoções do Chrome 73
• Atualizações de mídia do Chrome 73
• Novidades do JavaScript no Chrome 73

Os Progressive Web Apps funcionam em qualquer lugar

Os Progressive Web Apps oferecem uma experiência instalável semelhante a um app, criada e entregue diretamente pela Web. No Chrome 73, adicionamos suporte ao macOS, trazendo suporte a Progressive Web Apps para todas as plataformas de área de trabalho, como Mac, Windows, ChromeOS e Linux, além de dispositivos móveis, simplificando o desenvolvimento de apps da Web.

Um Progressive Web App é rápido e confiável, sempre carregando e executando na mesma velocidade, independentemente da conexão de rede. Eles oferecem experiências ricas e engajadoras com recursos modernos da Web que aproveitam ao máximo os recursos do dispositivo.

Os usuários podem instalar o PWA no menu de contexto do Chrome ou você pode promover diretamente a experiência de instalação usando o evento beforeinstallprompt. Depois de instalado, um PWA é integrado ao SO para se comportar como um aplicativo nativo: os usuários encontram e iniciam o app no mesmo lugar que outros apps, ele é executado na própria janela, aparece no alternador de tarefas, os ícones podem mostrar o ícone de notificação e assim por diante.

Queremos fechar a lacuna de recursos entre a Web e a plataforma nativa para oferecer uma base sólida para aplicativos modernos entregues na Web. Estamos trabalhando para adicionar novos recursos da plataforma da Web que dão acesso a recursos como o sistema de arquivos, bloqueio de tela, a adição de um selo ambiental à barra de endereço para informar aos usuários que o PWA pode ser instalado, instalação de políticas para empresas e muito mais.

Se você já está criando uma PWA para dispositivos móveis, não há diferença para uma PWA para computadores. Na verdade, se você já usou o design responsivo, provavelmente já está tudo pronto. Sua base de código única vai funcionar em computadores e dispositivos móveis. Se você está começando a usar PWAs, vai se surpreender com a facilidade de criação.

1. Adicionar um manifesto
2. Criar um conjunto de ícones
3. Adicionar um modelo de service worker

Em seguida, itere a partir daí.

Signed HTTP Exchanges

As Signed HTTP Exchanges (SXGs), parte de uma tecnologia emergente chamada Pacotes da Web, agora estão disponíveis no Chrome 73. Com o Signed HTTP Exchange, é possível criar conteúdo "portátil" que pode ser entregue por terceiros. Esse é o aspecto principal, que mantém a integridade e a atribuição do site original.

Isso separa a origem do conteúdo do servidor que o envia, mas, como ele está assinado, é como se estivesse sendo enviado pelo seu servidor. Quando o navegador carrega essa troca assinada, ele pode mostrar seu URL com segurança na barra de endereço porque a assinatura na troca indica que o conteúdo veio originalmente da sua origem.

As trocas HTTP assinadas permitem a entrega mais rápida de conteúdo para os usuários, tornando possível aproveitar os benefícios de um CDN sem precisar ceder o controle da chave privada do certificado. A equipe do AMP planeja usar trocas HTTP assinhadas nas páginas de resultados da Pesquisa Google para melhorar os URLs de AMP e acelerar os cliques nos resultados da pesquisa.

Confira a postagem Signed HTTP Exchanges de Kinuko para saber como começar.

Folhas de estilo configuráveis

As folhas de estilo construíveis, novas no Chrome 73, oferecem uma nova maneira de criar e distribuir estilos reutilizáveis, o que é particularmente importante ao usar o Shadow DOM.

Sempre foi possível criar folhas de estilo usando JavaScript. Crie um elemento <style> usando document.createElement('style'). Em seguida, acesse a propriedade da planilha para receber uma referência à instância CSSStyleSheet e definir o estilo.

O uso desse método tende a aumentar o tamanho da folha de estilo. Pior ainda, ele causa um flash de conteúdo sem estilo. As folhas de estilo com capacidade de construção permitem definir e preparar estilos CSS compartilhados e, em seguida, aplicar esses estilos a várias raízes shadow ou ao documento com facilidade e sem duplicação.

As atualizações de um CSSStyleSheet compartilhado são aplicadas a todas as raízes em que ele foi adotado, e a adoção de uma folha de estilo é rápida e síncrona assim que a folha é carregada.

É simples começar: crie uma nova instância de CSSStyleSheet e use replace ou replaceSync para atualizar as regras da folha de estilo.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Confira o post Constructable Stylesheets: seamless reusable styles de Jason Miller para mais detalhes e exemplos de código.

E muito mais.

Estas são apenas algumas das mudanças no Chrome 73 para desenvolvedores. Há muitas outras.

• matchAll() é um novo método de correspondência de expressão regular no protótipo de string e retorna uma matriz que contém as correspondências completas.
• O elemento <link> agora oferece suporte às propriedades imagesrcset e imagesizes para corresponder aos atributos srcset e sizes de HTMLImageElement.
• A implementação do raio de desfoque de sombra do Blink agora corresponde ao Firefox e ao Safari.
• O modo escuro para a interface do Chrome agora tem suporte para Mac, e o suporte para Windows está a caminho. Além disso, há um trabalho em uma consulta de mídia CSS: prefers-color-scheme, que pode ser usado para detectar se o usuário solicitou que o sistema use um tema de cores claro ou escuro. O bug de rastreamento para isso é Adicionar suporte ao recurso de mídia CSS prefers-color-scheme para o Chrome e o Firefox.

Inscrever-se

Se quiser ficar por dentro dos nossos vídeos, 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 74 for lançado, vou estar aqui para contar as novidades do Chrome.