Service Worker FetchEvent.respondWith 无法在 Safari 中工作

Question

我目前正在尝试设置一个 Service Worker 演示以供我自己理解。预期的行为是让服务工作人员检查任何以

.json

结尾的请求并使用虚拟负载进行响应，否则让所有请求落入实际服务器。在 OSX Chrome 和 Firefox 中，这或多或少与预期完全一致。然而，在 Safari 中，总是返回请求的default响应，我不明白为什么。

我有两名职责范围重叠的 Service Worker：一名从

/test_sw1.js

服务，另一名从

/subdir/test_sw2.js

服务。它们的内容是：

// test_sw1.js
self.addEventListener("fetch", function(event) {
    const reqUrl = event.request.url
    if (/\.json$/.test(reqUrl)) {
        console.error("REGEX MATCH SUCCEEDED")
        event.respondWith(Response.json({
            "intercepted": "YES",
            "workerId": 1,
            "originalUrl": reqUrl,
        }));
    } else {
        console.error("REGEX MATCH FAILED")
    }
})

subdir/test_sw2.js

的内容与上面相同，除了响应负载中包含

"workerId": 2

。这个想法是为了更好地理解当存在具有不同但重叠范围的多个注册时服务工作线程的行为方式。

在根页面中，我还包含一个指向以下文件

browser_swtest_base.js

的脚本标记，该文件实际上注册了服务工作人员，然后尝试在

/subdir/test.json

处获取（不存在的）JSON 文件：

navigator.serviceWorker.register('/subdir/test_sw2.js')
    .then((reg) => console.warn('SUBDIR service worker registered!', reg))
    .catch(err => console.warn('ERROR: SUBDIR service worker registration failed', err));

navigator.serviceWorker.register('/test_sw1.js')
    .then((reg) => console.warn('TOP-LEVEL service worker registered!', reg))
    .catch(err => console.warn('ERROR: TOP-LEVEL service worker registration failed', err));

fetch("/subdir/test.json").then((resp) => {
    if (resp.status === 200) {
        console.warn("RECEIVED RESPONSE FOR test.json")
        console.warn(resp.text())
    }
})

在 Chrome 和 Firefox 中，初始页面加载会在控制台中显示

service worker registered!

消息以及 JSON 获取的

404

响应。这就说得通了。刷新页面后，它会再次显示注册消息，并记录来自

test_sw1.js

的虚拟 JSON 负载。这让我有点惊讶，因为我最初期望它由

sw2

处理，但这也是有道理的——我刚刚误解了服务工作者控制与范围的关系。

在 Safari 中，JSON 获取每次都会收到 404 响应。 所以我最初认为我一定搞砸了一些事情，并且服务工作人员没有收到获取事件。没有！当我检查顶级工作人员的浏览器控制台时，它正在输出

REGEX MATCH SUCCEEDED

...但随后直接在其下面的

respondWith()

调用什么也不做。如果我在注册子目录 Service Worker 后直接导航到

[myorigin]/subdir/test.json

，情况也是如此。在 Chrome 和 Firefox 中，这显示了来自

subdir

服务工作线程的虚拟负载，带有

"workerId": 2

。在 Safari 中，

subdir

工作人员的控制台现在也输出

REGEX MATCH SUCCEEDED

...但浏览器向我显示 404 页面。我还可以做同样的事情，在基本脚本中或从控制台中获取实际存在的 .json 文件，Safari 会输出该文件的实际内容，而 Chrome 和 Firefox 会正确返回虚拟响应

那么这里出了什么问题呢？这甚至不是一个特别复杂的示例，工作脚本非常简单！ Service Worker 的全部意义在于能够拦截这样的请求，我在 Google 上搜索到的所有内容都表明 Safari 确实应该正确支持 ServiceWorker API，但这种行为完全是无稽之谈。服务工作线程或主页的控制台中没有其他错误消息。我在这里失去了理智。

Answer 1

...哦，我讨厌我的生活，我也非常讨厌Safari 。

这里的实际问题是 Safari 不支持静态

Response.json()

方法。我什至怀疑过类似的事情，并明确地检查了 caniuse 以让自己放心——但这实际上并不是正确的特征表，这是针对实例

response.json()

方法的。 这是正确的表格——所以我想我只是阅读理解失败了。

如果您问我，这里的第二个问题是，当 ServiceWorker 代码出现错误时，Safari 显然不会告诉您。有一个专门针对工作上下文的完整控制台，但它对这个问题完全保持沉默，即使我明确的

console.error()

受到尊重，即使我将

const resp = Response.json(...)

拉到自己的行中。如果有人知道解决这个问题的方法，我很想知道，但与此同时......我想我会把手放在我的手中。 *抽泣*