@yrobot/sw-proxy

@yrobot/sw-proxy

A client proxy for all url requests in the website, based on service worker.

Demo

Design

Thanks to the Service Worker, we can intercept all requests in the website, and then we can return the response we want.

But, as for the secure reason, we can't register the Service Worker from a inline data url, so you have to serve the Service Worker by yourself, But i can handle the logic inside the Service Worker.

So i will split the repo into two parts, one is the client part, which handle the logic inside html, and the other is the sw part, which handle the logic inside the Service Worker.

Usage

$3

``bash
yarn add @yrobot/sw-proxy
`

$3

service-worker.ts

`ts
import "@yrobot/sw-proxy/sw";
`

$3

`ts
import SWProxy from "@yrobot/sw-proxy/client";

(async () => {
// init the swProxy
await swProxy.register();

// set the proxy list
await swProxy.set([
{
url: "/get",
response: {
body: "hello world",
},
},
{
url: "/post",
method: "POST",
response: async () => ({
body: JSON.stringify({
time: new Date().toLocaleString(),
name: "sw-proxy",
}),
options: {
headers: {
"content-type": "application/json",
},
},
}),
},
{
url: "/image.png",
response: {
body: new Blob(), // image blob
},
},
] as ProxyItem[]);

// add proxy item
await swProxy.add([
{
url: "/image2.png",
response: {
body: new Blob(), // image blob
},
},
] as ProxyItem[]);

// remove proxy item
await swProxy.remove(["/image.png"] as ProxyURL[]);

// get current active proxy list
swProxy.list();

// clear all proxy
await swProxy.clear();

// unregister the seProxy
await swProxy.unregister();
})();
`

Structure

$3

`ts
type ProxyURL = string; // support RegExp later maybe
`

$3

`ts
interface FetchHandlerParams {
pathname: string;
url: string;
search: Record;
}

interface ResponseConstructor {
body:
| string
| null
| Blob
| ArrayBuffer
| DataView
| FormData
| ReadableStream
| URLSearchParams;
options?: ResponseInit;
}

interface ProxyItem {
url: ProxyURL;
method?: string;
response:
| ResponseConstructor
| ((params: FetchHandlerParams) => Promise);
}
``