Novidades no Chrome 76

Pete LePage

No Chrome 76, adicionamos suporte para:

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

Botão de instalação da Omnibox do PWA

No Chrome 76, ficou mais fácil para os usuários instalarem Progressive Web Apps no computador com a adição de um botão de instalação à barra de endereço, às vezes chamada de omnibox.

Se o site atender aos critérios de instalação de Progressive Web Apps, o Chrome vai mostrar um botão de instalação no omnibox indicando ao usuário que o PWA pode ser instalado. Se o usuário clicar no botão de instalação, será basicamente o mesmo que chamar prompt() no evento beforeinstallprompt. Isso mostra a caixa de diálogo de instalação, facilitando a instalação do PWA.

Consulte Instalação da barra de endereços para Progressive Web Apps na área de trabalho para conferir todos os detalhes.


Mais controle sobre a minibarra de informações do PWA

Exemplo da minibarra de informações "Adicionar à tela inicial" do AirHorner

Em dispositivos móveis, o Chrome mostra a minibarra de informações na primeira vez que um usuário visita seu site se ele atende aos critérios de instalação de Progressive Web Apps. Recebemos seu feedback dizendo que vocês querem impedir a exibição desse mini-barra de informações e, em vez disso, disponibilizar sua própria promoção de instalação.

A partir do Chrome 76, chamar preventDefault() no evento beforeinstallprompt impede a minibarra de informações de aparecer.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Atualize a interface para informar aos usuários que a PWA pode ser instalada. Consulte Padrões para promover a instalação de PWAs para conferir nossas práticas recomendadas para promover a instalação de apps da Web progressivos.

Atualizações mais rápidas dos WebAPKs

Quando um Progressive Web App é instalado no Android, o Chrome solicita e instala automaticamente um APK da Web. Depois da instalação, o Chrome verifica periodicamente se o manifesto do app da Web mudou, talvez você tenha atualizado os ícones, as cores ou o nome do app, para saber se um novo WebAPK é necessário.

A partir do Chrome 76, o Chrome vai verificar o manifesto com mais frequência, diariamente, em vez de a cada três dias. Se alguma das propriedades principais tiver sido alterada, o Chrome vai solicitar e instalar um novo WebAPK, garantindo que o título, os ícones e outras propriedades estejam atualizados.

Consulte Como atualizar WebAPKs com mais frequência para saber mais.

Modo escuro

Muitos sistemas operacionais agora oferecem suporte a um modo escuro ou tema escuro.

A consulta de mídia prefers-color-scheme permite ajustar a aparência do seu site para corresponder ao modo preferido do usuário.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom escreveu um ótimo artigo, Hello darkness, my old friend, no web.dev, com tudo o que você precisa saber, além de dicas para projetar suas folhas de estilo para oferecer suporte a um modo claro e escuro.

E muito mais.

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

Promise.allSettled()

Estou muito feliz com o Promise.allSettled(). Ele é semelhante a Promise.all(), exceto que ele aguarda até que todas as promessas sejam resolvidas antes de retornar.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

A leitura de blobs ficou mais fácil

Blobs são mais fáceis de ler com três novos métodos: text(), arrayBuffer() e stream(). Isso significa que não precisamos mais criar um wrapper para o leitor de arquivos.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Suporte a imagens na API Async Clipboard

Também adicionamos suporte a imagens na API Asynchronous Clipboard, facilitando a cópia e a colagem de imagens de forma programática.

Leitura adicional

Este artigo aborda apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 76.

Inscrever-se

Se quiser ficar por dentro dos nossos vídeos, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

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