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, estamos facilitando a instalação de apps da Web Progressivos no computador adicionando um botão de instalação à barra de endereço, às vezes chamada de caixa de pesquisa.

Se o site atender aos critérios de instalabilidade de apps progressivos da Web, o Chrome vai mostrar um botão de instalação na caixa de pesquisa, 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 da PWA.

Consulte Instalação da barra de endereços para Progressive Web Apps no computador para conferir todos os detalhes.


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

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

Em dispositivos móveis, o Chrome mostra a minibarra de informações na primeira vez que um usuário acessa seu site se ele atende aos critérios de instalabilidade de Progressive Web Apps. Você disse que quer impedir que a minibarra de informações apareça e oferecer 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 o PWA pode ser instalado. Confira os 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 para 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, a cada dia, em vez de a cada três dias. Se alguma das propriedades principais tiver mudado, 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()

Pessoalmente, estou muito animado com 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

Os 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 em torno do 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 à API Clipboard assíncrona, facilitando a cópia e a colagem de imagens por programação.

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, vou estar aqui para contar as novidades do Chrome.