[w3c/ServiceWorker] Synthetic Response via Static Routing API (Issue #1796)

sisidovski created an issue (w3c/ServiceWorker#1796)

Copied this from https://github.com/WICG/service-worker-static-routing-api/issues/32 to collect feedback from broader community. Also, here is the [slide](https://docs.google.com/presentation/d/1dgpdEVcdfAt0R7lBK6GUcv3AlGna0Avy6E39tvALaxc/edit?slide=id.g301d8afd07c_0_667#slide=id.g301d8afd07c_0_667) which was used in TPAC2024, explaining this concept more visually.

# Synthetic Response via Static Routing API

We'd like to explore whether the browser could invoke the [navigation commit ](https://chromium.googlesource.com/chromium/src/+/main/docs/navigation.md#Commit) much earlier than the regular navigation by extending the Static Routing API. The navigation commit in the renderer process is currently started only after receiving the navigation response. While waiting for the response, the renderer process is mostly idle or not created yet. However, the commit navigation takes some time to process and it can delay the renderer process going to be ready. This is not efficient.

What if the Static Routing API can store the beginning of response in its database, and use it as the part of navigation response while waiting for the network? The browser will be able to start the commit navigation right after the navigation start. The Static Routing API should use one stream as a response. The stream won't be closed after receiving the actual network response. The browser appends the actual response to the stream until all response data is processed.

## Is this similar to App Shell?

This is similar to what the app shell model does. But the Synthetic Response via Static Routing API would be better in most cases, because it doesn't involve the SW bootstrap. The static routing router evaluation is happened before starting the SW, while the regular app shell depends on the fetch handler.

However, what the Synthetic Response can do should be polyfillable like below:

```js
onfetch = (event) => {
  event.respondWith(new Response(synthetic_header, synthetic_body));
  fetch(event.request)
    .then(res => { plumb res.body to synthetic_body; })
    .catch(e => { Set error_text to synthetic_body; });
};
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/ServiceWorker/issues/1796
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/ServiceWorker/issues/1796@github.com>