Novidades no Chrome 68

Pete LePage

E tem muito mais.

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

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

Mudanças no recurso "Adicionar à tela inicial"

Caso seu site atenda às critérios de adição à tela inicial, O Chrome não vai mais mostrar o banner "Adicionar à tela inicial". Em vez disso, você está controlar quando e como enviar solicitações ao usuário.

Para pedir ao usuário, detecte o evento beforeinstallprompt e salve o evento e adicionar um botão ou outro elemento de interface ao aplicativo 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 "Instalar", chame prompt() no beforeinstallprompt, 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 o site, o Chrome mostrará uma minibarra de informações na primeira vez que um usuário visita um site que atende aos critérios de adicionar à tela inicial. Uma vez dispensada, a minibarra de informações não será mostrada novamente por um tempo.

Mudanças no comportamento do recurso "Adicionar à tela inicial" contém todos os detalhes, incluindo exemplos de código que podem ser usados e muito mais.

API Page Lifecycle

Quando um usuário tem muitas guias em execução, recursos críticos, como memória, CPU, bateria e rede podem ter assinaturas excessivas, uma experiência ruim do usuário.

Se seu 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 eles.

Por exemplo, se um usuário tiver uma guia em segundo plano por um tempo, o navegador O usuário pode suspender a execução do script nessa página para economizar recursos. Antes de fazer isso, ele vai disparar o evento freeze, permitindo que você feche o evento IndexedDB ou conexões de rede ou salvar qualquer estado de visualização não salvo. Então, quando o usuário mudar o foco da guia, o evento resume será disparado, e será 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 API Page Lifecycle do Phil publique muitos detalhes, incluindo exemplos de código, dicas e muito mais. Encontre a especificação e um documento de explicação (em inglês) no GitHub.

API Payment Handler

A API Payment Request é um aplicativo uma forma baseada em padrões de pagamento. A A API Payment Handler estende a alcance da Solicitação de Pagamento, permitindo apps de pagamento baseados na Web para facilitar pagamentos diretamente na experiência de solicitação de pagamento.

Como vendedor, adicionar um aplicativo de pagamento baseado na web é tão fácil quanto adicionar um entrada na 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 houver um service worker que possa lidar com a forma de pagamento especificada, ele aparecerá na interface de solicitação de pagamento e o usuário poderá pagar com ele.

Eiji tem uma ótima postagem que mostra como implementá-lo em sites de comerciantes e para gerenciadores de pagamento.

E muito mais.

Estas são apenas algumas das mudanças do Chrome 68 para os desenvolvedores, obviamente, há muito mais.

Novidades no DevTools

Confira as Novidades do Chrome DevTools para conhecer as novidades do DevTools no Chrome 68.

Inscrever-se

Em seguida, clique no botão Inscrever-se na nossa Canal do YouTube você 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, terei certeza aqui para contar as novidades do Google Chrome.