Offline Websites redirected uri as rootpage

Question

I've tried to build an offline webpage with javascript serviceworkers. In my case there is my url: www.xxx.xx/home. If i call a page like www.xxx.xx/index.php, i can put index.php into the offline cache and it is offline available. But /home (internaly routed to index.php with mod_rewrite/apache2.4) is stored as key, but after iam offline it is not available.

var CACHE_NAME = 'cache-v1';
var urlsToCache = ['/', '/home', '/index.php'];
self.addEventListener('install', function(event) {
  // Perform install steps
  console.log("Install Cache");
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
        console.log(urlsToCache.length + " files installed successfully");
        return cache.addAll(urlsToCache);
    })
  );
});

With something like this, index.php could called offline but not xxx.xx/home. How should it look to cache a redirected/rewrited uri?

Something like:

this.addEventListener('activate', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME).then(function(cache) {
            cache.keys().then(function(keys) {
                keys.forEach(function(request, index, array) {
                     console.log(index + " Url: " + request.url + " follow: " + request.redirect + " mode: " + request.cache);
                });
            });
        })
    );
});

results in

serviceworker.js:37 0 Url: --httpsurl--/ follow: follow mode: undefined

serviceworker.js:37 1 Url: --httpsurl--/home follow: follow mode: undefined

serviceworker.js:37 2 Url: --httpsurl--/index.php follow: follow mode: undefined

Tested in Chrome and Firefox (latest version)

Answer 1

It seems that cache.addAll only caches the request body not the delivered content. It seems to work with cache.put as fallback in the fetch event listener. But a second problem appears: Firefox says "translated from german", "Damaged content, was violated the network protocol".

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request).then(function(response) {
        // Cache hit - return response
        if(response) {
             console.log("Found " + event.request + " in cache");
             return response;
        } else {
        console.log("Do not found " + event.request + " in cache");
    }

    console.log("Fetch Url: " + event.request.url + " follow: " + event.request.redirect + " mode: " + event.request.cache);
    if(event.request.headers.get('Accept').indexOf('text/html') !== -1 || event.request.headers.get('Accept').indexOf('css') !== -1 || event.request.headers.get('Accept').indexOf('javascript') !== -1) {
        return fetch(event.request).then(function(response) {
            let copy = response.clone();
            event.waitUntil(
                caches.open(CACHE_NAME).then(function(cache) { cache.put(event.request.url, copy); })
            );
            return response || caches.match('/offline');
        }).catch(function(error) {
            console.log(error);
        });
    } else {
        console.log(event.request.headers.get('Accept'));
        return fetch(event.request);
    }
    }));
});

If you remove '/home' from static chache it works in chrome. But beware: If serviceworker activation is on /home a second click must appear to call the fetch event.