Fetch API Avançado: Interceptação de Requisições e Cache de Respostas

A Fetch API tornou-se o padrão para fazer requisições de rede no JavaScript moderno. Embora o uso básico seja simples, desbloquear todo o seu potencial requer a compreensão de técnicas avançadas como interceptação de requisições e cache de respostas. Este artigo explorará esses conceitos em detalhe, fornecendo exemplos práticos e as melhores práticas para construir aplicações web de alto desempenho e acessíveis globalmente.

Entendendo a Fetch API

A Fetch API oferece uma interface poderosa e flexível para buscar recursos pela rede. Ela usa Promises, tornando as operações assíncronas mais fáceis de gerenciar e entender. Antes de mergulhar em tópicos avançados, vamos revisar brevemente o básico:

Uso Básico do Fetch

Uma requisição Fetch simples se parece com isto:

            
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

            

              
                Copy
              
            
          

Este código busca dados da URL especificada, verifica erros de HTTP, analisa a resposta como JSON e registra os dados no console. O tratamento de erros é crucial para garantir uma aplicação robusta.

Interceptação de Requisições

A interceptação de requisições envolve a modificação ou observação de requisições de rede antes que elas sejam enviadas ao servidor. Isso pode ser útil para vários propósitos, incluindo:

• Adicionar cabeçalhos de autenticação
• Transformar dados da requisição
• Registrar requisições para depuração
• Simular respostas de API durante o desenvolvimento

A interceptação de requisições é normalmente alcançada usando um Service Worker, que atua como um proxy entre a aplicação web e a rede.

Service Workers: A Base para a Interceptação

Um Service Worker é um arquivo JavaScript que roda em segundo plano, separado da thread principal do navegador. Ele pode interceptar requisições de rede, armazenar respostas em cache e fornecer funcionalidade offline. Para usar um Service Worker, primeiro você precisa registrá-lo:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

Este código verifica se o navegador suporta Service Workers e registra o arquivo service-worker.js. O escopo define quais URLs o Service Worker controlará.

Implementando a Interceptação de Requisições

Dentro do arquivo service-worker.js, você pode interceptar requisições usando o evento fetch:

            
self.addEventListener('fetch', event => {
  // Intercept all fetch requests
  event.respondWith(
    new Promise(resolve => {
      // Clone the request to avoid modifying the original
      const req = event.request.clone();

      // Modify the request (e.g., add an authentication header)
      const headers = new Headers(req.headers);
      headers.append('Authorization', 'Bearer your_api_key');

      const modifiedReq = new Request(req.url, {
        method: req.method,
        headers: headers,
        body: req.body,
        mode: 'cors',
        credentials: req.credentials,
        cache: req.cache,
        redirect: req.redirect,
        referrer: req.referrer,
        integrity: req.integrity
      });

      // Make the modified request
      fetch(modifiedReq)
        .then(response => resolve(response))
        .catch(error => {
          console.error('Fetch error in Service Worker:', error);
          // Optionally, return a default response or error page
          resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
        });
    })
  );
});

            

              
                Copy
              
            
          

Este código intercepta cada requisição fetch, clona-a, adiciona um cabeçalho Authorization e, em seguida, faz a requisição modificada. O método event.respondWith() informa ao navegador como lidar com a requisição. É crucial clonar a requisição; caso contrário, você estará modificando a requisição original, o que pode levar a um comportamento inesperado. Ele também garante o encaminhamento de todas as opções da requisição original para assegurar a compatibilidade. Observe o tratamento de erros: é importante fornecer um fallback caso o fetch falhe (por exemplo, quando estiver offline).

Exemplo: Adicionando Cabeçalhos de Autenticação

Um caso de uso comum para a interceptação de requisições é adicionar cabeçalhos de autenticação a requisições de API. Isso garante que apenas usuários autorizados possam acessar recursos protegidos.

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        const headers = new Headers(req.headers);
        // Replace with actual authentication logic (e.g., retrieving token from local storage)
        const token = localStorage.getItem('api_token'); 

        if (token) {
          headers.append('Authorization', `Bearer ${token}`);
        } else {
           console.warn("No API token found, request may fail.");
        }

        const modifiedReq = new Request(req.url, {
          method: req.method,
          headers: headers,
          body: req.body,
          mode: 'cors',
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          integrity: req.integrity
        });

        fetch(modifiedReq)
          .then(response => resolve(response))
          .catch(error => {
            console.error('Fetch error in Service Worker:', error);
            resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
          });
      })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Este código adiciona um cabeçalho Authorization a requisições que começam com https://api.example.com. Ele recupera o token da API do armazenamento local. É crucial implementar um gerenciamento de tokens e medidas de segurança adequadas, como HTTPS e armazenamento seguro.

Exemplo: Transformando Dados da Requisição

