Fetch API Advanced: Request Interception vs. Response Caching for Global Web Applications

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

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  // Intercepted request logic goes here
});

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  const url = new URL(event.request.url);
  const apiKey = 'YOUR_GLOBAL_API_KEY'; // Load from a secure source or config

  if (url.origin === 'https://api.example.com') {
    // Clone the request so we can modify it
    const modifiedRequest = new Request(event.request, {
      headers: {
        'X-API-Key': apiKey,
        // You can also merge existing headers: 
        // ...Object.fromEntries(event.request.headers.entries()),
        // 'X-Custom-Header': 'value'
      }
    });

    // Respond with the modified request
    event.respondWith(fetch(modifiedRequest));
  } else {
    // For other requests, proceed as normal
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  const url = new URL(event.request.url);
  const userLocation = getUserLocation(); // Placeholder for location logic

  if (url.pathname === '/api/data') {
    let targetUrl = url.toString();
    if (userLocation === 'europe') {
      targetUrl = 'https://api.europe.example.com/data';
    } else if (userLocation === 'asia') {
      targetUrl = 'https://api.asia.example.com/data';
    }

    // Clone and redirect
    const redirectedRequest = new Request(targetUrl, {
      method: event.request.method,
      headers: event.request.headers,
      body: event.request.body,
      mode: 'cors'
    });
    event.respondWith(fetch(redirectedRequest));
  } else {
    event.respondWith(fetch(event.request));
  }
});

function getUserLocation() {
  // In a real app, this would involve GeoIP lookup, user settings, or browser geolocation API.
  // For demonstration, let's assume a simple logic.
  return 'asia'; // Example
}

            

              
                Copy
              
            
          

            let ongoingRequests = {};

self.addEventListener('fetch', function(event) {
  const requestId = Math.random().toString(36).substring(7);
  ongoingRequests[requestId] = event.request;

  event.respondWith(
    fetch(event.request).finally(() => {
      delete ongoingRequests[requestId];
    })
  );
});

// Example of how you might cancel a request from the main thread (less common for interception itself, but demonstrates control)
function cancelRequest(requestUrl) {
  for (const id in ongoingRequests) {
    if (ongoingRequests[id].url === requestUrl) {
      // Note: Fetch API doesn't have a direct 'abort' for a request *after* it's sent via SW.
      // This is more illustrative. For true cancellation, AbortController is used *before* fetch.
      console.warn(`Attempting to cancel request for: ${requestUrl}`);
      // A more practical approach would involve checking if a request is still relevant before calling fetch in the SW.
      break;
    }
  }
}

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  const url = new URL(event.request.url);

  if (url.pathname === '/api/users') {
    // Check if it's a GET request
    if (event.request.method === 'GET') {
      const mockResponse = {
        status: 200,
        statusText: 'OK',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify([
          { id: 1, name: 'Alice', region: 'North America' },
          { id: 2, name: 'Bob', region: 'Europe' },
          { id: 3, name: 'Charlie', region: 'Asia' }
        ])
      };
      event.respondWith(new Response(mockResponse.body, mockResponse));
    } else {
      // Handle other methods if necessary or pass through
      event.respondWith(fetch(event.request));
    }
  } else {
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

            const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/script.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

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

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams. 
            const responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

// Optional: Clean up old caches when a new version of the SW is installed
self.addEventListener('activate', function(event) {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function() {
      // If fetch fails, fall back to the cache
      return caches.match(event.request);
    })
  );
});

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open(CACHE_NAME).then(function(cache) {
      return cache.match(event.request).then(function(cachedResponse) {
        // If cached response exists, return it immediately
        if (cachedResponse) {
          // Start fetching from network in the background
          fetch(event.request).then(function(networkResponse) {
            // If network response is valid, update the cache
            if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
              cache.put(event.request, networkResponse.clone());
            }
          }).catch(function() {
            // Network fetch failed, do nothing, already served from cache
          });
          return cachedResponse;
        }

        // No cached response, fetch from network and cache it
        return fetch(event.request).then(function(networkResponse) {
          if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
            cache.put(event.request, networkResponse.clone());
          }
          return networkResponse;
        });
      });
    })
  );
});

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // If response is found in cache, return it, otherwise return an error or fallback
      return response || new Response('Network error - Offline content not available', { status: 404 });
    })
  );
});

            

              
                Copy
              
            
          

            self.addEventListener('fetch', function(event) {
  event.respondWith(fetch(event.request));
});

            

              
                Copy
              
            
          

            // In sw.js
const CACHE_NAME = 'my-app-v2';

// Cache static assets
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll([
          '/', '/index.html', '/styles.css', '/app.js',
          '/images/logo.png'
        ]);
      })
  );
});

