Novidades do Chrome 63

Pete LePage

E tem muito mais!

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

Quer a lista completa de mudanças? Confira a lista de mudanças do repositório de origem do Chromium.

Importações de módulos dinâmicos

A importação de módulos JavaScript é muito útil, mas, por ser estática, não é possível importar módulos com base nas condições do ambiente de execução.

Felizmente, isso mudou no Chrome 63, com a nova sintaxe de importação dinâmica. Ele permite que você carregue código dinamicamente em módulos e scripts no momento da execução. Ele pode ser usado para carregar um script apenas quando necessário, melhorando o desempenho do aplicativo.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Em vez de carregar todo o aplicativo quando o usuário acessa sua página pela primeira vez, é possível buscar os recursos necessários para fazer login. Seu carregamento inicial é pequeno e muito rápido. Depois que o usuário fizer login, carregue o restante e pronto.

Geradores e iteradores assíncronos

Escrever códigos que fazem qualquer tipo de iteração com funções async pode ser péssimo. Na verdade, é a parte principal da minha pergunta de codificação favorita.

Agora, com funções de gerador assíncrono e o protocolo de iteração assíncrona , o consumo ou a implementação de fontes de dados de streaming fica mais simples, e minha pergunta de programação fica muito mais fácil.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Os iteradores assíncronos podem ser usados em loops for-of e também para criar iteradores assíncronos personalizados usando fábricas de iteradores assíncronos.

Comportamento de rolagem

O rolagem é uma das maneiras mais importantes de interagir com uma página, mas alguns padrões podem ser difíceis de lidar. Por exemplo, o recurso puxar para atualizar dos navegadores, em que deslizar para baixo na parte de cima da página faz uma recarga forçada.

Antes, com a atualização completa da página.

Depois, atualize somente o conteúdo.

Em alguns casos, convém substituir esse comportamento e fornecer uma experiência própria. É o que o app Web progressivo do Twitter faz quando você desliza para baixo. Em vez de recarregar a página inteira, ele simplesmente adiciona novos tweets à visualização atual.

O Chrome 63 agora oferece suporte à propriedade CSS overscroll-behavior, facilitando a substituição do comportamento padrão de rolagem de overflow do navegador.

Você pode usá-lo para:

O melhor é que o overscroll-behavior não tem um efeito negativo na performance da página.

Mudanças na interface de permissões

Eu adoro as notificações por push da Web, mas estou muito frustrado com o número de sites que pedem permissão no carregamento da página, sem nenhum contexto. E não sou o único.

90% de todas as solicitações de permissão são ignoradas ou bloqueadas temporariamente.

No Chrome 59, começamos a resolver esse problema bloqueando temporariamente uma permissão se o usuário dispensar a solicitação três vezes. Agora, na versão m63, o Chrome para Android vai fazer solicitações de permissão em caixas de diálogo modais.

Isso não se aplica apenas a notificações push, mas a todas as solicitações de permissão. Se você pedir permissão no momento e no contexto adequados, vamos descobrir que os usuários têm duas vezes e meia mais chances de conceder a permissão.

E muito mais.

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

  • finally agora está disponível em instâncias de Promise e é invocado depois que um Promise é cumprido ou rejeitado.
  • A nova API JavaScript Device Memory ajuda você a entender as restrições de desempenho fornecendo dicas sobre a quantidade total de RAM no dispositivo do usuário. Você pode personalizar sua experiência no tempo de execução, reduzindo a complexidade em dispositivos de baixo custo, oferecendo aos usuários uma experiência melhor com menos frustrações.
  • A API Intl.PluralRules permite criar aplicativos que entendem a pluralização de um determinado idioma indicando qual forma plural se aplica a um determinado número e idioma. E pode ajudar com números ordinais.

Inscreva-se no nosso canal do YouTube 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 64 for lançado, vou estar aqui para contar as novidades do Chrome.