title: Using ServiceWorker to intercept and redirect requests
body: <p>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 I am struggling a bit. The service worker is activated when testMode=true is added to the URL. I have 2 files for dealing with. This is what I have so far:</p>
  <p>TestMode.ts</p>
  <pre><code>class TestMode {
      constructor() {
          if (!this.isEnabled()) {
              return;
          }
  
          if (!('serviceWorker' in navigator)) {
              console.log('Browser does not support service workers');
              return;
          }
  
          this.init();
      }
  
      private init(): void {
          navigator.serviceWorker
              .register('planner-worker/js/worker.min.js')
              .then(this.handleRegistration)
              .catch((error) =&gt; { throw new Error('Service Worker registration failed: ' + error.message); });
  
          navigator.serviceWorker.addEventListener('message', event =&gt; {
              // event is a MessageEvent object
              console.log(`The service worker sent me a message: ${event.data}`);
          });
  
          navigator.serviceWorker.ready.then( registration =&gt; {
              if (!registration.active) {
                  console.log('failed to communicate')
  
                  return;
              }
  
              registration.active.postMessage(&quot;Hi service worker&quot;);
          });
      }
  
      private handleRegistration(registration: ServiceWorkerRegistration): void {
          registration.update();
  
          console.log('Registration successful, scope is:', registration.scope);
      }
  
      private isEnabled(): boolean {
          return locationService.hasParam('testMode');
      }
  }
  
  export default new TestMode();
  </code></pre>
  <p>serviceWorker.ts</p>
  <pre><code>const CACHE_NAME = 'mockData-cache';
  
  const MOCK_DATA: Record&lt;string, string&gt; = {
      '/units/all?availability=Active&amp;roomTypeHandle=kitchens': 'mock-data/unitData.json',
      '/frontal-ranges/kitchens?' : 'mock-data/kitchensData.json',
      '/carcase-ranges/?availability=Active&amp;roomTypeHandle=kitchens' : 'mock-data/carcaseRangesData.json'
  };
  
  
  self.addEventListener('install', event =&gt; {
      console.log('Attempting to install service worker and cache static assets');
      event.waitUntil(
          caches.open(CACHE_NAME)
              .then(cache =&gt; {
                  return cache.addAll(Object.values(MOCK_DATA));
              })
      );
  });
  
  
  self.addEventListener('activate', function(event) {
      console.log('Claiming control');
      return self.clients.claim();
  });
  self.addEventListener( &quot;fetch&quot;, event =&gt; {
      console.log('WORKER: Fetching', event.request);
  });
  </code></pre>
  <p>What I have so far works, the service worker is registered and that mock data json files are stored in the cache.</p>
  <p>What I am not sure what to do is when a certain request is made, the service worker will use the mock data stored in the cache instead.</p>
  <p>For example, how can I get it so that when the request is made for: /units/all?availability=Active&amp;roomTypeHandle=kitchens the service worker will redirect to mock-data/unitData.json in the cache instead?</p>
  <p>I hope I've made sense, any help would be really appreciated, this is all new to me.</p>