sincronização-do-segundo plano-da-caixa de trabalho

Quando você envia dados para um servidor da Web, às vezes as solicitações falham. Isso pode ocorrer porque o usuário perdeu a conectividade ou porque o servidor está inativo. Em ambos os casos, tente enviar as solicitações novamente mais tarde.

A nova API BackgroundSync é a solução ideal para esse problema. Quando um service worker detecta que uma solicitação de rede falhou, ele pode se registrar para receber um evento sync, que é entregue quando o navegador acredita que a conectividade retornou. O evento de sincronização pode ser enviado mesmo que o usuário tenha saído do aplicativo, o que o torna muito mais eficaz do que o método tradicional de repetição de solicitações com falha.

A sincronização em segundo plano do Workbox foi criada para facilitar o uso da API BackgroundSync e a integração com outros módulos do Workbox. Ela também implementa uma estratégia substituta para navegadores que ainda não implementam BackgroundSync.

Os navegadores compatíveis com a API BackgroundSync vão reproduzir automaticamente as solicitações com falha em seu nome em um intervalo gerenciado pelo navegador, provavelmente usando espera exponencial entre as tentativas de repetição. Em navegadores que não oferecem suporte nativo à API BackgroundSync, o Workbox Background Sync tentará uma repetição automaticamente sempre que o service worker for iniciado.

Uso básico

A maneira mais fácil de usar a sincronização em segundo plano é usar a Plugin, que automaticamente enfileira as solicitações com falha e as repete quando eventos sync futuros são disparados.

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  'POST'
);

BackgroundSyncPlugin hooks no callback do plug-in fetchDidFail, e fetchDidFail só será invocado se houver uma exceção gerada, provavelmente devido a uma falha de rede. Isso significa que as solicitações não serão repetidas se houver uma resposta recebida com um status de erro 4xx ou 5xx. Se você quiser repetir todas as solicitações que resultam em, por exemplo, um status 5xx, adicione um plug-in fetchDidSucceed à sua estratégia:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

Uso avançado

A sincronização em segundo plano da caixa de trabalho também fornece uma classe Queue, que é possível instanciar e adicionar solicitações com falha. As solicitações com falha são armazenadas no IndexedDB e são repetidas quando o navegador acha que a conectividade foi restaurada (ou seja, quando recebe o evento de sincronização).

Como criar uma fila

Para criar uma fila de sincronização em segundo plano da Workbox, crie-a com um nome de fila, que precisa ser exclusivo para sua origin:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

O nome da fila é usado como parte do nome da tag que recebe a codificação register() pela SyncManager global. Ele também é usado como o nome do Object Store para o banco de dados IndexedDB.

Como adicionar uma solicitação à fila

Depois de criar sua instância Queue, é possível adicionar solicitações com falha a ela. Adicione uma solicitação com falha invocando o método .pushRequest(). Por exemplo, o código a seguir captura todas as solicitações que falham e as adiciona à fila:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', event => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

Depois de adicionada à fila, a solicitação é repetida automaticamente quando o service worker recebe o evento sync, que acontece quando o navegador pensa que a conectividade foi restaurada. Os navegadores que não oferecem suporte à API BackgroundSync vão tentar enviar a fila novamente toda vez que o service worker for iniciado. Isso exige que a página que controla o service worker esteja em execução, então não será tão eficaz.

Testar a sincronização em segundo plano da caixa de trabalho

Infelizmente, o teste do BackgroundSync é um pouco pouco intuitivo e difícil por vários motivos.

A melhor abordagem para testar a implementação é fazer o seguinte:

1. Carregue uma página e registre o service worker.
2. Desative a rede do computador ou o servidor da Web.
   • NÃO USE O GOOGLE DEVTOOLS OFF-LINE. A caixa de seleção off-line no DevTools só afeta solicitações da página. As solicitações do Service Worker continuarão a ser processadas.
3. Faça solicitações de rede que precisam ser enfileiradas com a sincronização em segundo plano do Workbox.
   • É possível verificar se as solicitações foram colocadas na fila consultando Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Agora, ative a rede ou o servidor da Web.

5. Para forçar um evento sync antecipado, acesse Chrome DevTools > Application > Service Workers, insira o nome da tag de workbox-background-sync:<your queue name>, em que <your queue name> deve ser o nome da fila definida, e clique no botão "Sincronizar".

   

6. Você verá as solicitações de rede serem transmitidas para as solicitações com falha, e os dados do IndexedDB estarão vazios, já que as solicitações foram repetidas com sucesso.