2

我有一个 SPA 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.

我想我会发布这个问题，以防其他人对为什么他们不能让他们的服务人员用缓存页面做出响应感到困惑。似乎秘诀是确保您在网址末尾使用斜杠。我希望Google 的文档能指出这个小细节。

然而，出于好奇，有没有办法让它工作/customer/app？现在看起来我需要重定向/customer/app到/customer/app/并进行测试以确保没有任何损坏。

4

1 回答 1

1

service worker 的默认作用域是脚本所在的路径。 /customer/app被视为高于/customer/app/。

Service-Worker-Allowed您可以更改此行为并使用响应标头允许更高的范围：

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope

https://w3c.github.io/ServiceWorker/#service-worker-script-response

// 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 '/'.");
});
于 2021-01-25T15:35:35.817 回答