Caching 服务工作者不返回缓存响应，除非url末尾包含斜杠

我在

https://example.com/customer/app

当您访问该页面时，如果您未登录，SPA会将

#/login

附加到url，因此现在它会显示

https://example.com/customer/app#/login

有一个服务人员正在运行，安装了scope

/customer/app

当应用程序脱机时，我尝试从我的服务人员返回200响应。为了简单起见，目前我对应用程序中的所有内容都使用虚拟响应：

customer-sw.js的内容如下：

self.addEventListener('install', function(e) {
    // Do nothing for now.
});

self.addEventListener('fetch', function(event) {
    event.respondWith( new Response('Hello world') );
});

这意味着，如果服务工作者安装正确，每个请求都应该产生一个简单的

Hello world

（就好像它是以这种方式缓存的页面一样）。唯一的问题是，除非url末尾有斜杠，否则我无法实现此功能，即

/customer/app/

而不是

/customer/app

。对

/customer/app

的请求将导致检索实际页面，而对

/customer/app/

的请求（或下面的任何其他请求）将导致

Hello world

我想我会发布这个问题，以防其他人被难倒，他们为什么不能让他们的服务人员用缓存页面来响应。秘密似乎是要确保在url的末尾使用斜杠。我希望能指出这个小细节

---

然而，出于好奇，有没有办法让它与

/customer/app

一起工作？现在看起来我需要将

/customer/app

重定向到

/customer/app/

，并进行测试以确保没有任何结果被破坏。

服务人员的默认范围是脚本所在的路径。

/customer/app

被视为高于

/customer/app/

您可以更改此行为，并使用

允许的服务人员
响应标头允许更高的作用域：



服务工作者的默认作用域是脚本所在的路径。
/customer/app
被视为高于
/customer/app/

您可以更改此行为，并使用
允许的服务人员
响应标头允许更高的作用域：



// Default scope:
// Maximum allowed scope defaults to the path the script sits in
// "/js/" in this example
navigator.serviceWorker.register("/js/sw.js").then(() => {
  console.log("Install succeeded with the default scope '/js/'.");
});


// Set the scope to an upper path of the script location
// Response included "Service-Worker-Allowed : /"
navigator.serviceWorker.register("/js/sw.js", { scope: "/" }).then(() => {
  console.log("Install succeeded as the max allowed scope was overriden to '/'.");
});