A interceptação de requisições também pode ser usada para transformar dados da requisição antes de serem enviados ao servidor. Por exemplo, você pode querer converter dados para um formato específico ou adicionar parâmetros adicionais.

            
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/submit-form')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        req.text().then(body => {
          try {
            const parsedBody = JSON.parse(body);
            // Transform the data (e.g., add a timestamp)
            parsedBody.timestamp = new Date().toISOString();

            // Convert the transformed data back to JSON
            const transformedBody = JSON.stringify(parsedBody);

            const modifiedReq = new Request(req.url, {
              method: req.method,
              headers: req.headers,
              body: transformedBody,
              mode: 'cors',
              credentials: req.credentials,
              cache: req.cache,
              redirect: req.redirect,
              referrer: req.referrer,
              integrity: req.integrity
            });

            fetch(modifiedReq)
              .then(response => resolve(response))
              .catch(error => {
                console.error('Fetch error in Service Worker:', error);
                resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
              });
          } catch (error) {
            console.error("Error parsing request body:", error);
            resolve(fetch(event.request)); // Fallback to original request
          }
        });
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Este código intercepta requisições para /submit-form, analisa o corpo da requisição como JSON, adiciona um timestamp e, em seguida, envia os dados transformados para o servidor. O tratamento de erros é essencial para garantir que a aplicação não quebre se o corpo da requisição não for um JSON válido.

Cache de Respostas

O cache de respostas envolve o armazenamento das respostas de requisições de API no cache do navegador. Isso pode melhorar significativamente o desempenho, reduzindo o número de requisições de rede. Quando uma resposta em cache está disponível, o navegador pode servi-la diretamente do cache, sem precisar fazer uma nova requisição ao servidor.

Benefícios do Cache de Respostas

• Desempenho Aprimorado: Tempos de carregamento mais rápidos e uma experiência de usuário mais responsiva.
• Consumo Reduzido de Banda: Menos dados são transferidos pela rede, economizando banda tanto para o usuário quanto para o servidor.
• Funcionalidade Offline: Respostas em cache podem ser servidas mesmo quando o usuário está offline, proporcionando uma experiência contínua.
• Economia de Custos: Menor consumo de banda se traduz em custos mais baixos tanto para usuários quanto para provedores de serviços, especialmente em regiões com planos de dados caros ou limitados.

Implementando Cache de Respostas com Service Workers

Service Workers fornecem um mecanismo poderoso para implementar o cache de respostas. Você pode usar a API Cache para armazenar e recuperar respostas.

            
const cacheName = 'my-app-cache-v1';
const cacheableUrls = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  'https://api.example.com/data'
];

// Install event:  Cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        console.log('Caching app shell');
        return cache.addAll(cacheableUrls);
      })
  );
});

// Activate event: Clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== cacheName)
          .map(name => caches.delete(name))
      );
    })
  );
});

// Fetch event: Serve cached responses or fetch from the network
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // Clone the response (because it's a stream and can only be consumed once)
            const responseToCache = response.clone();

            caches.open(cacheName)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        ).catch(error => {
          // Handle network error
          console.error("Fetch failed:", error);
          // Optionally, provide a fallback response (e.g., offline page)
          return caches.match('/offline.html');
        });
      })
  );
});

            

              
                Copy
              
            
          

Este código armazena em cache os ativos estáticos durante o evento de instalação e serve respostas em cache durante o evento de fetch. Se uma resposta não for encontrada no cache, ele a busca na rede, armazena-a em cache e a retorna. O evento `activate` é usado para limpar caches antigos quando o Service Worker é atualizado. Essa abordagem também garante que apenas respostas válidas (status 200 e tipo 'basic') sejam armazenadas em cache.

Estratégias de Cache

Existem várias estratégias de cache diferentes que você pode usar, dependendo das necessidades da sua aplicação:

• Cache-First (Primeiro o Cache): Tenta servir a resposta do cache primeiro. Se não for encontrada, busca na rede e armazena em cache. Isso é bom para ativos estáticos e recursos que não mudam com frequência.
• Network-First (Primeiro a Rede): Tenta buscar a resposta da rede primeiro. Se falhar, serve do cache. Isso é bom para dados dinâmicos que precisam estar atualizados.
• Cache, then Network (Cache, depois Rede): Serve a resposta do cache imediatamente e, em seguida, atualiza o cache com a versão mais recente da rede. Isso proporciona um carregamento inicial rápido e garante que o usuário sempre tenha os dados mais recentes (eventualmente).
• Stale-While-Revalidate: Retorna uma resposta em cache imediatamente enquanto também verifica a rede por uma versão atualizada. Atualiza o cache em segundo plano se uma versão mais nova estiver disponível. Semelhante a "Cache, depois Rede", mas oferece uma experiência de usuário mais fluida.

A escolha da estratégia de cache depende dos requisitos específicos da sua aplicação. Considere fatores como a frequência das atualizações, a importância de ter dados recentes e a largura de banda disponível.

