Implementing Mock Responses by Intercepting Network Requests with Service Workers

A Service Worker is a script that sits between the browser and the network, capable of intercepting requests and caching resources. This article explains the Service Worker lifecycle and event-driven architecture, and covers how to use it to generate Mock Responses.

Service Workers and Communication Channels

Since Service Workers run independently of the page, direct communication is impossible. To resolve this, a MessageChannel object is used to create a bidirectional communication channel. Messages can be exchanged between the Service Worker and the web app via port1 and port2, which is similar to the principle of a tin can telephone.

Mock Response Implementation Logic

The process of intercepting network requests and returning fake responses is as follows:

• When the web app sends a fetch request, the Service Worker receives the fetch event.
• The Service Worker passes the original request information to the web app via MessageChannel.
• The web app references the defined handler (handlers.js) and generates Mock response data if a matching URL exists.
• The generated response is returned to the Service Worker via the channel, and the Service Worker replaces the original request's response with it.

Usage and Extension

This approach is useful for testing the frontend without a backend API during the development stage, or for simulating specific network error scenarios. By dynamically modifying the handler object or integrating with local storage, responses can be flexibly adjusted even while the app is running.