ServiceWorker 处理 fetch 事件到范围之外的 URL答案

【问题标题】：ServiceWorker handling fetch events to URLs outside scopeServiceWorker 处理 fetch 事件到范围之外的 URL
【发布时间】：2019-01-03 17:32:08
【问题描述】：

我的站点注册了一个 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/... 开头的地址的请求

ServiceWorkers 的规范或预期行为中是否有某处说它可以缓存响应以获取范围内页面所做的事件，即使它所访问的地址超出范围？

【问题讨论】：

标签： javascript service-worker offline offline-browsing

【解决方案1】：

回答我自己的问题...

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

Google's Guide 的这句话中的关键词是“来自”：

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

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

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

【讨论】：