Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 76

Pet LePage

Twitter GitHub Glitch Mastodon Página inicial

No Chrome 76, adicionamos suporte para:

Consulta de mídia prefers-color-scheme, que traz o modo escuro para os sites.
Um botão de instalação na omnibox para facilitar a instalação de Progressive Web Apps no computador.
Como impedir que a minibarra de informações apareça em Progressive Web Apps em dispositivos móveis.
Atualizações de WebAPKs mais frequentes.
E muito mais.

Sou Pete LePage. Vamos conferir as novidades para os 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 na área de trabalho, adicionando um botão de instalação à barra de endereço, às vezes chamado de omnibox.

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

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

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

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

Em dispositivos móveis, o Chrome mostra a minibarra de informações na primeira vez que um usuário acessa seu site, caso ele atenda aos critérios de instalação do Progressive Web App. Você nos disse que gostaria de impedir a exibição da minibarra de informações e fornecer sua própria promoção de instalação.

A partir do Chrome 76, chamar preventDefault() no evento beforeinstallprompt impedirá a exibição da minibarra de informações.

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 que os usuários saibam que o PWA pode ser instalado. Confira Padrões para promover a instalação de PWA e confira nossas práticas recomendadas para promover a instalação de Progressive Web Apps.

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. Após a 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 ver se um novo WebAPK é necessário.

A partir do Chrome 76, o Chrome verificará o manifesto com mais frequência, todos os dias, em vez de a cada três dias. Se alguma das propriedades principais tiver sido mudada, o Chrome 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 ver detalhes completos.

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 que ela corresponda ao modo preferido do usuário.

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

Tom tem um artigo excelente Hello darkness, my velho amigo em web.dev, com tudo o que você precisa saber, além de dicas para arquitetar suas folhas de estilo para que elas sejam compatíveis com os modos claro e escuro.

E muito mais.

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

`Promise.allSettled()`

Pessoalmente, estou muito animado com Promise.allSettled(). É semelhante a Promise.all(), mas espera 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).

Ler blobs é 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 assíncrona da área de transferência

Além disso, adicionamos suporte a imagens à API Async Clipboard, o que facilita copiar e colar imagens programaticamente.