javascript - style - Comprender el alcance del trabajador de servicio

style tag

Question

Estoy intentando implementar un Service Worker en una página de prueba. Mi objetivo final es una aplicación que funciona sin conexión. La estructura de carpetas está debajo

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

Estoy registrando un trabajador de servicio como se muestra a continuación (dentro de service-worker.js ):

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

y en la consola veo

Registration succeeded. Scope is https://example.com/static/mod/practice/

Si mi página se encuentra en https://example.com/practice/foopage , ¿debo asegurarme de que el alcance de mi service worker es https://example.com/practice/foopage ?

Si trato de definir el alcance en la función de register , llame como

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

Me sale el error

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.

La pregunta es: ¿a qué se refiere exactamente el alcance ? ¿Es la colección de URL lo que eventualmente controlará el service worker del service worker ? ¿Necesito mover service-workers.js otro lugar? ¿Si es así, donde?

Answer 1

Deje el archivo de trabajador de servicio en el directorio impuesto por la estructura de su proyecto y configure la opción de scope en / y agregue el encabezado HTTP Service-Worker-Allowed a la respuesta de su archivo de trabajador de servicio.

Estoy usando IIS, por lo que agregaría lo siguiente al archivo 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>

Y registre al trabajador por:

navigator.serviceWorker.register(''/static/mod/practice/service-worker.js'', { scope: ''/'' })
.then(function (registration)
{
console.log(''Service worker registered successfully'');
}).catch(function (e)
{
console.error(''Error during service worker registration:'', e);
});

Probado en Firefox y Chrome.

Consulte los ejemplos en la especificación del trabajador de servicio

Answer 2

Los trabajadores de servicios son básicamente un proxy entre su aplicación web e Internet, por lo que puede interceptar llamadas a la red si así lo desea.

El alcance en este caso se refiere a la ruta desde la cual el trabajador del servicio podrá interceptar llamadas de red. La propiedad del scope se puede usar para definir explícitamente el alcance que cubrirá. Sin embargo:

Los trabajadores de servicio solo pueden interceptar solicitudes que se originan en el alcance del directorio actual en el que se encuentra el script del trabajador de servicio y sus subdirectorios. O como dice MDN :

El trabajador del servicio solo capturará las solicitudes de los clientes bajo el alcance del trabajador del servicio.

El alcance máximo para un trabajador de servicio es la ubicación del trabajador.

Como su trabajador de servicio se encuentra en /static/mod/practice/ , no está permitido establecer su alcance en /practice/foopage/ . Las solicitudes a otros hosts, por ejemplo, https://.com/foo , pueden ser interceptadas en cualquier caso.

La forma más fácil de garantizar que su trabajador de servicio pueda interceptar todas las llamadas que necesita, sería colocarlo en el directorio raíz de su aplicación web ( / ). También puede anular las restricciones predeterminadas utilizando un encabezado http y configurando manualmente el alcance (consulte la respuesta de Ashraf Sabry).

Answer 3

Para las personas que usan nginx, no podría ser más simple:

# Given that /static is your route to assets
location /static {
# using / as root scope
add_header Service-Worker-Allowed /;
....