Understanding Service Worker scope

by

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:

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.

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.

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).

More Related Contents:

  1. Can I set a value to the golbal variable in $(document).ready(function(){}); and use the same variable outside? [closed]
  2. How do I access previous promise results in a .then() chain?
  3. Preserving a reference to “this” in JavaScript prototype functions [duplicate]
  4. Please explain the use of JavaScript closures in loops [duplicate]
  5. Function declarations inside if/else statements?
  6. Referencing “this” inside setInterval/setTimeout within object prototype methods [duplicate]
  7. How can I access local scope dynamically in javascript?
  8. Why is window (and unsafeWindow) not the same from a userscript as from a tag?
  9. ECMAScript 2015: const in for loops
  10. What is the difference between “let” and “var”?
  11. What does this “(function(){});”, a function inside brackets, mean in javascript? [duplicate]
  12. Access a variable outside the scope of a Handlebars.js each loop
  13. Is there a performance difference between ‘let’ and ‘var’ in JavaScript
  14. Specify scope for eval() in JavaScript?
  15. What causes a Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode error?
  16. Access variable outside function scope [duplicate]
  17. Global JavaScript Variable Scope: Why doesn’t this work?
  18. JavaScript: Reference a functions local scope as an object
  19. Limiting number of displayed results when using ngRepeat
  20. Can a js script get a variable written in a EJS context/page within the same file
  21. Undefined return value from the function call Javascritpt
  22. Calling a Function defined inside another function in Javascript
  23. Global variables in Meteor
  24. Javascript eval on global scope?
  25. Best practices for detecting offline state in a service worker
  26. dynamically call local function in javascript
  27. Why won’t this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?
  28. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  29. Is it possible to make an in-app button that triggers the PWA “Add to Home Screen” install banner?
  30. Function not calling within an onclick event

Leave a Comment