了解服务工作者范围 [英] Understanding Service Worker scope

问题描述

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

I am trying to implement a Service Worker in a test page. My end goal is an application that operates offline. The folder structure is below

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

我正在注册服务工作者，如下所示（在服务工作者内）。 js ）：

I am registering a service worker as shown below (within 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 ？

If my page is located at https://example.com/practice/foopage, do I need to make sure that my service worker scope is https://example.com/practice/foopage?

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

If I try to define the scope in the register function call like

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 ？如果是这样，在哪里？

Question is: What exactly does scope refer to? Is it the collection of URLs that the service worker will eventually control? Do I need to move service-workers.js somewhere else? If so, where?

推荐答案

服务工作者基本上是你的网络应用程序和互联网之间的代理，所以它可以截取到如果需要，可以使用网络。

Service workers are basically a proxy between your web application and the internet, so it can intercept calls to the network if so desired.

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

Scope in this instance refers to the path that the service worker will be able to intercept network calls from. The scope property can be used explicitly define the scope it will cover. However:

服务工作者只能拦截源自服务工作者脚本所在的当前目录范围内的请求及其子目录。 或作为MDN声明：

Service workers can only intercept requests originating in the scope of the current directory that the service worker script is located in and its subdirectories. 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 ，无论如何都可以截获。

As your service worker is located in /static/mod/practice/, it's not allowed to set its scope to /practice/foopage/. Requests to other hosts, e.g. https://stackoverflow.com/foo, can be intercepted in any case.

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

The easiest way to ensure that your service worker can intercept all the calls it needs to, would be to place it in the root directory of your web app (/). You can also override the default restrictions using an http header and manually setting the scope (see Ashraf Sabry's answer).

这篇关于了解服务工作者范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！