Sincronize os dados do seu app da Web em segundo plano para uma experiência mais parecida com um app
Você já passou por alguma das situações a seguir?
- Andar de trem ou metrô com conectividade instável ou nenhuma conectividade
- Sua operadora limitou o uso depois que você assistiu muitos vídeos
- Morar em um país onde a largura de banda tem dificuldade para acompanhar a demanda
Se sim, você certamente já sentiu a frustração de fazer certas coisas na Web e se perguntou por que os apps específicos da plataforma são melhores nesses cenários. Apps específicos da plataforma podem buscar conteúdo novo, como artigos de notícias ou informações meteorológicas com antecedência. Mesmo que não haja rede no metrô, você ainda pode ler as notícias.
A sincronização em segundo plano periódica permite que os aplicativos da Web sincronizem dados periodicamente em segundo plano, aproximando-os do comportamento de um app específico para plataforma.
Testar
Você pode tentar a sincronização periódica em segundo plano com o app de demonstração ao vivo. Antes de usá-lo, verifique se:
- Você está usando o Chrome 80 ou mais recente.
- Você instala o app da Web antes de ativar a sincronização periódica em segundo plano.
Conceitos e uso
A sincronização periódica em segundo plano permite mostrar conteúdo novo quando um app da Web progressivo ou uma página com suporte a worker de serviço é iniciada. Para isso, ele faz o download de dados em segundo plano quando o app ou a página não está sendo usado. Isso impede que o conteúdo do app seja atualizado após o lançamento enquanto ele está sendo visualizado. Melhor ainda, ele impede que o app mostre uma animação de carregamento antes da atualização.
Sem a sincronização periódica em segundo plano, os apps da Web precisam usar métodos alternativos para fazer o download de dados. Um exemplo comum é usar uma notificação push para ativar um worker de serviço. O usuário é interrompido por uma mensagem como "Novos dados disponíveis". A atualização dos dados é basicamente um efeito colateral. Você ainda tem a opção de usar notificações push para atualizações realmente importantes, como notícias importantes.
A sincronização em segundo plano periódica pode ser confundida com a sincronização em segundo plano. Embora tenham nomes semelhantes, os casos de uso são diferentes. Entre outras coisas, a sincronização em segundo plano é mais usada para reenviar dados a um servidor quando uma solicitação anterior falha.
Como aumentar o engajamento do usuário
Se feita de forma incorreta, a sincronização periódica em segundo plano pode desperdiçar os recursos dos usuários. Antes do lançamento, o Chrome passou por um período de teste para garantir que ele estava correto. Esta seção explica algumas das decisões de design que o Chrome tomou para tornar esse recurso o mais útil possível.
A primeira decisão de design que o Chrome tomou foi que um app da Web só pode usar a sincronização em segundo plano periódica depois que uma pessoa o instala no dispositivo e o inicia como um aplicativo distinto. A sincronização em segundo plano periódica não está disponível no contexto de uma guia normal no Chrome.
Além disso, como o Chrome não quer que apps da Web não usados ou usados raramente consumam bateria ou dados
sem custo financeiro, ele foi projetado para sincronização periódica em segundo plano, de modo que
os desenvolvedores precisam ganhar isso fornecendo valor aos usuários. Especificamente,
o Chrome usa uma pontuação de engajamento do site
(about://site-engagement/) para determinar se e com que frequência as sincronizações em segundo plano podem acontecer
para um determinado app da Web. Em outras palavras, um evento periodicsync não será acionado a menos que a pontuação
de engajamento seja maior que zero, e o valor dela afeta a frequência em que o
evento periodicsync é acionado. Isso garante que os únicos apps sincronizados em
segundo plano sejam aqueles que você está usando ativamente.
A sincronização em segundo plano periódica tem algumas semelhanças com APIs e práticas em plataformas conhecidas. Por exemplo, a sincronização em segundo plano única e as notificações push permitem que a lógica de um app da Web permaneça um pouco mais (por meio do service worker) depois que uma pessoa fecha a página. Na maioria das plataformas, é comum que as pessoas tenham instalado apps que acessam a rede periodicamente em segundo plano para oferecer uma melhor experiência do usuário em ações como atualizações críticas, pré-carregamento de conteúdo e sincronização de dados. Da mesma forma, a sincronização periódica em segundo plano também estende a vida útil da lógica de um app da Web para ser executada em períodos regulares por alguns minutos de cada vez.
Se o navegador permitisse que isso ocorresse com frequência e sem restrições, poderia haver problemas de privacidade. Confira como o Chrome lidou com esse risco para a sincronização periódica em segundo plano:
- A atividade de sincronização em segundo plano só ocorre em uma rede à qual o dispositivo já se conectou. O Chrome recomenda conectar-se apenas a redes operadas por partes confiáveis.
- Como em todas as comunicações pela Internet, a sincronização em segundo plano periódica revela os endereços IP do cliente, o servidor com que ele está se comunicando e o nome do servidor. Para reduzir essa exposição a aproximadamente o que seria se o app fosse sincronizado apenas quando estivesse em primeiro plano, o navegador limita a frequência das sincronizações em segundo plano de um app para se alinhar à frequência com que a pessoa usa esse app. Se a pessoa parar de interagir com frequência com o app, a sincronização periódica em segundo plano vai parar de ser acionada. Essa é uma melhoria em relação ao status quo em apps específicos de plataforma.
Quando ela pode ser usada?
As regras de uso variam de acordo com o navegador. Para resumir o que foi dito acima, o Chrome coloca os seguintes requisitos na sincronização em segundo plano periódica:
- Uma pontuação de engajamento do usuário específica.
- Presença de uma rede usada anteriormente.
O tempo das sincronizações não é controlado pelos desenvolvedores. A frequência de sincronização vai se alinhar à frequência de uso do app. Os apps específicos da plataforma não fazem isso no momento. Ele também considera o estado de energia e conectividade do dispositivo.
Quando usar?
Quando o service worker é ativado para processar um evento periodicsync, você tem a
oportunidade de solicitar dados, mas não a obrigação de fazer isso. Ao processar
o evento, considere as condições de rede e o armazenamento disponível e faça o download de diferentes quantidades de dados em resposta. Você pode usar
os seguintes recursos:
- API Network Information
- Como detectar o modo "Economia de dados"
- Como estimar o armazenamento disponível
Permissões
Depois que o service worker for instalado, use a API
Permissions para consultar
periodic-background-sync. É possível fazer isso em uma janela ou em um
contexto de service worker.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Registrar uma sincronização periódica
Como já mencionado, a sincronização periódica em segundo plano requer um worker de serviço. Extraia
um PeriodicSyncManager usando ServiceWorkerRegistration.periodicSync e chame
register() nele. O registro exige uma tag e um intervalo mínimo
de sincronização (minInterval). A tag identifica a sincronização registrada
para que várias sincronizações possam ser registradas. No exemplo abaixo, o nome da tag
é 'content-sync' e o minInterval é um dia.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Verificar um registro
Chame periodicSync.getTags() para recuperar uma matriz de tags de registro. O exemplo
a seguir usa nomes de tags para confirmar se a atualização do cache está ativa para
evitar que ela seja feita novamente.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Também é possível usar getTags() para mostrar uma lista de registros ativos na página de configurações do app
da Web para que os usuários possam ativar ou desativar tipos específicos de
atualizações.
Responder a um evento de sincronização em segundo plano periódico
Para responder a um evento de sincronização em segundo plano periódico, adicione um manipulador de eventos
periodicsync ao service worker. O objeto event transmitido vai conter um parâmetro tag que corresponde ao valor usado durante o registro. Por exemplo, se uma
sincronização em segundo plano periódica foi registrada com o nome 'content-sync',
event.tag será 'content-sync'.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Cancelar o registro de uma sincronização
Para encerrar uma sincronização registrada, chame periodicSync.unregister() com o nome da
sincronização que você quer cancelar o registro.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Interfaces
Confira um resumo das interfaces fornecidas pela API Periodic Background Sync.
PeriodicSyncEvent. Transmitido para o manipulador de eventosServiceWorkerGlobalScope.onperiodicsyncem um momento escolhido pelo navegador.PeriodicSyncManager: registra e cancela o registro de sincronizações periódicas e fornece tags para sincronizações registradas. Extraia uma instância dessa classe da propriedade ServiceWorkerRegistration.periodicSync.ServiceWorkerGlobalScope.onperiodicsync. Registra um gerenciador para receber aPeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Retorna uma referência aoPeriodicSyncManager.
Exemplo
As seções a seguir mostram alguns exemplos de como usar a API Periodic Background Sync.
Atualizar conteúdo
O exemplo a seguir usa a sincronização em segundo plano periódica para fazer o download e armazenar em cache
os artigos atualizados de um site de notícias ou blog. Observe o nome da tag, que
indica o tipo de sincronização ('update-articles'). A chamada para
updateArticles() é embrulhada em event.waitUntil() para que o worker do serviço
não seja encerrado antes que os artigos sejam transferidos por download e armazenados.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Adicionar a sincronização em segundo plano periódica a um app da Web
Esse conjunto de mudanças foi necessário para adicionar a sincronização em segundo plano periódica a uma PWA existente. Esse exemplo inclui várias instruções de registro úteis que descrevem o estado da sincronização em segundo plano no app da Web.
Depurar a API Periodic Background Sync
Pode ser um desafio ter uma visualização completa da sincronização em segundo plano periódica durante o teste local. Informações sobre registros ativos, intervalos de sincronização aproximados e registros de eventos de sincronização anteriores fornecem um contexto valioso ao depurar o comportamento do app da Web. Felizmente, é possível encontrar todas essas informações usando um recurso experimental no Chrome DevTools.
Gravar atividade local
A seção Sincronização periódica em segundo plano das Ferramentas do desenvolvedor é organizada em torno de eventos principais no ciclo de vida da sincronização periódica em segundo plano: registro para sincronização, execução de uma sincronização em segundo plano e desregistro. Para saber mais sobre esses eventos, clique em Iniciar gravação.
Durante a gravação, as entradas vão aparecer nas Ferramentas do desenvolvedor correspondentes aos eventos, com o contexto e os metadados registrados para cada um.
Depois de ativar a gravação uma vez, ela vai permanecer ativada por até três dias, permitindo que as Ferramentas do desenvolvedor capturem informações de depuração local sobre sincronizações em segundo plano que podem ocorrer, mesmo horas no futuro.
Simular eventos
Embora a gravação de atividades em segundo plano possa ser útil, há momentos em que você
quer testar o gerenciador periodicsync imediatamente, sem esperar que um
evento seja acionado na cadência normal.
Para fazer isso, acesse a seção Service Workers no painel "Application" nas Ferramentas do desenvolvedor do Chrome. O campo Sincronização periódica permite fornecer uma tag para o evento usar e acionar o evento quantas vezes quiser.
Uso da interface do DevTools
A partir do Chrome 81, você vai encontrar uma seção Periodic Background Sync no painel Application do DevTools.
