Javascript 在CacheAPI中，使用caches.match（event.request）和caches.match（event.request.url）有什么区别

我和服务工作者一起工作，我有以下代码

  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);
            })
        );

---

它工作得非常完美

缓存存储API规范的相关部分如下所示。（尽管这适用于

Cache

对象的

matchAll（）

方法，但当您执行

caches.match（）

时，这就是最终被称为“引擎盖下”的方法

与您的问题特别相关的是步骤2：

如果未省略可选参数请求，则：

• 如果

  请求

  是

  请求

  对象，则：
  • 将

    r

    设置为

    request

    的请求

  • 如果

    r

    的方法不是

    GET

    并且

    options.ignoreMethod

    为false，则返回 使用空数组解析承诺

• 否则，如果请求是字符串，则：
  • 将

    r

    设置为调用初始

    Request

    作为构造函数的值，其参数为

    Request

    。如果 抛出异常，返回被该异常拒绝的承诺

总而言之，最大的区别在于，如果

请求

有一个

方法

而不是

'GET'

，那么将

请求

对象作为第一个参数传递可能会导致

匹配（）

失败。也许这就是您遇到的问题

除此之外，这两种方法基本上应该是相同的，尽管传入

请求

稍微更有效，因为浏览器不必基于字符串隐式创建

请求

对象。

嗨，Sergio，你的url是什么（是本地主机吗？），你的服务器和你使用的浏览器是什么？