Novidades do Chrome 80

O Chrome 80 está sendo lançado agora e há muitas coisas novas para os desenvolvedores.

Há suporte para:

Meu nome é Pete LePage, e vamos conhecer as novidades para desenvolvedores no Chrome 80.

Workers de módulo

Agora, está disponível o Module Workers, um novo modo para Web workers, com a ergonomia e os benefícios de desempenho dos módulos JavaScript. O construtor do 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 da importação dinâmica para código de carregamento lento, sem bloquear a execução do worker. Confira a postagem de Jason Como linha de execução na Web com workers de módulos (link em inglês) no web.dev para saber mais.

Encadeamento opcional

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

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

Verificar cada valor antes de prosseguir facilmente se transforma em uma instrução if aninhada profundamente ou requer 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 JavaScript chamado encadeamento opcional. Com o encadeamento opcional, se uma das propriedades retornar um valor nulo, ou "indefinido", em vez de gerar um erro, o resultado 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 (em inglês) na v8 para saber todos os detalhes.

Upgrades no teste de origem

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

Sincronização periódica em segundo plano

O primeiro é a sincronização periódica em segundo plano, que sincroniza periodicamente os dados em segundo plano para que, quando um usuário abrir o PWA instalado, ele tenha sempre os dados mais atualizados.

Seletor de contatos

A seguir, 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 Instalar apps relacionados permite que seu 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ê quer promover a instalação do PWA, se o app nativo não estiver instalado. Ou você pode desativar algumas funcionalidades de um app caso ele seja fornecido pelo outro.

Novos testes de origem

API Content Indexing

Como você informa os usuários sobre o conteúdo que você armazenou em cache no PWA? Há um problema de descoberta aqui. Eles vão saber abrir seu app? Ou qual 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 disponibilidade 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 conseguir o registro do service worker, chamar index.add e fornecer metadados sobre o conteúdo.

Depois que o índice é preenchido, ele aparece em uma área dedicada da página "Downloads" do Chrome para Android. Confira a postagem de Jeff Como indexar páginas compatíveis com o modo off-line com a API Content Indexing (em inglês) no web.dev para mais detalhes.

Disparadores de notificações

As notificações são uma parte essencial de muitos apps. No entanto, as notificações push são tão confiáveis quanto a rede à qual você está conectado. Embora isso funcione na maioria dos casos, às vezes pode falhar. Por exemplo, se um lembrete da agenda ou a notificação de um evento importante não for enviado porque você está no modo avião, é possível que perca o evento.

Os acionadores de notificações permitem programar notificações com antecedência para que o sistema operacional entregue a notificação no momento certo, mesmo que não haja conectividade de rede ou que 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 service worker. Nas opções de notificação, adicione uma propriedade showTrigger com um TimestampTrigger. Então, quando chegar a hora, o navegador mostrará a notificação.

O teste de origem está previsto para ser executado até o Chrome 83, então confira a postagem Acionadores de notificação (em inglês) de Tom em web.dev para ver todos os detalhes.

Outros testes de origem

Existem alguns outros testes de origem a partir do Chrome 80:

  • Número de série da Web
  • A capacidade de PWAs se registrarem como gerenciadores de arquivos
  • Novas propriedades do 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 e destacar a primeira instância desse fragmento de texto. Por exemplo: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Configurar display: minimal-ui em um PWA para computador adiciona um botão "Voltar" e "Atualizar" à barra de título do PWA instalado.
  • Além disso, o Chrome agora oferece suporte ao uso de imagens SVG como favicons.

Leia mais

Esses são apenas alguns dos principais destaques. Acesse os links abaixo para ver outras mudanças no Chrome 80.

Fazer inscrição

Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal de desenvolvedores do Chrome no YouTube. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Sou Pete LePage e, assim que o Chrome 81 for lançado, estarei aqui para informar as novidades do Chrome.