Exemplo: Armazenando Respostas de API em Cache

Aqui está um exemplo de como armazenar respostas de API em cache usando a estratégia Cache-First:

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          // Cache hit - return response
          if (response) {
            return response;
          }

          // Not in cache - fetch from network
          return fetch(event.request).then(
            response => {
              // Check if we received a valid response
              if (!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }

              // Clone the response (because it's a stream and can only be consumed once)
              const responseToCache = response.clone();

              caches.open(cacheName)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });

              return response;
            }
          );
        })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

Este código armazena em cache as respostas da API de https://api.example.com. Quando uma requisição é feita, o Service Worker primeiro verifica se a resposta já está no cache. Se estiver, a resposta em cache é retornada. Se não, a requisição é feita para a rede, e a resposta é armazenada em cache antes de ser retornada.

Considerações Avançadas

Invalidação de Cache

Um dos maiores desafios com o cache é a sua invalidação. Quando os dados mudam no servidor, você precisa garantir que o cache seja atualizado. Existem várias estratégias para a invalidação de cache:

• Cache Busting: Adicionar um número de versão ou timestamp à URL do recurso. Quando o recurso muda, a URL muda, e o navegador buscará a nova versão.
• Expiração Baseada em Tempo: Definir uma idade máxima para respostas em cache. Após o tempo de expiração, o navegador buscará uma nova versão do servidor. Use o cabeçalho Cache-Control para especificar a idade máxima.
• Invalidação Manual: Usar o método caches.delete() para remover manualmente respostas em cache. Isso pode ser acionado por um evento do lado do servidor ou uma ação do usuário.
• WebSockets para Atualizações em Tempo Real: Usar WebSockets para enviar atualizações do servidor para o cliente, invalidando o cache quando necessário.

Redes de Distribuição de Conteúdo (CDNs)

Redes de Distribuição de Conteúdo (CDNs) são redes distribuídas de servidores que armazenam conteúdo em cache mais perto dos usuários. Usar uma CDN pode melhorar significativamente o desempenho para usuários ao redor do mundo, reduzindo a latência e o consumo de banda. Provedores populares de CDN incluem Cloudflare, Amazon CloudFront e Akamai. Ao integrar com CDNs, garanta que os cabeçalhos Cache-Control estejam configurados corretamente para um comportamento de cache otimizado.

Considerações de Segurança

Ao implementar a interceptação de requisições e o cache de respostas, é essencial considerar as implicações de segurança:

• HTTPS: Sempre use HTTPS para proteger os dados em trânsito.
• CORS: Configure o Compartilhamento de Recursos de Origem Cruzada (CORS) corretamente para evitar acesso não autorizado a recursos.
• Sanitização de Dados: Sanitize a entrada do usuário para prevenir ataques de cross-site scripting (XSS).
• Armazenamento Seguro: Armazene dados sensíveis, como chaves de API e tokens, de forma segura (por exemplo, usando cookies somente HTTPS ou uma API de armazenamento seguro).
• Integridade de Sub-recurso (SRI): Use SRI para garantir que os recursos buscados de CDNs de terceiros não foram adulterados.

Depurando Service Workers

Depurar Service Workers pode ser desafiador, mas as ferramentas de desenvolvedor do navegador fornecem vários recursos para ajudar:

• Aba Application: A aba Application no Chrome DevTools fornece informações sobre Service Workers, incluindo seu status, escopo e armazenamento de cache.
• Logs no Console: Use declarações console.log() para registrar informações sobre a atividade do Service Worker.
• Breakpoints: Defina breakpoints no código do Service Worker para percorrer a execução e inspecionar variáveis.
• Update on Reload: Habilite "Update on reload" na aba Application para garantir que o Service Worker seja atualizado toda vez que você recarregar a página.
• Unregister Service Worker: Use o botão "Unregister" na aba Application para cancelar o registro do Service Worker. Isso pode ser útil para solucionar problemas ou começar do zero.

Conclusão

A interceptação de requisições e o cache de respostas são técnicas poderosas que podem melhorar significativamente o desempenho e a experiência do usuário em aplicações web. Usando Service Workers, você pode interceptar requisições de rede, modificá-las conforme necessário e armazenar respostas em cache para funcionalidade offline e tempos de carregamento mais rápidos. Quando implementadas corretamente, essas técnicas podem ajudá-lo a construir aplicações web de alto desempenho e acessíveis globalmente que fornecem uma experiência de usuário contínua, mesmo em condições de rede desafiadoras. Considere as diversas condições de rede e os custos de dados enfrentados por usuários em todo o mundo ao implementar essas técnicas para garantir acessibilidade e inclusão ideais. Sempre priorize a segurança para proteger dados sensíveis e prevenir vulnerabilidades.

Ao dominar essas técnicas avançadas da Fetch API, você pode levar suas habilidades de desenvolvimento web para o próximo nível e construir aplicações web verdadeiramente excepcionais.