Respond always with index.html - reactjs

Question

React app (usually) uses same index.html for all URLs and that's what my server responds with.
However, first request is never example.com/index.html, it's for exampleexample.com/, example.com/posts, example.com/post/123, example.com/contact and so on..
If I turn on offline mode from Chrome DevTools, I just get default No Connection page.
How to always respond with index.html from cache?
Relevant code:
self.addEventListener('install', function(e) {
self.skipWaiting()
e.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'index.html',
'main.js',
'main.css'
])
})
)
})
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(match) {
// If no match in cache, send request
return match || fetch(e.request)
})
)
})
Im using localhost but I couldn't find any information that it matters when it comes to this problem.

Answer 1

It's because you've explicitly trying to open only cache hits from the cache (caches.match(e.request).then... in your fetch listener). So it will only match the URLs you have manually added to the cache.
To respond for all requests with the pre-cached value, you'd need to explicitly look for index.html cache entry, something like this:
self.addEventListener('fetch', function(e) {
var indexRequest = new Request('/index.html');
// route index.html-based URLs to the specific cache directly
if (shouldRespondWithIndex(e.request.url)) {
e.respondWith(caches.match(indexRequest))
} else {
// other URLs may go through the standard "look for exact match
// in the cache with network fallback" route
e.respondWith(
caches.match(e.request).then(function(match) {
// If no match in cache, send request
return match || fetch(e.request)
}))
}
})
Note that your shouldRespondWithIndex implementation should return false for all non-document requests, i.e. images, stylesheets etc., otherwise the Service Worker will replace it with index.html, too.

Answer 2

You need to change this part of your code:
caches.match(e.request).then(function(match) {
// If no match in cache, send request
return match || fetch(e.request)
})
To return index.html given the conditions that you want. You can find more in the cache documentation.
https://developer.mozilla.org/en-US/docs/Web/API/Cache
To respond to the visitor and avoid that offline screen, the part you have to decide how to handle is how to check event.request to see if returning index.html is good, otherwise it might return that even when you don't want to. You have to use event.respondWith, manually open the cache, find the cache element you want and return it. So instead of looking for a match to event.request, find a match to index.html like this:
event.respondWith(
// Opens Cache objects that start with 'font'.
caches.open(CURRENT_CACHES['font']).then(function(cache) {
return cache.match('/index.html').then(function(response) {
if (response) {
console.log(' Found response in cache:', response);
return response;
}
}).catch(function(error) {
// Handles exceptions that arise from match() or fetch().
console.error(' Error in fetch handler:', error);
throw error;
});
})
);