Novidades do Chrome 96

Pete LePage

Veja o que é necessário saber:

Aqui é Pete LePage, finalmente gravando no estúdio. Vamos conferir as novidades para desenvolvedores no Chrome 96.

Manifesto id para PWAs

Quando um usuário instala um PWA, o navegador precisa de uma maneira de identificá-lo de forma exclusiva. No entanto, até recentemente, a especificação do manifesto do app da Web não especificava como identificar um PWA, deixando a decisão para os navegadores, o que leva a diferentes implementações. Em alguns navegadores, o start_url é usado, enquanto em outros, o caminho para o arquivo de manifesto é usado.

Isso torna impossível mudar qualquer um desses campos sem interromper a experiência de instalação. Agora, há uma nova propriedade id opcional, que permite definir explicitamente o identificador usado para sua PWA.

Adicionar a propriedade id ao manifesto remove a dependência do start_url ou do local do manifesto e permite que esses campos sejam atualizados.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

O suporte à propriedade id foi lançado em navegadores baseados no Chromium para computador a partir do Chrome 96. O suporte para dispositivos móveis, que atualmente usa o URL do manifesto como o ID exclusivo, deve ser lançado no primeiro semestre de 2022.

DevTools mostrando o ID calculado do app

Se você já tiver um PWA em produção e quiser adicionar um id ao manifesto, use o ID atribuído pelo navegador. É possível encontrar o id no painel Manifest do painel Application nas ferramentas do desenvolvedor.

Para um PWA novo, você pode definir o id como qualquer valor de string, mas não será possível mudar isso no futuro. Escolha com cuidado.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Confira Como identificar de forma exclusiva os PWAs com a propriedade ID do manifesto do app da Web para mais informações.

Gerenciadores de protocolos de URL para PWAs

Os apps da Web podem usar navigator.registerProtocolHandler() para se registrar como um gerenciador de protocolo. Por exemplo, o Gmail pode registrar o protocolo mailto. Quando um usuário clica em um link com o prefixo mailto:, o Gmail é aberto, facilitando o envio de e-mails.

A partir do Chrome 96, um PWA pode se registrar como um gerenciador de protocolo como parte da instalação. Para fazer isso no PWA, adicione uma propriedade protocol_handlers ao manifesto do app da Web, especifique o protocol que você quer processar e o url que será aberto quando clicado.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Há algumas restrições aqui, e você não pode registrar qualquer protocolo. Confira o Registro do gerenciador de protocolos de URL para PWAs para conferir todos os detalhes e como usar a sintaxe web+ para criar seus próprios protocolos.

Dicas de prioridade (teste de origem)

Quando um navegador analisa uma página da Web e começa a descobrir e fazer o download de recursos, como imagens, scripts ou CSS, ele atribui a eles uma prioridade de busca para tentar otimizar o carregamento da página. Os navegadores são muito bons em atribuir prioridades, mas podem não ser ideais em todos os casos.

Os Hints de prioridade são um recurso experimental, disponível como um teste de origem a partir do Chrome 96, e podem ajudar a otimizar as Core Web Vitals. O atributo importance permite especificar a prioridade para tipos de recursos, como CSS, fontes, scripts, imagens e iframes.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Por exemplo, esta é a página do Google Voos. Essa imagem de plano de fundo é a maior exibição de conteúdo (LCP).

Captura de tela do Google Voos com imagem de plano de fundo grande

Vamos ver o carregamento com e sem dicas de prioridade. Com a prioridade definida como high na imagem de plano de fundo, o LCP cai de 2,6 segundos para 1,9 segundos.

Consulte Como otimizar o carregamento de recursos com a API Fetch Priority para todos os detalhes, como se inscrever no teste de origem e alguns exemplos de como ela pode ajudar a melhorar o desempenho de renderização.

Emular o Chrome 100 na string UA

No início do ano que vem, vamos lançar o Chrome 100, uma versão com três dígitos. Qualquer código que verifique números de versão ou analise a string do UA precisa ser verificado para garantir que ele processe três dígitos.

A partir do Chrome 96, há uma nova flag #force-major-version-to-100 que vai mudar o número da versão atual para 100, para que você possa ter certeza de que tudo funciona como esperado.

Página &quot;Chrome Flags&quot; destacando a nova opção #force-major-version-to-100

Confira mais detalhes em Forçar a versão principal do Chrome para 100 na string do User-Agent.

Chrome Dev Summit

O Chrome Dev Summit acabou. Todos os vídeos e conteúdos estão disponíveis on-line. Confira o site da Chrome Dev Summit. Se você perdeu a apresentação principal ou a transmissão ao vivo, confira a playlist do CDS no canal do YouTube do Chrome Developers.

E muito mais.

Claro que há muito mais.

  • O cache de ida e volta, ou bfcache, agora está disponível na versão estável e faz com que o Chrome fique alinhado com o Firefox e o Safari.

Leitura adicional

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

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