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 nos aprofundar e ver as novidades para desenvolvedores no Chrome 73!

Registro de alterações

Estes são apenas alguns dos principais destaques. Acesse os links abaixo para conferir outras mudanças no Chrome 73.

• Lista de mudanças no 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, oferecendo suporte a Progressive Web Apps para todas as plataformas de computador: Mac, Windows, ChromeOS e Linux, bem como 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 avançadas e envolventes por meio de recursos modernos da Web que aproveitam ao máximo as funcionalidades 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 se integra ao SO para se comportar como um aplicativo nativo: os usuários o encontram e o iniciam do mesmo lugar que outros apps, são executados na própria janela, aparecem no seletor de tarefas, os ícones podem mostrar selos 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 de plataforma da Web que dão acesso a recursos como o sistema de arquivos, wake lock, adição de um selo ambiente à barra de endereço para informar aos usuários que seu 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

O Signed HTTP Exchanges (SXG), parte de uma tecnologia emergente chamada Pacotes da Web, agora está disponível no Chrome 73. Um Signed HTTP Exchange possibilita a criação de conteúdo "portátil" que pode ser entregue por outras partes, e esse é o aspecto principal, ele 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 ele 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 do Google para melhorar os URLs de AMP e acelerar os cliques nos resultados da pesquisa.

Confira a postagem Signed HTTP Exchanges do Kinuko para detalhes sobre 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.

Usar esse método tende a levar ao excesso de 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. A adoção de uma folha de estilo é rápida e síncrona depois que a planilha é 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 usada para detectar se o usuário solicitou que o sistema usasse um tema de cores claras ou escuras. O bug de acompanhamento é Adicionar suporte ao recurso de mídia CSS prefers-color-scheme para Chrome e 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.