ServiceWorker处理将事件提取到范围之外的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的请求。

在Google Chrome开发者控制台中：

▶ 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/...开头的地址的请求/sw/...

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

Answer 1

回答我自己的问题...

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

关键字是“来自”，来自Google指南的此引文：

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

因此，如果/sw/page1.html上的JavaScript向/ping发出fetch()请求，则ServiceWorker 会将其视为“范围内”，因为发送请求的页面以/sw/...开头。

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