Novidades no Chrome 55

Assistir no YouTube

  • async e await permitem escrever um código baseado em promessas como se fosse síncrono, mas sem bloquear a linha de execução principal.
  • Os eventos de ponteiro oferecem uma maneira unificada de lidar com todos os eventos de entrada.
  • Sites adicionados à tela inicial recebem automaticamente a permissão de armazenamento permanente.

E há muito mais.

Meu nome é Pete LePage. Confira as novidades para os desenvolvedores do Chrome 55.

Eventos de ponteiro

Direcionar para coisas na Web era simples. Você tinha um mouse, movia-o, às vezes apertava botões e só isso. Mas isso não funciona tão bem aqui.

Os eventos de toque são bons, mas, para oferecer suporte a toque e mouse, era necessário oferecer suporte a dois modelos de evento:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

O Chrome agora permite o gerenciamento unificado de entradas pelo envio de PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

Os eventos de ponteiro unificam o modelo de entrada de ponteiro para o navegador, reunindo toque, canetas e mouses em um único conjunto de eventos. Eles são compatíveis com o IE11, Edge, Chrome, Opera e parcialmente compatíveis com o Firefox.

Confira Apontando para o futuro para mais detalhes.

async e await

Pode ser difícil considerar o JavaScript assíncrono. Veja essa função com todos os seus "lindos retornos de chamada":

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

Reescrevê-lo com promises ajuda a evitar o problema de aninhamento:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

No entanto, o código baseado em promessas ainda pode ser difícil de ler quando há longas cadeias de dependências assíncronas.

O Chrome agora oferece suporte às palavras-chave JavaScript async e await, permitindo que você escreva JavaScript baseado em promessa que pode ser estruturado e legível como um código síncrono.

Em vez disso, nossa função assíncrona pode ser simplificada para o seguinte:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake tem uma ótima postagem: Async Functions: tornando as promessas mais simples com todos os detalhes.

Armazenamento permanente

O teste de origem do armazenamento permanente foi encerrado. Agora você pode marcar o armazenamento da Web como persistente, impedindo que o Chrome limpe automaticamente o armazenamento do seu site.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

Além disso, sites com alto engajamento, que foram adicionados à tela inicial ou que ativaram as notificações push recebem automaticamente a permissão de persistência.

Confira a postagem de Chris Wilson sobre Armazenamento permanente (em inglês) para saber mais detalhes e saber como solicitar armazenamento permanente para seu site.

Hifenação automática do CSS

A hifenização automática do CSS, um dos recursos de layout mais solicitados do Chrome, agora tem suporte no Android e no Mac.

API Web Share

Por fim, agora é mais fácil invocar recursos de compartilhamento nativos com a nova API Web Share, disponível como um teste de origem. Paul (Sr. Web Intents) Kinlan tem todos os detalhes na postagem do Navigator Share.

Encerramento

Essas são apenas algumas das mudanças no Chrome 55 para desenvolvedores.

Se você quiser ficar por dentro do Chrome e saber o que está por vir, inscreva-se e confira os vídeos da Conferência de Desenvolvedores do Chrome para ver em detalhes alguns dos recursos incríveis em que a equipe do Chrome está trabalhando.

Eu sou Pete LePage e, assim que o Chrome 56 for lançado, estarei aqui para contar as novidades do Chrome.