[w3c/ServiceWorker] How to manipulate the initial page request (which is automatically) handled by the service worker (Issue #1622)

**Little background information**
My webserver responds with the same response when requesting a URL, except when requesting files for which the URL start with `/files/`.
So requesting `/home` -> `<html>[default response]</html>`.
Requesting  `/users` -> `<html>[default response]</html>`.
Requesting  `/files/test.css` -> `[test.css]`.
Requesting  `/files/test.js` -> `[test.js]`.
My client-side javascript processes the requested URL (when not a file) and determines which actions to perform / pages to show.
*I would like to get the same behaviour when using the PWA when offline.*

---
**The Question**
How can I only cache the home/index page `/` and have an **initial** request to e.g. `/users` (when offline) respond with the cached data from the home/index page `/`?
So something like:
```javascript
// This is sort of what the ServiceWorked does for you
self.addEventListener("initial-fetch", function(event) {

 event.respondWith(new Promise(function(resolve) {

  cache = await caches.open("pages");

  resolve(match = await caches.match(event.request));
 }));
});

// What I'd like to be able to do
self.addEventListener("initial-fetch", function(event) {

 event.respondWith(new Promise(function(resolve) {

  cache = await caches.open("pages");

  // Basically ignore the requested URL and always respond with the "/" data
  resolve(match = await caches.getByName("/"));
 }));
});
```

---
**Clarifying information**

The code below is applied for the logs in the screenshots below
```javascript
// Intercept requests to the server
self.addEventListener("fetch", function(e) {
  return console.log("fetch", e.request.url, e.request.mode, e);
});

```
The image shows a GET to `/` while offline results in a response and 200. This is because this page has been added to the cache (see image 3). Also the logs show a few fetches for `/files/[resource]` but not for `/`.
![1](https://user-images.githubusercontent.com/2284480/147067247-9b78fc01-6620-49aa-979d-087896be6bfd.png)

The image shows a GET to `/users` while offline results in a 404 and an empty page. This is because the webworker did not find a matching page in the cache (see image 3). Also here the logs only show a fetch for `/favicon.ico` but not for `/users`.
![2](https://user-images.githubusercontent.com/2284480/147067992-21344f8a-9ea3-4b76-839b-d420d128394f.png)

Here you see the cached pages (`/` and `/component`). You can also see they have the same Content-Length, so instead of adding 20+ static page/URL's (all the exact same) and dynamically created URL's/pages (which I do not know in advance, so not even sure how to add those...) I'd like to be able to handle the initial request myself and respond with the cached `/` page.
![3](https://user-images.githubusercontent.com/2284480/147068001-51b96fa7-0fcb-4756-b76e-a577e4610fba.png)

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

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

Received on Wednesday, 22 December 2021 12:26:16 UTC