self.addEventListener('fetch', function(event) {
  const requestUrl = new URL(event.request.url);

  // Handle API requests
  if (requestUrl.origin === 'https://api.globalstore.com') {
    // Request Interception: Add Auth Token for API calls
    const authHeader = { 'Authorization': `Bearer ${getAuthToken()}` }; // Placeholder
    const modifiedRequest = new Request(event.request, {
      headers: {
        ...Object.fromEntries(event.request.headers.entries()),
        ...authHeader
      }
    });

    // Response Caching Strategy: Stale-While-Revalidate for product catalog
    if (requestUrl.pathname.startsWith('/api/products')) {
      event.respondWith(
        caches.open(CACHE_NAME).then(function(cache) {
          return cache.match(modifiedRequest).then(function(cachedResponse) {
            // If cached response exists, return it immediately
            if (cachedResponse) {
              // Start fetching from network in the background for updates
              fetch(modifiedRequest).then(function(networkResponse) {
                if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
                  cache.put(modifiedRequest, networkResponse.clone());
                }
              }).catch(function() { /* Ignore network errors here */ });
              return cachedResponse;
            }

            // No cached response, fetch from network and cache it
            return fetch(modifiedRequest).then(function(networkResponse) {
              if (networkResponse && networkResponse.status === 200 && networkResponse.type === 'basic') {
                cache.put(modifiedRequest, networkResponse.clone());
              }
              return networkResponse;
            });
          });
        })
      );
    }
    // Network-First for user-specific data (e.g., cart, orders)
    else if (requestUrl.pathname.startsWith('/api/user') || requestUrl.pathname.startsWith('/api/cart')) {
      event.respondWith(
        fetch(modifiedRequest).catch(function() {
          // Fallback to cache if network fails (for offline viewing of previously loaded data)
          return caches.match(modifiedRequest);
        })
      );
    }
    // Network-only for critical operations (e.g., place order)
    else {
      event.respondWith(fetch(modifiedRequest));
    }
  }
  // For other requests (e.g., external assets), use default fetch
  else {
    event.respondWith(fetch(event.request));
  }
});

function getAuthToken() {
  // This function needs to retrieve the auth token, potentially from localStorage
  // or a cookie. Be mindful of security implications.
  return localStorage.getItem('authToken') || 'guest'; // Example
}

            

              
                Copy
              
            
          

            // Inside a fetch event handler in sw.js
self.addEventListener('fetch', function(event) {
  const request = event.request;
  const url = new URL(request.url);

  if (url.pathname.startsWith('/api/content')) {
    event.respondWith(
      caches.open(CACHE_NAME).then(function(cache) {
        // Create a key that includes Accept-Language header for varying cache entries
        const cacheKey = new Request(request.url, {
          headers: {
            'Accept-Language': request.headers.get('Accept-Language') || 'en-US'
          }
        });

        return cache.match(cacheKey).then(function(cachedResponse) {
          if (cachedResponse) {
            console.log('Serving from cache for locale:', request.headers.get('Accept-Language'));
            // Potentially revalidate in background if stale-while-revalidate
            return cachedResponse;
          }

          // Fetch from network and cache with locale-specific key
          return fetch(request).then(function(networkResponse) {
            if (networkResponse.ok) {
              // Clone response for caching
              const responseToCache = networkResponse.clone();
              cache.put(cacheKey, responseToResponse);
            }
            return networkResponse;
          });
        });
      })
    );
  } else {
    event.respondWith(fetch(request));
  }
});

            

              
                Copy
              
            
          

            // In sw.js (using Workbox)
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.0/workbox-sw.js');

const CACHE_NAME = 'my-app-v2';

// Pre-cache essential assets
workbox.precaching.precacheAndRoute([
  '/', '/index.html', '/styles.css', '/app.js',
  '/images/logo.png'
]);

// Cache API requests with stale-while-revalidate
workbox.routing.registerRoute(
  /https:\/\/api\.globalstore\.com\/api\/products/, // Regex to match product API URLs
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: CACHE_NAME,
    plugins: [
      // Optionally add caching for different locales if needed
      // new workbox.cacheableResponse.CacheableResponsePlugin({
      //   statuses: [0, 200]
      // })
    ]
  })
);

// Cache user-specific data with network-first strategy
workbox.routing.registerRoute(
  /https:\/\/api\.globalstore\.com\/api\/(user|cart)/, // Regex for user/cart API
  new workbox.strategies.NetworkFirst({
    cacheName: CACHE_NAME,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        // Cache only 5 entries, expire after 30 days
        maxEntries: 5,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
      }),
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200]
      })
    ]
  })
);

// Network-only for critical operations (example)
workbox.routing.registerRoute(
  /https:\/\/api\.globalstore\.com\/api\/order/, 
  new workbox.strategies.NetworkOnly()
);

// Custom handler for adding Authorization header to all API requests
workbox.routing.registerRoute(
  /https:\/\/api\.globalstore\.com/, 
  new workbox.strategies.NetworkFirst({
    cacheName: CACHE_NAME,
    plugins: [
      {
        requestWillFetch: async ({ request, url, event, delta }) => {
          const token = localStorage.getItem('authToken');
          const headers = new Headers(request.headers);
          if (token) {
            headers.set('Authorization', `Bearer ${token}`);
          }
          return new Request(url, { ...request, headers });
        }
      }
    ]
  })
);

            

              
                Copy