javascript – 了解服务工作者范围

我正在尝试在测试页面中实现Service Worker.我的最终目标是离线操作的应用程序.文件夹结构如下

/myApp
  ...
  /static
    /mod
      /practice
        service-worker.js
        worker-directives.js
        foopage.js
  /templates
    /practice
      foopage.html

我正在注册一个服务工作者,如下所示(在service-worker.js中)：

navigator.serviceWorker.register('../static/mod/practice/service-worker.js').then(function(reg) {
    console.log('Registration succeeded. Scope is ' + reg.scope);
    ...
}

在控制台中,我看到了

注册成功.范围是https://example.com/static/mod/practice/

如果我的页面位于https://example.com/practice/foopage,是否需要确保我的服务工作者范围是https://example.com/practice/foopage？

如果我尝试在寄存器函数调用中定义范围,如

navigator.serviceWorker.register('../static/mod/practice/service-worker.js', { scope: '/practice/foopage/' }).then(function(reg) {
    ...
}

我收到了错误

Registration failed with SecurityError: Failed to register a ServiceWorker: The path of the provided scope ('/practice/foopage/') is not under the max scope allowed ('/static/mod/practice/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

问题是：范围究竟是指什么？它是服务工作者最终控制的URL集合吗？我是否需要将service-workers.js移动到其他地方？如果是的话,在哪里？

解决方法:

服务工作者基本上是您的Web应用程序和Internet之间的代理,因此如果需要,它可以拦截对网络的调用.

此实例中的范围是指服务工作者能够拦截网络呼叫的路径. scope属性可以用于显式定义它将涵盖的范围.然而：

服务工作者只能拦截源自服务工作者脚本所在的当前目录范围内的请求及其子目录. Or as MDN states：

The service worker will only catch requests from clients under the service worker’s scope.

The max scope for a service worker is the location of the worker.

由于您的服务工作者位于/ static / mod / practice /,因此不允许将其范围设置为/ practice / foopage /.对其他主机的请求,例如https://stackoverflow.com/foo,无论如何都可以截获.

确保服务工作者可以拦截所需的所有调用的最简单方法是将其放在Web应用程序的根目录中(/).您还可以使用http标头覆盖默认限制并手动设置范围(请参阅Ashraf Sabry的回答).

标签：javascript,scope,service-worker
来源： https://codeday.me/bug/20190918/1810943.html