Novidades do Chrome 80

Pete LePage

O Chrome 80 está sendo lançado agora, e há muitas novidades para desenvolvedores.

Há suporte para:

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

Trabalhadores do módulo

Workers de módulo, um novo modo para workers da Web, com os benefícios de ergonomia e desempenho dos módulos JavaScript, já está disponível. O construtor Worker aceita uma nova opção {type: "module"}, que muda a maneira como os scripts são carregados e executados, para corresponder a <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

A mudança para módulos JavaScript também permite o uso de importação dinâmica para código de carregamento lento, sem bloquear a execução do worker. Confira a postagem Threading the web with module workers (em inglês) de Jason em web.dev para mais detalhes.

Encadeamento opcional

Tentar ler propriedades profundamente aninhadas em um objeto pode ser propenso a erros, especialmente se houver uma chance de algo não ser avaliado.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

A verificação de cada valor antes de continuar se transforma facilmente em uma instrução if profundamente aninhada ou exige um bloco try / catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

O Chrome 80 adiciona suporte a um novo recurso do JavaScript chamado encadeiramento opcional. Com a vinculação opcional, se uma das propriedades retornar um valor nulo ou indefinido, em vez de gerar um erro, o valor inteiro simplesmente retornará indefinido.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Confira a postagem do blog Encadeamento opcional no blog do V8 para saber todos os detalhes.

Graduações de teste de origem

Há três novos recursos que passaram do teste da Origin para a versão estável, permitindo que sejam usados por qualquer site, sem um token.

Sincronização periódica em segundo plano

Primeiro, a sincronização periódica em segundo plano, que sincroniza dados periodicamente em segundo plano. Assim, quando um usuário abre o PWA instalado, ele sempre tem os dados mais recentes.

Seletor de contatos

Em seguida, temos a API Contact Picker, uma API sob demanda que permite que os usuários selecionem entradas da lista de contatos e compartilhem detalhes limitados das entradas selecionadas com um site.

Ele permite que os usuários compartilhem apenas o que querem, quando querem, e facilita o contato e a conexão com amigos e familiares.

Por fim, o método Get Installed Related Apps permite que o app da Web verifique se o app nativo está instalado no dispositivo de um usuário.

Um dos casos de uso mais comuns é decidir se você vai promover a instalação da PWA, se o app nativo não estiver instalado. Ou você pode desativar algumas funcionalidades de um app se elas forem fornecidas pelo outro.

Novos testes de origem

API Content Indexing

Como você informa aos usuários sobre o conteúdo armazenado em cache na sua PWA? Há um problema de descoberta aqui. Eles saberão como abrir seu app? Ou que conteúdo está disponível?

A API Content Indexing é um novo teste de origem que permite adicionar URLs e metadados de conteúdo compatível com o modo off-line a um índice local, mantido pelo navegador e facilmente visível para o usuário.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Para adicionar algo ao índice, preciso receber o registro do worker de serviço, chamar index.add e fornecer metadados sobre o conteúdo.

Depois que o índice é preenchido, ele aparece em uma área dedicada da página de downloads do Chrome para Android. Confira a postagem de Jeff Como indexar suas páginas com capacidade off-line com a API Content Indexing no web.dev para conferir todos os detalhes.

Acionadores de notificações

As notificações são uma parte essencial de muitos apps. No entanto, as notificações push só são confiáveis quanto a rede à qual você está conectado. Embora isso funcione na maioria dos casos, às vezes ele falha. Por exemplo, se um lembrete de agenda não for enviado para você sobre um evento importante porque você está no modo avião, você pode perder o evento.

Com os acionadores de notificação, você pode programar notificações com antecedência para que o sistema operacional as envie no momento certo, mesmo que não haja conectividade de rede ou o dispositivo esteja no modo de economia de bateria.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Para programar uma notificação, chame showNotification no registro do worker de serviço. Nas opções de notificação, adicione uma propriedade showTrigger com um TimestampTrigger. Quando chegar a hora, o navegador vai mostrar a notificação.

O teste de origem está programado para ser executado no Chrome 83. Confira a postagem Notification Triggers do Tom em web.dev para saber mais detalhes.

Outros testes de origem

Há alguns outros testes de origem a partir do Chrome 80:

  • Web Serial
  • A capacidade de PWAs se registrarem como gerenciadores de arquivos
  • Novas propriedades para o seletor de contatos

Confira uma lista completa de recursos no teste de origem.

E mais

Claro, há muito mais!

  • Agora você pode vincular diretamente a fragmentos de texto em uma página usando #:~:text=something. O Chrome vai rolar até a primeira instância do fragmento de texto e destacá-la. Por exemplo https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • A configuração de display: minimal-ui em um PWA para computador adiciona um botão de voltar e recarregar à barra de título do PWA instalado.
  • O Chrome agora oferece suporte ao uso de imagens SVG como ícones de favoritos.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira as mudanças adicionais no Chrome 80 nos links abaixo.

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 81 for lançado, vou estar aqui para contar as novidades do Chrome.