title: How exactly add "Service-Worker-Allowed" to register service worker scope in upper folder
body: <p>There are similar questions about it, but it's not very clear how to apply the solution, and keep to receive an error.</p>
  
  <p>I explain. I'd like to create a simply html/js app using service worker technology.
  I have:</p>
  
  <ul>
  <li>Index.html</li>
  <li>js/app.js</li>
  <li>js/sw.js</li>
  </ul>
  
  <p>in app.js the code is (see //*** comments to clearify):</p>
  
  <pre><code>// *** I receive always the error:
  // *** ERROR: The path of the provided scope ('/') is not under the max scope allowed ('/js/').
  // *** Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.
  
  var headers = new Headers();
  // *** I set the header in order to solve the error above:
  // *** The value is set to "/" because this js is included in html file in upper folder.
  // *** I tried even "../" and many more others values...
  headers.append('Service-Worker-Allowed', '/');
  console.log(headers.get('Service-Worker-Allowed'));
  
  if ('serviceWorker' in navigator) {
      console.log('Start trying Registrating Scope');
      // *** I register the service worker.
      // *** The path of service worker is "js/sw.js" because this js is included in html file in upper folder.
      // *** The path of scope is "../" because is the path used by service worker, and I want it uses upper folder scope.
      navigator.serviceWorker.register('js/sw.js', {scope: '../'})
      .then(function(reg) {
          // registration worked
          console.log('Registration succeeded. Scope is ' + reg.scope);
      })
      .catch(function(error) {
          // registration failed
          console.log('Registration failed with ' + error);
      });
      console.log('End trying Registrating Scope');
  }
  </code></pre>
  
  <p>As you see in the comment I still get the error "The path of the provided scope ('/') is not under the max scope allowed ('/js/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope."</p>
  
  <p>Maybe I could move the sw.js file, but I'd like to know what's wrong.
  Sure the problem is in how to register the header in the first 3 not commented lines of code.</p>
  
  <p>Any advice of the code on how exactly register it?</p>
  
  <p>EDIT:</p>
  
  <p>What I'm missing is that what is to set is the request header, the header sent with the request, before asking the html page...
  I'm creating headers, useful eventually for a future new request.
  So js maybe is not the right place to put setting...
  The setting must be setted before the request to index.html is made, because what's setted in the html or js is setted for the response, or prepared for other requests</p>
  
  <p>now...</p>
  
  <p>My approach now is to call another html page (register.html), in this page I'm tryng to $.ajax() the index.html page, with the right header setted:
  (I now it could be done with pure js, but for time saving I copy/pasted some already tested code)</p>
  
  <pre><code> $(document).ready(function(){
          $.ajax({
              type: "GET",
              beforeSend: function(request) {
                  request.setRequestHeader("Service-Worker-Allowed", "/");
              },
              url: "index.html",
              complete: function () {
                  window.location = "index.html";
              }
          });
      });
  </code></pre>
  
  <p>I was hoping the first time hit on ajax call I could register the service worker, then redirecting on complete on index.html, I could find it already registered, but event this doesn't work...</p>
  
  <p>I repeat, quickest way is to move sw.js in upper folder. But it's interesting to know how to take control of how to register the service worker, despite of its position in tree folder application...</p>
  
  <p>other advices...?</p>