Using Serviceworker To Intercept And Redirect Requests

I've been asked to create a service worker which will have the ability to intercept requests and redirect them to stored mock data. I have never done something like this before so

Solution 1:

The logic around handling incoming requests and generating responses (either from the cache, network, or some combination of the two) needs to be implemented in your fetch event handler.

Here's how I'd structure your fetch handler given your cache contents and use case:

self.addEventListener('fetch', (event) => {
  // Using a URL object will make routing easier.const url = newURL(event.request.url);
  const pathAndQuery = url.pathname + url.search;

  if (pathAndQuery inMOCK_DATA) {
    const cacheKey = MOCK_DATA[pathAndQuery];
    event.respondWith(
      caches.match(cacheKey, {
        cacheName: CACHE_NAME,
      })
    );
  }

  // If pathAndQuery isn't in MOCK_DATA, then respondWith()// won't be called, and the default network behavior will// be used for this request.
});

You might be able to use a library like https://mswjs.io/ as an alternative to writing this by hand, but that's the general idea if you decide to do it yourself.