我的网站注册了一个 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 的规范或预期行为中是否有某处表明它可以缓存对范围内页面进行的获取事件的响应，即使它所访问的地址超出范围？
最佳答案
回答我自己的问题...
是的，这是有意为之的行为。范围不是由提取的地址决定的，而是由发出请求的页面的地址决定的。
在 Google's Guide 的这句话中，关键字是“from” :
...it will handle fetch and message events that occur when a network request or message is made from your page.
因此，如果 /sw/page1.html 上的 JavaScript 向 /ping 发出 fetch() 请求，则这被视为“在因为发送请求的页面以 /sw/... 开头。
范围还包括浏览器为获取页面而发出的原始请求。因此，如果浏览器尝试导航到以 /sw/... 开头的页面并且注册了 ServiceWorker，那么它将处理该请求。
关于javascript - ServiceWorker 处理范围外 URL 的获取事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54027096/