Item cached in the cache storage under relative paths

Question

I am trying to add some static pages to cache using standard technique in the install event of the service worker:

self.addEventListener('install',function(event) {
    event.waitUntil(
        caches.open(static_cache).then(function(cache){
            return cache.addAll([
             '/', 
             'index.html',
             'css/styles.css',
             'js/dbhelper.js',
             'js/main.js',
             'js/restaurant_info.js'
            ])
        })
    )
})

but when I look into cached items - I see they're cached under relative paths:

So of course when fetch event comes for the full path - there will be no match in cache. Any idea why this is happening?

Answer 1

I may be mistaken but I think the Dev Tools cache interface just displays the relative paths. But I believe they are cached with the full path.

If you log the cache content you should see the full path.

For example my cache interfaces shows "/", but both of these:

caches.match('https://offline-data-driven-pwa.firebaseapp.com/')
  .then(res => console.log(res)) 

caches.match('/')
  .then(res => console.log(res)) 

log the https://offline-data-driven-pwa.firebaseapp.com/ resource