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

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

但是当我查看缓存项时 - 我发现它们缓存在相对路径下：

当然，当完整路径的获取事件出现时 - 缓存中将没有匹配项。知道为什么会这样吗？

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/ 资源

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

Item cached in the cache storage under relative paths

service-worker

cacheapi