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/... not ）。

// 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的规范或预期行为中是否有某个地方说它可以缓存响应以读取范围内的页面产生的事件，即使它所命中的地址超出范围也是如此？

Answer 1

正在回答我自己的问题...

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

在Google's Guide中，此引用的关键词是“来自”：

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

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

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

ServiceWorker处理将事件提取到范围之外的URL

1 个答案: