web-dev-qa-db-fra.com

Comment ajouter exactement «Service-Worker-Allowed» pour enregistrer la portée du service worker dans le dossier supérieur

Il y a des questions similaires à ce sujet, mais il n'est pas très clair comment appliquer la solution et continuer à recevoir une erreur.

J'explique. Je voudrais créer une application simplement html/js en utilisant la technologie de service worker. J'ai:

  • Index.html
  • js/app.js
  • js/sw.js

dans app.js le code est (voir // *** commentaires pour clearify):

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

Comme vous le voyez dans le commentaire, je reçois toujours l'erreur "Le chemin de la portée fournie ('/') n'est pas sous la portée maximale autorisée ('/ js /'). Ajustez la portée, déplacez le script Service Worker ou utilisez l'en-tête HTTP Service-Worker-Allowed pour autoriser la portée. "

Je pourrais peut-être déplacer le fichier sw.js, mais j'aimerais savoir ce qui ne va pas. Bien sûr, le problème est de savoir comment enregistrer l'en-tête dans les 3 premières lignes de code non commentées.

Un conseil sur le code pour savoir comment l'enregistrer exactement?

ÉDITER:

Ce qui me manque, c'est que ce qui est à définir c'est l'en-tête de requête, l'en-tête envoyé avec la requête, avant de demander la page html ... Je crée des en-têtes, utiles éventuellement pour une future nouvelle requête. Donc, js n'est peut-être pas le bon endroit pour mettre le paramètre ... Le paramètre doit être défini avant la demande d'indexation.html, car ce qui est défini dans le html ou js est défini pour la réponse, ou préparé pour d'autres demandes

maintenant...

Mon approche consiste maintenant à appeler une autre page html (register.html), dans cette page je suis en train de tryng vers $ .ajax () la page index.html, avec l'en-tête de droite réglé: (Je peux maintenant le faire avec du js pur , mais pour gagner du temps, j'ai copié/collé du code déjà testé)

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

J'espérais que la première fois que j'appellerais ajax, je pourrais enregistrer le service worker, puis rediriger sur complete sur index.html, je pourrais le trouver déjà enregistré, mais si cela ne fonctionne pas ...

Je le répète, le moyen le plus rapide consiste à déplacer sw.js dans le dossier supérieur. Mais il est intéressant de savoir comment prendre le contrôle de l'enregistrement du technicien, malgré sa position dans l'application de dossier arborescent ...

d'autres conseils ...?

javascripthtmlhttp-headersservice-worker
6
Falco

Ok ... J'étais un peu confus, et même maintenant, je suppose que je dois approfondir les faits et mieux étudier les en-têtes http ...

Quoi qu'il en soit, comme indiqué dans de nombreuses questions et réponses sur stackoverflow, il n'est pas possible de modifier les en-têtes pendant la demande http, sauf s'il ne s'agit pas d'une demande ajax (et ce n'est pas le cas).

maintenant sur ce post nderstanding Service Worker scope pour une question similaire @Ashraf Sabry a répondu qu'il pouvait modifier les en-têtes en utilisant le fichier web.config de IIS Web Server. -> J'ai finalement compris que l'en-tête à ajouter est un en-tête de réponse, mais avant que la réponse ne soit interprétée par le navigateur -> Comme indiqué ici https://docs.Microsoft.com/en-us/iis/configuration /system.webserver/httpprotocol/customheaders/ cette configuration est pour l'en-tête de réponse.

Je suppose qu'il n'y a pas de moyen clair de contrôler cet en-tête pour que le technicien fasse son travail dans un sous-dossier en utilisant html/javascript ... C'est un problème qui ne pourrait être résolu qu'avec les configurations de serveur.

A faisait mes tests sur Node, pour porpouse didactique, j'ai essayé d'écrire un serveur http simple pour tester ce problème à partir de ce tutoriel https://ilovecoding.org/lessons/create-a-simple-http-server -with-nodejs

le résultat est ici (un fichier "server.js" exécuté sur Node):

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);

En utilisant ce js Node Server, je pourrais atteindre le même résultat indiqué pour les paramètres dans IIS dans le lien ci-dessus).

Notez qu'après quelques tests avec ce js, j'ai atteint que le fichier qui a besoin de "Service-Worker-Allowed: /" est le fichier app.js.

Maintenant, l'application fonctionne comme souhaité ne renvoyant aucune erreur. En tant que demande finale de traçage sur le violoniste, je peux voir clairement la demande initiale pour app.js, avec "Service-Worker-Allowed: /" dans la réponse;

Ma conclusion est qu'il n'est pas toujours possible de gérer la configuration du serveur, donc mettre le fichier de service worker sur le dossier racine de l'application est la meilleure approche.

J'espère que cela pourrait être utile pour d'autres ...

10
Falco