Javascript 了解服务人员范围_Javascript_Scope_Service Worker

Javascript 了解服务人员范围
javascript
Javascript 了解服务人员范围,javascript,scope,service-worker,Javascript,Scope,Service Worker,我正试图在测试页面中实现一个服务人员。我的最终目标是一个离线运行的应用程序。文件夹结构如下所示 /myApp ... /static /mod /practice service-worker.js worker-directives.js foopage.js /templates /practice foopage.html 我正在注册一名服务人员，如下所示（在service worker.
我正试图在测试页面中实现一个
服务人员。我的最终目标是一个离线运行的应用程序。文件夹结构如下所示
/myApp
  ...
  /static
    /mod
      /practice
        service-worker.js
        worker-directives.js
        foopage.js
  /templates
    /practice
      foopage.html

我正在注册一名服务人员，如下所示（在service worker.js
中）：
在控制台里我看到了
注册成功。范围是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
属性可用于明确定义它将覆盖的范围。然而：
Service worker只能拦截源自Service worker脚本所在的当前目录及其子目录范围内的请求：
服务工作者将仅捕获来自服务工作者作用域下的客户端的请求
服务工作人员的最大作用域是工作人员的位置
由于您的服务人员位于/static/mod/practice/
，因此不允许将其范围设置为/practice/foopage/
。对其他主机的请求，例如https://stackoverflow.com/foo
，在任何情况下都可以被拦截
确保您的服务人员能够拦截所有需要的呼叫的最简单方法是将其放置在web应用程序的根目录中（/
）。您还可以使用http头覆盖默认限制并手动设置范围（请参见Ashraf Sabry的回答）。
服务工作者基本上是web应用程序和internet之间的代理，因此如果需要，它可以拦截对网络的呼叫
此实例中的作用域是指服务工作者能够从中截获网络呼叫的路径。scope
属性可用于明确定义它将覆盖的范围。然而：
Service worker只能拦截源自Service worker脚本所在的当前目录及其子目录范围内的请求：
服务工作者将仅捕获来自服务工作者作用域下的客户端的请求
服务工作人员的最大作用域是工作人员的位置
由于您的服务人员位于/static/mod/practice/
，因此不允许将其范围设置为/practice/foopage/
。对其他主机的请求，例如https://stackoverflow.com/foo
，在任何情况下都可以被拦截
确保您的服务人员能够拦截所有需要的呼叫的最简单方法是将其放置在web应用程序的根目录中（/
）。您还可以使用http头覆盖默认限制，并手动设置范围（请参阅Ashraf Sabry的回答）
我正在使用IIS，因此我将向web.config文件添加以下内容：
<location path="static/mod/practice/service-worker.js">
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Service-Worker-Allowed" value="/" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</location>

在Firefox和Chrome上测试
请参阅中的示例，将service worker文件保留在项目结构强加的任何目录中，并将scope
选项设置为/
，并将允许的service worker
HTTP头添加到service worker文件的响应中
我正在使用IIS，因此我将向web.config文件添加以下内容：
<location path="static/mod/practice/service-worker.js">
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Service-Worker-Allowed" value="/" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</location>

在Firefox和Chrome上测试
请参考
中的示例，以了解使用nginx的用户，它再简单不过了：
# Given that /static is your route to assets
location /static {
        # using / as root scope
        add_header Service-Worker-Allowed /;
....

对于使用nginx的用户来说，这再简单不过了：
# Given that /static is your route to assets
location /static {
        # using / as root scope
        add_header Service-Worker-Allowed /;
....

我不认为根目录中的js
文件是可以实现的。但随着新概念的出现，出现了新的范例，我想这主要是出于安全原因。例如，如果您只能访问/static
，而不能访问根目录（/
），则您的服务人员将无法截获对根目录的请求。这只是部分正确。范围决定了哪些页面由服务人员控制。一旦一个页面由服务工作者控制，所有来自该页面的HTTP请求，无论请求URL如何，都将触发服务工作者的fetch
事件。因此，如果一个受控页面对https://thirdpartyapi.com/api/test
，您的服务人员将有机会拦截。我不认为根目录中的js
文件是可以做到的。但随着新概念的出现，出现了新的范例，我想这主要是出于安全原因。例如，如果您只能访问/static
，而不能访问根目录（/
），则您的服务人员将无法截获对根目录的请求。这只是部分正确。范围决定了哪些页面由服务人员控制。一旦一个页面由服务工作者控制，所有来自该页面的HTTP请求，无论请求URL如何，都将触发服务工作者的fetch
事件。因此，如果一个受控页面对https://thirdpartyapi.com/api/test
，您的服务人员将