如何在Service_worker.js所在的目录上注册服务工作者的作用域

Question

我的目录如下.

public_html/
sw/

"sw /"是我想要放置所有服务工作者的地方,但是那些服务工作者的范围是"public_html /"中的所有文件.

JS

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw/notifications.js', { scope: '../sw/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
};
</script>

我如何允许这种范围？

Answer 1

服务工作者的最大范围是它所在的位置.这意味着您无法注册位于的一个服务工作者/sw/,scope: '/public_html/'除非您Service-Worker-Allowed为服务工作者添加了一个特殊的标头设置为新的最大范围.

总而言之,如果您可以在为服务工作者提供服务时添加此标头,请按如下所示进行设置:

Service-Worker-Allowed: /public_html/

如果没有,则必须将sw放在示波器上方的某个位置.

Answer 2

编辑:正如萨尔瓦的回答表明,最大范围必须被加宽的Service-Worker-Allowed头,让下面的成功.

scope将注册选项对象(第二个参数navigator.serviceWorker.register())的属性更改为您希望将服务工作者限定为范围的URL.在你的情况下,这可能是../public_html.

// ...
navigator.serviceWorker.register('sw/notifications.js', { scope: '../public_html/' })
// ...

./如果未提供选项对​​象或没有scope属性,则该参数将默认为(相对于ServiceWorker脚本).

此外,scope使用除当前原点以外的任何原点设置a 将拒绝注册Promise,但有SecurityError例外.

参考文献:

https://www.w3.org/TR/service-workers/#navigator-service-worker-register

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameters