Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 68

Pet LePage

Twitter GitHub Glitch Mastodon Página inicial

O comportamento "Adicionar à tela inicial" do Android está mudando para oferecer mais controle.
A API Page Lifecycle informa quando sua guia foi suspensa ou restaurada.
E a API Payment Handler permite que apps de pagamento baseados na Web ofereçam suporte à experiência de Payment Request.

E tem muito mais!

Meu nome é Pete LePage. Vamos conhecer as novidades do Chrome 68 para os desenvolvedores!

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

Mudanças no recurso Adicionar à tela inicial

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

Para solicitar que o usuário detecte o evento beforeinstallprompt, salve-o 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 clicar no botão de instalação, chame prompt() no evento beforeinstallprompt salvo. Em seguida, o Chrome mostra 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 um usuário visitar um site que atenda aos critérios de adicionar à tela inicial. Depois de dispensada, a minibarra de informações não será mostrada novamente por um tempo.

O artigo Mudanças no comportamento da adição à tela inicial tem todos os detalhes, incluindo exemplos de código que podem ser usados e muito mais.

API Page Lifecycle

Quando um usuário tem um grande número de guias em execução, recursos críticos, como memória, CPU, bateria e rede, podem ficar sobrecarregados, 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, você pode detectar e responder a esses eventos.

Por exemplo, se um usuário teve uma guia em segundo plano por um tempo, o navegador pode optar por 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 é acionado, e você pode reinicializar tudo o 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 do Phil sobre a API Page Lifecycle para muito mais 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 estende o alcance da solicitação de pagamento, permitindo que apps de pagamento baseados na Web facilitem os pagamentos diretamente na experiência da solicitação de pagamento.

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 service worker que pode processar a forma de pagamento especificada estiver instalado, ele será exibido na interface do Payment Request e o usuário poderá pagar com ele.

Eiji tem uma excelente postagem que mostra como implementar esse recurso em sites de comerciantes e para gerenciadores de pagamento.

E muito mais.

Essas são apenas algumas das mudanças no Chrome 68 para desenvolvedores. É claro, há muito mais.

O conteúdo incorporado em uma iframe exige um gesto do usuário para navegar o contexto de navegação de nível superior até uma origem diferente.
Desde o Chrome 1, os valores CSS cursor para grab e grabbing foram prefixados. Agora oferecemos suporte aos valores padrão não prefixados. Por fim.
E essa é das grandes! O cache HTTP agora é ignorado ao solicitar atualizações para um service worker, deixando o Chrome inline com a especificação e outros navegadores.

Novidades no DevTools

Consulte Novidades no Chrome DevTools para saber as novidades do Chrome 68.

Em seguida, clique no botão Inscrever-se em nosso canal do YouTube e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Eu sou Pete LePage e, assim que o Chrome 69 for lançado, terei aqui para informar as novidades do Chrome.