Question

我正在浏览Using Service Workers walk-through on MDN，但对安装事件进行了修改，该事件阻止了在Fetch事件中caches.match(event.request)找到我的缓存资产。

以下是设置Install事件以缓存资产时漫游代码的外观：

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

这是与我的次要修改相同的代码（关键区别是我从传入addAll（）的数组中删除了'/sw-test/',：

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

演练的下一步是获取那些缓存的资产。请参阅以下代码：

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request);
  );
});

我的问题是，为什么Fetch事件能够从Cache中提取资产，为什么还需要添加'/sw-test/',？具体来说，为什么Fetch事件中的这行代码caches.match(event.request);不起作用，除非我将'/sw-test/',放入要缓存的资产数组中？

此外，正如我们所讨论的那样，我已经通过两个代码示例验证了资产是否在Cache中。

从Cache中获取不与Service Worker一起使用

0 个答案: