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

Sincronize os dados do seu app da Web em segundo plano para ter uma experiência mais parecida com a dos apps

Jeff Posnick

Joe Medley

Você já esteve em alguma das seguintes situações?

• Andar de trem ou metrô com conexão lenta ou inexistente
• Foi limitada pela sua operadora depois de assistir muitos vídeos
• Viver em um país onde a largura de banda tem dificuldade para acompanhar a demanda

Se já fez isso, você com certeza já sentiu a frustração de ter certas coisas feitas na Web e se perguntou por que aplicativos específicos de plataforma costumam ter um desempenho melhor nesses cenários. Apps específicos da plataforma podem buscar conteúdo novo, como notícias ou previsão do tempo informações com antecedência. Mesmo que não haja rede no metrô, você ainda pode ler notícias.

A sincronização periódica em segundo plano permite que os aplicativos da Web sincronizem periodicamente dados em segundo plano, aproximando os aplicativos da web do comportamento de uma plataforma específica app.

Testar

Tente sincronizar periodicamente em segundo plano com a demonstração ao vivo app. Antes de usar, verifique se:

• Você está usando o Chrome 80 ou versão mais recente.
• Você instalar no 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 Web Progressivo ou página apoiada por um service worker. Ele faz isso baixando dados em segundo plano quando o app ou a página não está sendo usado. Isso impede que o conteúdo seja atualizado após o lançamento enquanto estiver sendo visualizado. Melhor ainda, impede que o app mostre um ícone de carregamento de conteúdo antes de atualizar.

Sem a sincronização periódica em segundo plano, os apps da Web precisam usar métodos alternativos para para fazer o download dos dados. Um exemplo comum é usar uma notificação push para ativar um serviço worker. O usuário é interrompido por uma mensagem como "novos dados disponíveis". Atualizar os dados é essencialmente um efeito colateral. Você ainda tem a opção de usar as notificações push para receber atualizações importantes, como as últimas notícias.

A sincronização periódica em segundo plano é facilmente confundida com a sincronização em segundo plano. Embora eles têm nomes parecidos, os casos de uso são diferentes. Entre outras coisas, a sincronização em segundo plano é usada com mais frequência para reenviar dados a um servidor quando uma solicitação anterior falhou.

Engajamento correto do usuário

Se for realizada incorretamente, a sincronização periódica em segundo plano pode prejudicar do Google Cloud. Antes do lançamento, o Chrome passou por um período de teste para tornar que ela estava certa. Esta seção explica algumas decisões de design que o Chrome para que esse recurso seja o mais útil possível.

