如何在上部文件夹中添加“允许服务工作者”来注册服务工作者范围

Question

关于它也有类似的问题，但是不太清楚如何应用解决方案，并不断收到错误。

我解释。我想使用ServiceWorker技术创建一个简单的html/js应用程序。我有：

• 索引。html
• js/app。js
• js/sw。js

app.js代码是（见 //*** 注释）：

// *** 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');
}

正如您在注释中所看到的，我仍然收到错误“提供的作用域（“/”）的路径不在允许的最大作用域（“/js/”）之下。请调整作用域，移动服务工作者脚本，或使用服务工作者允许的HTTP头来允许作用域。”

也许我可以移动sw.js文件，但我想知道出了什么问题。当然，问题在于如何在前3行未注释的代码中注册标题。

关于如何准确注册它的代码有什么建议吗？

编辑：

我缺少的是，在请求html页面之前，要设置的是请求头，与请求一起发送的头。。。我正在创建标题，最终对将来的新请求很有用。所以js可能不是放置设置的正确位置。。。必须在请求索引之前设置该设置。html是生成的，因为html或js中设置的内容是为响应设置的，或者是为其他请求准备的

现在

我现在的方法是调用另一个html页面（register.html），在这个页面中，我尝试$. ajax（）index.html页面，设置了正确的标题：（我现在可以用纯js完成，但时间有限保存我复制/粘贴了一些已经测试过的代码）

 $(document).ready(function(){
        $.ajax({
            type: "GET",
            beforeSend: function(request) {
                request.setRequestHeader("Service-Worker-Allowed", "/");
            },
            url: "index.html",
            complete: function () {
                window.location = "index.html";
            }
        });
    });

我希望在第一次点击ajax调用时，我可以注册服务人员，然后重定向到完整的索引。html，我可以发现它已经注册了，但是这个事件不起作用。。。

我重复一遍，最快的方法是向西南移动。js在上面的文件夹中。但有趣的是知道如何控制如何注册服务工作者，尽管它在树文件夹应用程序中的位置。。。

其他建议。。。？

Answer 1

服务工作人员无法控制不在其范围内的页面。服务人员/js/sw。js无法控制页面/索引。html，因为该html文件不存在于/js/文件夹（或/js/的子文件夹）中。如果您想要/索引。html要由维修工控制，请将维修工移动到/sw。js。

保持代码简单并将SWs放入适当的文件夹（如果管理整个域，则为root）会更容易。这种简化避免了不必要的修改HTTP头的需要。

Answer 2

我能够用根作用域注册worker的方法是

navigator.serviceWorker.register(href = '/service_worker.js', { scope: '/' })

我添加头的方式是创建一个新的endpoint，该endpoint为该service_worker文件提供服务：

@app.route('/service_worker.js')
def service_worker():
    from flask import make_response, send_from_directory
    response = make_response(send_from_directory('static',filename='service_worker.js'))
    response.headers['Content-Type'] = 'application/javascript'
    response.headers['Service-Worker-Allowed'] = '/'
    return response

Answer 3

好啊我有点困惑，甚至现在我想我必须深入了解事实，更好地研究http头。。。

无论如何，正如许多问题中所说的那样

现在在这篇文章中，了解服务人员对类似问题的范围@Ashraf Sabry回答说，他可以使用web更改标题。IIS Web服务器的配置文件--

我想目前还没有明确的方法来控制这个标题，让服务人员使用html/javascript在子文件夹中完成工作。。。这是一个只有通过服务器配置才能解决的问题。

A在节点上进行测试，从本教程开始，我尝试编写一个简单的http服务器来测试这个问题https://ilovecoding.org/lessons/create-a-simple-http-server-with-nodejs

结果如下（节点上运行的“server.js”文件）：

var http = require('http');
var url = require('url');
var querystring = require('querystring');
var fs = require('fs');

http.createServer(function(request, response){
    pathName = url.parse(request.url).pathname;
    console.log(pathName);
    fs.readFile(__dirname + pathName, function(err, data){
        if(err){
            response.writeHead(404, {'Content-type':'text/plan'});
            response.write('Page Was Not Found');
            response.end();
        }
        else{
            if(pathName.endsWith(".html")){
                //response.writeHead(200, {'Service-Worker-Allowed':'/', 'Content-Type':'text/html'});
                response.writeHead(200, {'Content-Type':'text/html'});
                console.log("serving html");
            }
            else if(pathName.endsWith(".js")){
                response.writeHead(200, {'Service-Worker-Allowed':'/', 'Content-Type':'application/javascript'});
                //response.writeHead(200, {'Content-Type':'text/javascript'});
                console.log("serving js");
            }
            else if(pathName.endsWith(".css")){
                //response.writeHead(200, {'Service-Worker-Allowed':'/', 'Content-Type':'text/css'});
                response.writeHead(200, {'Content-Type':'text/css'});
                console.log("serving css");
            }
            else{
                response.writeHead(200);
                console.log("serving other");
            }
            response.write(data);
            response.end();
        }
    })
}).listen(8080);

使用这个js节点服务器，我可以得到与上面链接中IIS设置相同的结果。

注意，在使用这个js进行了一些测试后，我发现需要“允许服务工作者：/”的文件是app.js文件。

现在，应用程序按需要工作，没有返回错误。作为在fiddler上跟踪请求的最终证明，我可以清楚地看到应用程序的初始请求。js，响应中带有“允许的服务人员：/”；

我的结论是，并不总是可以处理服务器配置，所以将Service Worker文件放在应用程序的根文件夹中是最好的方法。

希望这能对其他人有所帮助...