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 > requests
para 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
sync
antecipado 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.