Novidades do Chrome 73

No Chrome 73, adicionamos suporte para:

E tem muito mais!

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

Registro de alterações

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

Os Progressive Web Apps funcionam em qualquer lugar

Os Progressive Web Apps fornecem uma experiência instalável, semelhante a um app, criada e fornecida diretamente pela Web. No Chrome 73, adicionamos suporte para macOS, trazendo suporte para Progressive Web Apps em todas as plataformas de computador, 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, ou seja, ele sempre carrega e funciona na mesma velocidade, independentemente da conexão de rede. Eles oferecem experiências avançadas e envolventes com recursos modernos da Web que aproveitam ao máximo os recursos do dispositivo.

Os usuários podem instalar seu PWA pelo 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 app nativo: os usuários encontram e iniciam os apps no mesmo local que outros apps, eles são executados na própria janela, aparecem no seletor de tarefas, os ícones podem mostrar um selo de notificação e assim por diante.

Queremos diminuir a lacuna de recursos entre a Web e a nativa para fornecer uma base sólida a aplicativos modernos oferecidos na Web. Estamos trabalhando para adicionar novos recursos de plataforma da Web que ofereçam acesso a recursos como o sistema de arquivos, o wake lock, a adição de um selo de ambiente à barra de endereço para informar aos usuários que seu PWA pode ser instalado, a instalação de políticas para empresas e muito mais.

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

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

Depois, itere a partir daí.

Trocas HTTP assinadas

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 enviado por outras partes. Esse é o aspecto principal: ele mantém a integridade e a atribuição do site original.

Troca assinada: a essência

Isso separa a origem do conteúdo do servidor que o entrega. Porém, o conteúdo está assinado, como se fosse entregue pelo servidor. Quando o navegador carrega essa troca assinada, ele pode mostrar com segurança seu URL na barra de endereço, porque a assinatura na troca indica que o conteúdo vem da sua origem.

As trocas HTTP assinadas permitem a entrega mais rápida de conteúdo para os usuários, possibilitando aproveitar os benefícios de uma CDN sem precisar ceder o controle da chave privada do certificado. A equipe de AMP está planejando usar trocas HTTP assinadas 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 (em inglês) do Kinuko para detalhes sobre como começar.

Folhas de estilo edificáveis

As folhas de estilo construíveis, novidade do 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 página para conseguir uma referência à instância CSSStyleSheet subjacente e defina o estilo.

Diagrama mostrando a preparação e a aplicação do CSS

O uso desse método tende a levar a sobrecarga da folha de estilo. Pior ainda, ele causa um flash de conteúdo sem estilo. Com as folhas de estilo construtivas, é possível definir e preparar estilos CSS compartilhados e, em seguida, aplicá-los a várias raízes de sombra ou ao documento com facilidade e sem duplicação.

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

Começar é simples: 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 a publicação Construable Style Sheets: Entrecionar estilos reutilizáveis de Jason Miller para mais detalhes e exemplos de código (links em inglês).

E muito mais.

Essas são apenas algumas das mudanças no Chrome 73 para desenvolvedores. É claro, há muito mais.

  • matchAll(), é um novo método de correspondência de expressão regular no protótipo de string e retorna uma matriz contendo 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 da sombra do Blink, agora corresponde ao Firefox e ao Safari.
  • O modo escuro para a interface do Chrome agora é compatível com 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 use um tema de cores claras ou escuras. O bug de acompanhamento é Adicionar suporte ao recurso de mídia CSS prefers-color-scheme no Chrome e no Firefox.

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no canal de desenvolvedores do Chrome no YouTube. Você vai receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Eu sou Pete LePage e, assim que o Chrome 74 for lançado, terei aqui as novidades: