- From: Dexter Esajas <notifications@github.com>
- Date: Wed, 22 Dec 2021 04:26:03 -0800
- To: w3c/ServiceWorker <ServiceWorker@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/ServiceWorker/issues/1622@github.com>
**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