title: Understanding Service Worker scope
body: <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>