Intercepting fetch in a service worker#

1
<h1>Service worker demo</h1>
2

3
<script>
4
const registerServiceWorker = async () => {
5
  if ('serviceWorker' in navigator) {
6
    try {
7
      const registration = await navigator.serviceWorker.register(
8
        '/sw.js',
9
        {
10
          scope: '/',
11
        }
12
      );
13
      if (registration.installing) {
14
        console.log('Service worker installing');
15
      } else if (registration.waiting) {
16
        console.log('Service worker installed');
17
      } else if (registration.active) {
18
        console.log('Service worker active');
19
      }
20
    } catch (error) {
21
      console.error(`Registration failed with ${error}`);
22
    }
23
  }
24
};
25

26
registerServiceWorker();
27
</script>

1
self.addEventListener('fetch', (event) => {
2
  const request = event.request;
3
  const url = (new URL(request.url));
4
  if (url.pathname == "/") {
5
    // Don't intercept hits to the homepage
6
    return;
7
  }
8
  const params = new URLSearchParams(url.search);
9
  const info = {
10
    url: request.url,
11
    method: request.method,
12
    path: url.pathname,
13
    params: Array.from(params.entries())
14
  };
15
  event.respondWith(new Response(
16
    `<p>Hello world! Request was: <pre>${JSON.stringify(info, null, 4)}</p>`, {
17
    headers: { 'Content-Type': 'text/html' }
18
  }));
19
});

1
python3 -m http.server 8009