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 dar a você mais controle.
A API Page Lifecycle informa quando a guia foi suspensa ou restaurada.
E a API Payment Handler permite que aplicativos de pagamento da Web ofereçam suporte à experiência do Payment Request.

Meu nome é Pete LePage. Vamos nos aprofundar e conhecer 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ê controla quando e como enviar solicitações 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 IU 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, a chamada prompt() no evento beforeinstallprompt salvo faz com que o Chrome mostre 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 disso, a minibarra de informações não será mostrada novamente por um tempo.

Mudanças no comportamento do 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 ser consumidos em excesso, provocando uma experiência ruim para o 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 IndexedDB ou de rede 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 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 forma aberta e baseada em padrões de aceitar pagamentos. A Payment Handler API amplia o alcance do Payment Request, permitindo que aplicativos de pagamento da 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 pagamentos.

E muito mais.

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

O conteúdo incorporado em um iframe exige um gesto do usuário para navegar no contexto de navegação de nível superior para uma origem diferente.
Desde o Chrome 1, os valores CSS cursor para grab e grabbing têm um prefixo. Agora, oferecemos suporte aos valores padrão sem prefixo. Por fim.
E essa é uma grande novidade! O cache HTTP agora é ignorado ao solicitar atualizações para um service worker, trazendo o Chrome em conformidade com a especificação e 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. 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.