如何访问 Cache.addAll() 请求数组

Question

有一个简单的 service worker 在收到消息时进行更新，如下所示。这工作正常并且缓存已更新。但接下来是让其中一个文件无法访问，并尝试获得一些通知，指出其中一个文件失败了。如何列出请求的结果？

看这里 [https://developer.mozilla.org/en-US/docs/Web/API/Cache/addAll][1]

州 "The request objects created during retrieval become keys to the stored response operations." 这是如何解释的？并在访问的代码中？

self.addEventListener('message',  event => {
  console.log('EventListener message ' + event.data);

 event.waitUntil(
    caches.open('minimal_sw').then(cache => {
       return cache.addAll(fileList).then(function(responseArray){
         console.log('EventListener responseArray ' + responseArray);
         self.skipWaiting();
       });
    })
  )
});

Answer 1

今年早些时候，addAll() 行为是 changed，因此如果任何基础请求 return 响应没有 2xx 状态，它将被拒绝代码。此新行为已在支持缓存存储 API.

的所有浏览器的当前版本中实现

因此，如果您想检测一个（或多个）请求何时失败，您可以将 .catch() 链接到 addAll() 调用的末尾。

但是，为了更笼统地回答您的问题，当您将字符串数组传递给 addAll() 时，它们是 implicitly converted（第 6.4.4.4.1 节）到 Request使用 Request 构造函数隐含的所有默认值的对象。

创建的那些 Request 对象是短暂的，但不会保存在任何地方供后续 then() 使用。如果出于某种原因，您确实需要用于在 then() 内部发出网络请求的实际底层 Request 对象，您可以显式构造一个 Request 对象数组并传递addAll():

var requests = urls.map(url => new Request(url));
caches.open('my-cache').then(cache => {
  return cache.addAll(requests).then(() => {
    // At this point, `cache` will be populated with `Response` objects,
    // and `requests` contains the `Request` objects that were used.
  }).catch(error => console.error(`Oops! ${error}`));
});

当然，如果您有一个 Cache 对象并想要获取键列表（对应于请求 URL），您可以随时通过 keys()方法：

caches.open('my-cache')
  .then(cache => cache.keys())
  .then(keys => console.log(`All the keys: ${keys}`));

无需保留对用于填充缓存的原始 Request 的引用。

如何访问 Cache.addAll() 请求数组

How to access Cache.addAll() request array

service-worker