了解 Service Worker 范围 [英] 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

我正在注册一个 service worker，如下所示(在 service-worker.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，我是否需要确保我的 service worker 范围是 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?

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

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.

问题是:范围究竟指的是什么?service worker 最终会控制 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 Worker 基本上是您的 Web 应用程序和 Internet 之间的代理，因此它可以根据需要拦截对网络的调用.

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

此实例中的作用域是指 Service Worker 将能够拦截来自其的网络调用的路径.scope 属性可用于明确定义它将覆盖的范围.然而:

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:

Service Worker 只能拦截源自 Service Worker 脚本所在的当前目录及其子目录范围内的请求.或如 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:

Service Worker 只会在 Service Worker 的范围内捕获来自客户端的请求.

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

service worker 的最大范围是 worker 的位置.

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

由于您的 Service 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.

确保您的 Service Worker 可以拦截它需要的所有调用的最简单方法是将其放置在您的网络应用程序的根目录 (/) 中.您还可以使用 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).

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