服务工作者处理将事件提取到范围之外的 URL

Question

我的站点注册了一个 ServiceWorker ，其范围仅限于以 /sw/... 开头的 URL。

 /**
  * Register the Service Worker.
  */
 if ('serviceWorker' in navigator) {
     navigator.serviceWorker
         .register('{{ URL::asset('sw/serviceworker.js') }}', {scope: './sw/'})
         .then(registration => {
             console.log("SW registered. Scope: ", registration.scope);
         }).catch(err => { console.error("SW Register failed: ", err); });
}

/sw/...路径中的一个页面执行对服务器的提取，以查看与服务器的连接是否可用。它获取的地址是 /ping ，一个返回一些 JSON 的简单页面。请注意，地址/ping/不在/sw/...路径内）。

// Sample of the bit inside my promise that checks for the server
// this is the request that is being cached
fetch('/ping')
    .then(function(response) {
        if (response.status == 200) {
            console.log('%c Server available! ', 'background: #20c997; color: #000');
        }
    })
    .catch(function(err) {
        console.log('fetch failed! ', err);
    });

然而，浏览器清楚地显示serviceWorker 拦截了对/ping的请求。

从谷歌浏览器开发控制台：

▶ Fetching http://127.0.0.1:8000/ping Request {method: "GET", url: "http://127.0.0.1:8000/ping", headers: Headers, referrer: "http://127.0.0.1:8000/sw/create", referrerPolicy: "no-referrer-when-downgrade", …} serviceworker.js:105 
▶ Fetched over network http://127.0.0.1:8000/ping:  Response {type: "basic", url: "http://127.0.0.1:8000/ping", redirected: false, status: 200, ok: true, …} 

这不是我所期望的，因为我只希望 ServiceWorker 拦截对以 /sw/... 开头的地址的请求

在 ServiceWorkers 的规范或预期行为中是否有某个地方说它可以缓存响应以获取范围内页面产生的事件，即使它所命中的地址超出范围？

Answer 1

回答我自己的问题...

是的，这是预期行为。范围不是由进行提取的地址决定的，而是由发出请求的页面的地址决定的。

关键词是谷歌指南中的这句话中的"来自"：

。它将处理从您的页面发出网络请求或消息时发生的获取和消息事件。

因此，如果 /sw/page1.html 上的 JavaScript 向/ping发出fetch()请求，那么 ServiceWorker 认为这是"范围内的"，因为发送请求的页面以 /sw/... 开头。

范围还包括浏览器为获取页面而发出的原始请求。因此，如果浏览器尝试导航到以 /sw/... 开头的页面，并且注册了 ServiceWorker ，那么它将处理该请求。