Experiências off-line mais completas com a API Periodic Background Sync

Sincronize os dados do seu app da Web em segundo plano para uma experiência mais parecida com um app

Jeff Posnick

Joe Medley

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ê já deve ter sentido a frustração de fazer certas coisas na Web e se perguntado por que os apps específicos da plataforma funcionam melhor 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 versão 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 progressiva 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 por push para atualizações realmente importantes, como notícias importantes.

A sincronização periódica em segundo plano é facilmente 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 incorretamente, 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 periódica em segundo plano 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 ocorrer 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 dele 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 experiência de usuário melhor para atualizações críticas, pré-carregamento de conteúdo, sincronização de dados e assim por diante. Da mesma forma, a sincronização periódica em segundo plano também amplia a vida útil da lógica de um app da Web para ser executada em períodos regulares por alguns minutos.

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 se conectar 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 de 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.
}

Como 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.
  }
}

Como verificar um registro

Chame periodicSync.getTags() para recuperar uma matriz de tags de registro. O exemplo abaixo usa nomes de tags para confirmar que a atualização do cache está ativa para evitar atualizar de novo.

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.

Como 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 correspondente 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.
});

Como 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 ao gerenciador de eventos ServiceWorkerGlobalScope.onperiodicsync em 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 o PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Retorna uma referência ao PeriodicSyncManager.

Exemplo

Atualizar conteúdo

O exemplo a seguir usa a sincronização em segundo plano periódica para fazer o download e armazenar em cache 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());
  }
});

Como 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 periódica no app da Web.

Depuração

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 por meio de um recurso experimental no Chrome DevTools.

Como gravar atividades locais

A seção Sincronização periódica em segundo plano do DevTools é 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.

Como 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 isso, acesse a seção Service Workers no painel "Application" do Chrome DevTools. O campo Sincronização periódica permite fornecer uma tag para o evento usar e acionar o evento quantas vezes quiser.

Como usar a interface do DevTools

A partir do Chrome 81, você vai encontrar uma seção Periodic Background Sync no painel Application do DevTools.