💡
If you ever tried to consume Response using json() and blob() at the same time, you know it's prohibited. You can consume Response only once... unless you use response.body.tee() which will produce two identical copies of the response data, which you can consume separately.
Let's construct a `ReadableSource` from scratch.
Before we do that, we need an `underlying source`. This is where we get our data from. For the purpose of this exercise, let's create an async iterator which will yield an incremented integer <0, 9> after waiting 1 second. In real life, this is where you would produce data, or call some API to fetch it.
```javascript
async function* getRandomZeroToTenIntsIterator() {
for (let i = 0; i < 10; i++) {
await new Promise(resolve => {
window.setTimeout(() => {
resolve();
}, 1000);
});
yield i;
}
}
iterator = getRandomZeroToTenIntsIterator();
```
Whenever we call `iterator.next()` we get an object :`{ value: number, done: boolean }`.
Now we can feed that data into `ReadableStream`:
```javascript
iterator = getRandomZeroToTenIntsIterator();
underlyingSource = {
// Pull will be called again after promise returned by it resolves
async pull(controller) {
const { value, done } = await iterator.next();
if (done) {
controller.close();
return;
}
controller.enqueue(value);
}
};
stream = new ReadableStream(streamSource);
```
Now that we have a stream that we can feed and read from, we need to allow downloading of the stream. But **there's no way to create an Object URL from a stream.**
## Intercepting download request in a service worker
Once we have a stream, we can simulate what the server does. We'll do it in 3 steps:
1. Registering a Service Worker
2. Transferring stream ownership from main thread to the Service Worker.
3. Intercepting `FetchEvent` inside the Service Worker and responding with data from our stream, using `event.respondWith`.
4. Clicking fake download link to start download.
First, we'll register a Service Worker and transfer the stream ownership.
To pass a stream object to a Service Worker, use `postMessage` and the fact that `ReadableStream` is a [`Transferable` Object](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Transferable_objects). This is great because transferring such objects is a zero-copy operation. We literally transfer ownership from the main thread to a worker thread, meaning after the transfer, we cannot access the stream object from the source thread anymore.
```javascript
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.ready.then((registration) => {
// Second argument of postMessage is an Array of Tranferables.
registration.active.postMessage(stream, [stream]);
});
```
Now let's write worker code which will save the stream and intercept fetch events.
```javascript
let stream = null;
// Listen for a message containing stream
self.addEventListner('message', (event) => {
if (message.stream instanceof ReadableStream) {
stream = message.stream;
}
});
self.addEventListener('fetch', (event) => {
// Ignore if url does not match or stream is not set
if (event.request.url !== '/fake-download' || !stream) {
return;
}
// Create Response with a stream
const response = new Response(stream, {
headers: {
// This header hints browser to trigger file download.
// Normally server would sets it.
'Content-Disposition': 'attachment; filename="file.txt"'
}
);
// Respond...
event.respondWith(response);
});
```
At this point, we have everything ready to actually call download endpoint we just "created":
```javascript
anchor = document.createElement('a');
// We are opening link in a new tab to avoid navigating away from the current page.
// but new tab won't acutally open when browser realizes it should download instead of display
a.target="_blank"
anchor.href = '/fake-download'
// Open the link
a.click()
```