如何在上层文件夹中添加“Service-Worker-Allowed”来注册服务工作者范围

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在上层文件夹中添加“Service-Worker-Allowed”来注册服务工作者范围相关的知识,希望对你有一定的参考价值。

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

我解释。我想使用服务工作者技术创建一个简单的html / js应用程序。我有:

  • 的index.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 /')之下。调整范围,移动Service Worker脚本或使用允许范围的Service-Worker-Allowed HTTP标头。“

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

关于如何准确注册代码的任何建议?

编辑:

我缺少的是要设置的是请求标头,与请求一起发送的标头,在询问html页面之前......我正在创建标头,最终对将来的新请求很有用。所以js可能不是放置设置的正确位置......必须在发出index.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调用我可以注册服务工作者,然后重定向完成index.html,我可以发现它已经注册,但事件这不起作用...

我再说一遍,最快的方法就是在上层文件夹中移动sw.js.但是知道如何控制如何注册服务工作者很有意思,尽管它在树文件夹应用程序中的位置......

其他建议......?

答案

好的...我有点困惑,即使现在我想我必须深入了解事实并更好地研究http标头......

无论如何,如在stackoverflow上的许多问题和答案中所述,在http请求期间不可能改变标题,除非它不是ajax请求(并且不是这种情况)。

现在在这篇文章Understanding Service Worker scope上提出类似的问题@Ashraf Sabry回答说他可以使用IIS Web Server的web.config文件来改变标题。 - >所以最后我明白要添加的标头是响应标头,但在浏览器解释响应之前 - >如此处所述https://docs.microsoft.com/en-us/iis/configuration/system.webserver/httpprotocol/customheaders/配置是响应标头。

我想有没有明确的方法来控制该标头使服务工作者使用html / javascript在子文件夹中完成他的工作......这是一个只能通过服务器配置解决的问题。

A正在我的Node上做我的测试,对于教学的porpouse我试着写一个简单的http服务器来测试这个问题从本教程开始https://ilovecoding.org/lessons/create-a-simple-http-server-with-nodejs

结果在这里(在Node上运行“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 Node Server,我可以在上面的链接中获得与IIS中的设置相同的结果。

请注意,在使用此js进行一些测试后,我发现需要“Service-Worker-Allowed:/”的文件是app.js文件。

现在应用程序按原样返回没有错误。作为对fiddler的最终证明跟踪请求,我可以清楚地看到app.js的初始请求,响应中有“Service-Worker-Allowed:/”;

我的结论是,并不总是可以处理服务器配置,因此将服务工作者文件放在应用程序的根文件夹上是最好的方法。

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

另一答案

服务工作者无法控制不属于其范围的页面。服务工作者/js/sw.js无法控制页面/index.html,因为该qtml文件不存在于/js/文件夹(或/js/的子文件夹)中。如果您希望/index.html由服务工作者控制,请将服务工作者移至/sw.js

保持代码简单并将SW放在适当的文件夹(如果管理整个域,则为root)更容易。这种简化避免了修改HTTP头的不必要的需要。

以上是关于如何在上层文件夹中添加“Service-Worker-Allowed”来注册服务工作者范围的主要内容,如果未能解决你的问题,请参考以下文章

iOS:在 TableView 上层 UILabel [重复]

html如何将一个div置于最上层

makefile:如何生成目标文件到上层目录

在wpf中 嵌入flash 怎么让这flash 变成背景 层数在最底层。。现在falsh在最上层 求救啊

python获取上层方法调用

如何让PopupWindow显示在Dialog之上,我说的之上是指上层