Understanding Service Worker scope
<p>I am trying to implement a <code>Service Worker</code> in a test page. My end goal is an application that operates offline. The folder structure is below</p>

<pre><code>/myApp
  ...
  /static
    /mod
      /practice
        service-worker.js
        worker-directives.js
        foopage.js
  /templates
    /practice
      foopage.html
</code></pre>

<p>I am registering a service worker as shown below (within <code>service-worker.js</code>):</p>

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

<p>and in the console I see</p>

<p><code>Registration succeeded. Scope is https://example.com/static/mod/practice/</code></p>

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

<p>If I try to define the scope in the <code>register</code> function call like</p>

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

<p>I get the error</p>

<pre><code>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.
</code></pre>

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