Novidades do Chrome 96

Pete LePage

Veja o que é necessário saber:

Meu nome é Pete LePage, finalmente estou 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 forma de identificá-lo. No entanto, até recentemente, a especificação do manifesto do app da Web não especificava como identificar um PWA, deixando os navegadores decidirem e levando a implementações diferentes. O start_url é usado em alguns navegadores. Em outros, é usado o caminho para o arquivo de manifesto.

Isso impossibilita a alteração de 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 seu PWA.

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

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

O suporte para a propriedade id será disponibilizado 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, será lançado no primeiro semestre de 2022.

DevTools mostrando o ID do app calculado

Se você já tiver um PWA em produção e quiser adicionar um id ao seu manifesto, será necessário usar o ID atribuído pelo navegador. O id está no painel Manifest do painel Application nas Ferramentas para desenvolvedores.

Para um PWA totalmente novo, você pode definir id como qualquer valor de string, mas lembre-se de que não será possível alterá-lo no futuro, então escolha com cuidado.

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

Confira Identificar exclusivamente PWAs com a propriedade do ID do manifesto do app da Web para mais informações.

Gerenciadores de protocolo de URL para PWAs

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

A partir do Chrome 96, um PWA pode ser registrado como um gerenciador de protocolo como parte da instalação dele. Para fazer isso com o PWA, adicione uma propriedade protocol_handlers ao manifesto do seu app da Web, especifique a protocol que você quer processar e a url que deve ser aberta quando clicada.

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

Há algumas restrições, e não é possível simplesmente registrar qualquer protocolo. Confira o registro do gerenciador de protocolo de URL para PWAs (em inglês) para ver todos os detalhes e saber 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 ele uma prioridade de busca para tentar otimizar o carregamento da página. Os navegadores são bons em atribuir prioridades, mas podem não ser ideais em todos os casos.

As dicas de prioridade são um recurso experimental, disponível como teste de origem no 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, veja a página do Google Voos. Essa imagem de plano de fundo é a maior exibição de conteúdo (LCP, na sigla em inglês).

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

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

Confira Como otimizar o carregamento de recursos com a API Fetch Priority para saber todos os detalhes, como se registrar para o teste de origem e alguns ótimos exemplos de como isso 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, um número de 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 mudará o número da versão atual para 100, para garantir que tudo funcione conforme o esperado.

Página de sinalizações do Chrome destacando a nova opção #force-major-version-to-100

Veja mais detalhes em Forçar a versão principal do Chrome como 100 na string do user agent.

Conferência de Desenvolvedores do Chrome

A Conferência de Desenvolvedores do Chrome chegou ao fim. Todos os vídeos e conteúdo estão disponíveis on-line. Confira o site da Conferência de Desenvolvedores do Chrome ou, se você perdeu a palestra ou a transmissão ao vivo, confira a playlist do CDC no canal de desenvolvedores do Chrome no YouTube.

E muito mais.

Claro, há muito mais.

  • O cache de avanço e retorno (bfcache) agora está disponível na versão estável e alinha o Chrome com o Firefox e o Safari.

Leia mais

Esses são apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 96.

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube Chrome Developers para receber 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 dizer as novidades do Chrome.