Novidades no Chrome 68

Pete LePage

E tem muito mais.

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

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

Mudanças em "Adicionar à tela inicial"

Se o site atender aos critérios de adição à tela inicial, o Chrome não vai mais mostrar o banner de adição à tela inicial. Em vez disso, você tem controle sobre quando e como solicitar ao usuário.

Para solicitar ao usuário, ouça o evento beforeinstallprompt, salve o evento e adicione um botão ou outro elemento de interface ao app para indicar que ele pode ser instalado.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Quando o usuário clica no botão de instalação, chame prompt() no evento beforeinstallprompt salvo. O Chrome vai mostrar a caixa de diálogo "Adicionar à tela inicial".


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

Para que você tenha tempo de atualizar seu site, o Chrome vai mostrar uma minibarra de informações na primeira vez que um usuário visitar um site que atenda aos critérios de adição à tela inicial. Depois de dispensada, a minibarra de informações não será mostrada novamente por um tempo.

Mudanças para adicionar ao comportamento da tela inicial tem todos os detalhes, incluindo exemplos de código que você pode usar e muito mais.

API Page Lifecycle

Quando um usuário tem um grande número de guias em execução, recursos importantes, como memória, CPU, bateria e rede, podem ser sobrecarregados, o que leva a uma experiência ruim do usuário.

Se o site estiver em execução em segundo plano, o sistema poderá suspendê-lo para conservar recursos. Com a nova API Page Lifecycle, agora é possível detectar e responder a esses eventos.

Por exemplo, se um usuário tiver uma guia em segundo plano por um tempo, o navegador poderá suspender a execução do script nessa página para economizar recursos. Antes disso, o evento freeze será acionado, permitindo que você feche conexões abertas IndexedDB ou de rede ou salve qualquer estado de visualização não salvo. Em seguida, quando o usuário foca a guia, o evento resume é acionado, e você pode reinicializar tudo o que foi desfeito.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

Confira a postagem de Phil sobre a API Page Lifecycle para mais detalhes, incluindo exemplos de código, dicas e muito mais. Encontre a especificação e um documento explicativo no GitHub.

API Payment Handler

A API Payment Request é uma maneira aberta e baseada em padrões de aceitar pagamentos. A API Payment Handler amplia o alcance do Payment Request, permitindo que apps de pagamento baseados na Web facilitem os pagamentos diretamente na experiência do Payment Request.

Como vendedor, adicionar um app de pagamento baseado na Web é tão fácil quanto adicionar uma entrada à propriedade supportedMethods.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Se um worker de serviço que pode processar a forma de pagamento especificada estiver instalado, ele vai aparecer na interface de solicitação de pagamento, e o usuário poderá pagar com ele.

Eiji tem um ótimo post que mostra como implementar isso em sites de comerciantes e gerenciadores de pagamento.

E muito mais.

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

Novidades no DevTools

Confira as Novidades do Chrome DevTools para saber o que há de novo no Chrome DevTools 68.

Inscrever-se

Depois, clique no botão inscrever-se no nosso canal do YouTube. Você vai receber uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 69 for lançado, estarei aqui para contar as novidades do Chrome.