service-worker - 缓存在相对路径下的缓存存储中的项目

Question

我正在尝试在服务人员的安装事件中使用标准技术将一些静态页面添加到缓存中：

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'
            ])
        })
    )
})

但是当我查看缓存的项目时 - 我看到它们被缓存在相对路径下：

因此，当然，当完整路径的 fetch 事件发生时 - 缓存中将没有匹配项。知道为什么会这样吗？

Answer 1

我可能弄错了，但我认为 Dev Tools 缓存界面只显示相对路径。但我相信它们是用完整路径缓存的。

如果您记录缓存内容，您应该会看到完整路径。

例如，我的缓存界面显示“/”，但这两个：

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

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

记录https://offline-data-driven-pwa.firebaseapp.com/资源