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:
// This is sort of what the ServiceWorker 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("/"));
}));
});
// Please take note the event "initial-fetch" does not exist but would probably be extactly what I would need
Clarifying information
The code below is applied for the logs in the screenshots below.
// Intercept requests to the server
self.addEventListener("fetch", function(e) {
return console.log("fetch", e.request.url, e.request.mode, e);
});
Image 1 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 /.
Image 2 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.
In image 3 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.
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.