Quando você faz solicitações a um servidor da Web, falhas são possíveis. Pode ser que o usuário tenha perdido a conectividade ou que o servidor remoto esteja inativo.
Embora esta documentação tenha se concentrado principalmente no processamento de solicitações GET em um service worker, outros métodos como POST, PUT ou DELETE podem ser úteis. Muitas vezes, esses métodos são usados na comunicação com APIs de back-end para fornecer dados a um app da Web. Quando essas solicitações falham na ausência de um service worker, elas precisam ser repetidas manualmente pelo usuário quando ficam on-line novamente, e isso não é algo que os usuários nem sempre se lembrem de fazer.
Se isso descreve seu aplicativo – e se um service worker estiver na combinação, você deve tentar enviar novamente solicitações com falha quando o usuário estiver on-line novamente. A API BackgroundSync oferece uma solução para esse problema. Quando um service worker detecta uma solicitação de rede com falha, ele pode se registrar para receber um evento sync quando o navegador detectar que a conectividade retornou. O evento sync pode ser entregue mesmo que o usuário tenha saído da página que o registrou, o que o torna mais eficaz do que outros métodos de repetição de solicitações com falha.
O Workbox abstrai essa API com o módulo workbox-background-sync, que facilita o uso da API BackgroundSync com outros módulos do Workbox. Ela também implementa uma estratégia substituta para navegadores que ainda não oferecem suporte a BackgroundSync.
Uso básico
O BackgroundSyncPlugin é exportado do módulo workbox-background-sync e pode ser usado para enfileirar solicitações com falha e repeti-las quando eventos sync futuros forem 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]
}),
// An optional third parameter specifies the request method
'POST'
);
Aqui, BackgroundSyncPlugin é aplicado a uma rota correspondente a solicitações POST para uma rota de API que recupera dados JSON. Se o usuário estiver off-line, o BackgroundSyncPlugin tentará fazer a solicitação novamente quando estiver on-line, mas apenas por até um dia.
Uso avançado
O workbox-background-sync também fornece uma classe Queue, que pode ser instanciada e adicionada a solicitações com falha. Como acontece com BackgroundSyncPlugin, as solicitações com falha são armazenadas em IndexedDB e testadas quando o navegador acha que a conectividade foi restaurada.
Como criar uma fila
Para criar uma fila, instancie um objeto Queue com uma string que represente o nome da fila:
import {Queue} from 'workbox-background-sync';
const queue = new Queue('myQueueName');
O nome da fila é usado como parte do nome da tag criado pelo método register() fornecido pelo SyncManager global. É também o nome usado para o armazenamento de objetos fornecido pelo banco de dados IndexedDB.
Adicionar solicitações à fila
Depois de criar a instância Queue, é possível adicionar solicitações com falha a ela usando o método pushRequest():
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 adicionadas à fila, as solicitações são repetidas automaticamente quando o service worker recebe o evento sync, porque o navegador acredita que a rede está disponível novamente. Navegadores que não são compatíveis com a API BackgroundSync repetirão a solicitação sempre que o service worker for iniciado. Essa é uma maneira menos eficaz de repetir uma solicitação com falha, mas é uma alternativa.
Testando workbox-background-sync
Testar o comportamento da Sincronização em segundo plano pode ser complicado, mas é possível fazer isso no Chrome DevTools. A melhor abordagem atual é mais ou menos assim:
- Carregue uma página que registre seu service worker.
- Desative a conexão de rede do computador ou desative o servidor da Web. Não use o botão de alternância off-line no Chrome DevTools. A caixa de seleção off-line afeta apenas as solicitações da página, mas as solicitações do service worker continuarão a ser processadas.
- Faça solicitações de rede que precisam ser enfileiradas com
workbox-background-sync. ConsulteChrome DevTools > Application > IndexedDB > workbox-background-sync > requestspara verificar as solicitações que foram colocadas na fila. - Agora restaure a conectividade de rede ou ative novamente o servidor da Web.
- Force um evento
syncantecipado acessandoChrome DevTools > Application > Service Workers. Insira o nome da tagworkbox-background-sync:<your queue name>, em que<your queue name>é o nome da fila definida. - Clique no botão "Sincronizar".
- Agora, as solicitações de rede com falha anteriores serão repetidas e enviadas. Como resultado, o armazenamento IndexedDB precisa estar vazio, já que as solicitações foram repetidas.
Conclusão
O uso de workbox-background-sync para repetir solicitações de rede com falha pode ser uma ótima maneira de melhorar a experiência do usuário e a confiabilidade do app. Por exemplo, permitir que os usuários reenviem solicitações de API com falha para que não percam os dados que gostariam de enviar à API. Ele também pode ser usado para preencher lacunas nos seus próprios dados, como análises. Na verdade, o módulo workbox-google-analytics usa workbox-background-sync em segundo plano para repetir solicitações com falha de envio de dados ao Google Analytics.
Seja qual for seu caso de uso, o workbox-background-sync simplifica esse tipo de tarefa, melhorando a experiência do desenvolvedor e oferecendo mais oportunidades para melhorar a experiência do usuário e a funcionalidade do aplicativo da Web.