O Chrome 80 está sendo lançado agora e há muitas coisas novas para os desenvolvedores.
Há suporte para:
- Módulos em workers
- Encadeamento opcional no JavaScript
- Novos testes de origem
- Recursos que foram aprovados do teste de origem
- E muito mais.
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.
Instalar apps relacionados
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.
- Novidades do Chrome DevTools (80)
- Descontinuações e remoções do Chrome 80
- Atualizações do ChromeStatus.com para o Chrome 80
- Novidades do JavaScript no Chrome 80
- Lista de alterações do repositório de origem do Chromium
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.