A primeira decisão de design que o Chrome tomou é que um aplicativo da web só pode usar sincronização em segundo plano depois que o usuário o instala no dispositivo e o lançou 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 aplicativos da web pouco utilizados ou pouco utilizados para consomem bateria ou dados, o Chrome projetou a sincronização periódica em segundo plano para que os desenvolvedores precisam ganhá-lo fornecendo valor aos usuários. Concretamente, O Chrome está usando uma pontuação de engajamento do site (about://site-engagement/) para determinar se e com que frequência sincronizações periódicas em segundo plano podem acontecer. para um determinado app da Web. Em outras palavras, um evento periodicsync não será acionado, a menos que o engajamento pontuação é maior do que zero, e seu valor afeta a frequência em que O evento periodicsync é disparado. Isso garante que os únicos aplicativos sincronizados na em segundo plano são aqueles que você está usando ativamente.

A sincronização periódica em segundo plano tem algumas semelhanças com as APIs e práticas em plataformas populares. Por exemplo, uma única sincronização em segundo plano, bem como as notificações push permitem que a lógica de um aplicativo da web dure um pouco mais (via service worker) depois que uma pessoa fechar a página. Na maioria das plataformas, as pessoas costumam instalar aplicativos que acessam a rede periodicamente em segundo plano para oferecer uma melhor experiência do usuário em atualizações críticas, pré-busca de conteúdo, sincronização de dados e assim por diante. Da mesma forma, a sincronização periódica em segundo plano também estende o ciclo de vida da lógica de um aplicativo da web para ser executada em períodos regulares para qual podem ocorrer alguns minutos por vez.

Se o navegador permitia que isso ocorresse com frequência e sem restrições, pode resultar em problemas de privacidade. Veja como o Chrome abordou esse problema de sincronização periódica em segundo plano:

• A atividade de sincronização em segundo plano só ocorre em uma rede na qual o dispositivo tenha ao qual se conectavam. O Chrome recomenda se conectar apenas a redes operadas por terceiros confiáveis.
• Como acontece com todas as comunicações na Internet, a sincronização periódica em segundo plano revela o IP do cliente, o servidor com o qual está se comunicando e o nome servidor. Para reduzir essa exposição ao que seria se o app só sincronizada quando estava em primeiro plano, o navegador limita a frequência de um o segundo plano do app é sincronizado com a frequência de uso dele. Se a pessoa para de interagir frequentemente com o aplicativo, sincronização periódica em segundo plano o acionamento será interrompido. Essa é uma melhoria líquida em relação ao status quo em relatórios específicos apps.

Quando ela pode ser usada?

As regras de uso variam de acordo com o navegador. Para resumir, o Chrome coloca a tag requisitos para a sincronização periódica em segundo plano:

• Uma pontuação específica de engajamento do usuário.
• Presença de uma rede usada anteriormente.

O tempo das sincronizações não é controlado pelos desenvolvedores. A a frequência de sincronização estará alinhada com a frequência com que o aplicativo é usado. (Observe que aplicativos específicos de plataforma não fazem isso atualmente. Ela também leva em conta a energia do dispositivo o estado de conectividade.

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 fazê-lo. Ao lidar com você precisa considerar as condições da rede e o armazenamento disponível a consideração e fazer o download de diferentes quantidades de dados em resposta. Você pode usar os seguintes recursos para ajudar:

• API Network Information
• Como detectar o modo de Economia de dados
• Como estimar o armazenamento disponível

Permissões

Após a instalação do service worker, use o campo Permissões API para consultar para periodic-background-sync. Você pode fazer isso de uma janela ou contexto do 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á foi dito, a sincronização periódica em segundo plano requer um service worker. Recuperar um PeriodicSyncManager usando ServiceWorkerRegistration.periodicSync e chamar register(). O registro exige uma tag e um mínimo intervalo 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 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 extrair uma matriz de tags de registro. A exemplo abaixo usa nomes de tag para confirmar que a atualização do cache está ativa para evitar atualizando 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 sua Web na página de configurações do app para que os usuários possam ativar ou desativar tipos específicos de atualizações.

Como responder a um evento periódico de sincronização em segundo plano

Para responder a um evento periódico de sincronização em segundo plano, adicione um evento periodicsync para o service worker. O objeto event transmitido a ela conterá um O parâmetro tag corresponde ao valor usado durante o registro. Por exemplo, se um a sincronização periódica em segundo plano 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 do sincronização que você quer cancelar.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

Interfaces

Veja um resumo das interfaces fornecidas pelo plano de fundo periódico API Sync.

• PeriodicSyncEvent: Passado para o manipulador de eventos ServiceWorkerGlobalScope.onperiodicsync em uma tempo de escolha do navegador.
• PeriodicSyncManager: Registra e cancela o registro de sincronizações periódicas e fornece tags para registros é sincronizado. Recuperar uma instância dessa classe do ServiceWorkerRegistration.periodicSync .
• ServiceWorkerGlobalScope.onperiodicsync: Registra um gerenciador para receber o PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync: Retorna uma referência ao PeriodicSyncManager.

Exemplo

Atualizando conteúdo

O exemplo a seguir usa a sincronização periódica em segundo plano para fazer o download e armazenar em cache artigos atualizados para 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() é encapsulada em event.waitUntil() para que o service worker 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 uma sincronização periódica em segundo plano a um app da Web

Esse conjunto de mudanças foi necessário para adicionar sincronização periódica em segundo plano com um PWA. Este exemplo inclui vários log statements úteis que descrevem o o estado da sincronização periódica em segundo plano no app da Web.

Depuração

Pode ser um desafio obter uma visualização de ponta a ponta da sincronização periódica em segundo plano. durante o teste local. Informações sobre registros ativos, sincronização aproximada Intervalos e registros de eventos de sincronização passados fornecem contexto valioso durante a depuração comportamento do seu app da Web. Felizmente, você pode encontrar todas essas informações com um recurso experimental no Chrome DevTools.

Gravando atividade local

A seção Sincronização periódica em segundo plano do DevTools é organizada com base nos eventos principais no ciclo de vida periódico da sincronização em segundo plano: registrar-se para sincronização, realizar uma sincronização em segundo plano e cancelamento de registro. Para informações sobre esses eventos, Clique em Iniciar gravação.

Durante a gravação, as entradas vão aparecer no DevTools correspondentes aos eventos, com contexto e metadados registrados para cada um.

Após ativar a gravação uma vez, ela ficará ativada por até três dias. permitindo que o DevTools capture informações de depuração local sobre sincronizações em segundo plano que pode acontecer, até mesmo em algumas horas no futuro.

Como simular eventos

Embora gravar atividades em segundo plano possa ser útil, há momentos em que você quiser testar o gerenciador periodicsync imediatamente, sem esperar por uma seja acionado em sua cadência normal.

Você pode fazer isso na seção Service Workers no painel "Application" Chrome DevTools. O campo Sincronização periódica permite fornecer uma tag para o usar e acioná-lo quantas vezes você quiser.

Como usar a interface do DevTools

A partir do Chrome 81, você verá a seção Sincronização periódica em segundo plano na guia Painel Aplicativo do DevTools.