javascript - 在 Cache API 中，使用 caches.match(event.request) 和 caches.match(event.request.url) 有什么区别

Question

我正在与服务 worker 一起工作，我有以下代码

  self.addEventListener('fetch', function (event) {
    const url = new URL(event.request.url)

    if (event.request.mode == "navigate") {
        const fetchData = fetch(event.request).catch(function () {
            //console.log("errr")
            return caches.match("/core/index.php/offline_controlador/index")
        });
        event.respondWith(fetchData)
        return;
    }

    event.respondWith(
        caches.match(event.request).then(function (response) {
            return response || fetch(event.request);
        })
    );
 });

当我尝试从缓存中获取这些文件时，它不起作用，但是当我将代码更改为

event.respondWith(
        caches.match(event.request.url).then(function(response) {
          return response || fetch(event.request);
        })
    );

代替

event.respondWith(
            caches.match(event.request).then(function(response) {
              return response || fetch(event.request);
            })
        );

效果很好

Answer 1

缓存存储 API 规范的相关部分是 5.4.2 . (尽管这适用于 Cache 对象的 matchAll() 方法，当您执行 caches.match( )。

与您的问题特别相关的是第 2 步:

If the optional argument request is not omitted, then:

• If request is a Request object, then:

  • Set r to request’s request.

  • If r’s method is not GET and options.ignoreMethod is false, return a promise resolved with an empty array.

• Else if request is a string, then:

  • Set r to the associated request of the result of invoking the initial value of Request as constructor with request as its argument. If this throws an exception, return a promise rejected with that exception.

总而言之，最大的区别在于，如果 Request 有一个方法 不是'GET'。也许这就是您遇到的问题。

除此之外，这两种方法基本上应该是相同的，尽管传入一个 Request 效率稍微高一些，因为浏览器不必隐式创建一个 Request 基于字符串的对象。