Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 68

Pete LePage

O comportamento de adicionar à tela inicial no Android está mudando para oferecer mais controle.
A API Page Lifecycle informa quando a guia foi suspensa ou restaurada.
E a API Payment Handler possibilita que apps de pagamento baseados na Web ofereçam suporte à experiência de solicitação de pagamento.

Meu nome é Pete LePage. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 68.

Quer a lista completa de alterações? Consulte a lista de alterações do repositório de origem do Chromium.

Mudanças no recurso "Adicionar à tela inicial"

Se o site atender aos critérios para adicionar à tela inicial, o Chrome não vai mais mostrar o banner "Adicionar à tela inicial". Em vez disso, você controla quando e como enviar solicitações ao usuário.

Para fazer uma solicitação ao usuário, escute o evento beforeinstallprompt e, em seguida, 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 clicar 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 mostrará uma minibarra de informações na primeira vez que o usuário visitar um site que atenda aos critérios de adicionar à tela inicial. Depois disso, a minibarra de informações não será mostrada novamente por um tempo.

O guia Mudanças no comportamento para adicionar à 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 essenciais, como memória, CPU, bateria e rede, podem ficar em excesso, levando a uma experiência ruim para o usuário.

Se o site estiver sendo executado em segundo plano, o sistema poderá suspendê-lo para economizar 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 de fazer isso, ele acionará o evento freeze, permitindo que você feche as conexões de rede ou do IndexedDB abertas ou salve qualquer estado de visualização não salvo. Em seguida, quando o usuário muda o foco da guia, o evento resume é disparado, e é possível reinicializar tudo que foi removido.

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 da API Page Lifecycle do Phil para conferir muitos detalhes, incluindo exemplos de código, dicas e muito mais. Confira a spec e um documento explicativo (em inglês) 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 das solicitações de pagamento, permitindo que apps de pagamento baseados na Web facilitem pagamentos diretamente na experiência dessa solicitação.

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 estiver instalado um service worker que possa processar a forma de pagamento especificada, ele será exibido na interface de solicitação de pagamento e o usuário poderá pagar com ele.

Eiji tem uma ótima postagem que mostra como implementar isso em sites de comerciantes e para gerenciadores de pagamento.

E muito mais

Estas são apenas algumas das mudanças do Chrome 68 para desenvolvedores. Há muito mais.

O conteúdo incorporado em uma iframe exige um gesto do usuário para navegar pelo contexto de navegação de nível superior para uma origem diferente.
Desde o Chrome 1, os valores cursor de CSS para grab e grabbing foram prefixados, agora aceitamos valores padrão sem prefixo. Finalmente.
E esse é um grande problema! O cache HTTP agora é ignorado ao solicitar atualizações para um service worker, alinhando o Chrome à especificação e a outros navegadores.

Novidades no DevTools

Consulte a página Novidades do Chrome DevTools para saber as novidades do DevTools no Chrome 68.

Depois, clique no botão Inscrever-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 69 for lançado, estarei aqui para contar as novidades do Chrome!