web-dev-qa-db-ja.com

「Service-Worker-Allowed」を正確に追加して、サービスワーカーのスコープを上部フォルダーに登録する方法

これについても同様の質問がありますが、ソリューションの適用方法があまり明確ではなく、エラーが発生し続けます。

私が説明します。 Service Workerテクノロジーを使用して単純な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は設定を配置するのに適切な場所ではない可能性があります... htmlまたはjsで設定されているものが応答用に設定されているか、他の要求のために準備されているため、index.htmlへのリクエストが行われる前に設定を設定する必要があります

今...

私のアプローチは今、別のhtmlページ（register.html）を呼び出すことです。このページでは、適切なヘッダーを設定して、index.htmlページを$ .ajax（）に試します（これで、純粋な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呼び出しで初めてヒットしてService Workerを登録し、次にindex.htmlで完全にリダイレクトできることを期待していましたが、すでに登録されていることがわかりましたが、これが機能しない場合...

繰り返しますが、最速の方法はsw.jsを上のフォルダーに移動することです。しかし、ツリーフォルダーアプリケーションでの位置に関係なく、Service Workerの登録方法を制御する方法を知るのは興味深いことです...

他のアドバイス...？

javascripthtmlhttp-headersservice-worker
6
Falco

OK ...私は少し混乱しました、そして今でも私は事実に深く入り込み、httpヘッダーをよりよく研究する必要があると思います...

とにかく、stackoverflowに関する多くの質問と回答で述べられているように、それがajaxリクエストでない限り（そしてそれはこのケースではありません）、httpリクエスト中にヘッダーを変更することはできません。

現在この投稿 nderstanding Service Worker scope 同様の質問に対して@Ashraf Sabryは、IIS Webサーバーのweb.configファイルを使用してヘッダーを変更できると回答しました->最後に、追加するヘッダーは応答ヘッダーであることを理解しましたが、ブラウザーによって応答が解釈される前->ここで述べたように https://docs.Microsoft.com/en-us/iis/configuration /system.webserver/httpprotocol/customheaders/ 構成は応答ヘッダー用です。

そのヘッダーを制御して、サービスワーカーが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 Node Serverを使用すると、上記のリンクのIISでの設定について述べたのと同じ結果に到達する可能性があります。

このjsを使用したテストの後、「Service-Worker-Allowed：/」を必要とするファイルがapp.jsファイルであることに気付きました。

これで、アプリケーションは期待どおりに動作し、エラーは返されません。 Fiddlerでリクエストをトレースする最終的な証明として、app.jsの最初のリクエストを明確に見ることができます。応答には「Service-Worker-Allowed：/」が含まれています。

私の結論は、常にサーバー構成を処理できるとは限らないため、Service Workerファイルをアプリのルートフォルダーに配置することをお勧めします。

これが他の人に役立つことを願っています...

10
Falco