Verständnis Service-Mitarbeiter Rahmen

Ich versuche zu implementieren ist eine Service Worker in einem test-Seite. Mein end-Ziel ist eine Anwendung, die arbeitet offline. Die Ordner-Struktur ist unter

/myApp
  ...
  /static
    /mod
      /practice
        service-worker.js
        worker-directives.js
        foopage.js
  /templates
    /practice
      foopage.html

Ich bin registrieren eines service-Arbeiter, wie unten gezeigt (in service-worker.js):

navigator.serviceWorker.register('../static/mod/practice/service-worker.js').then(function(reg) {
    console.log('Registration succeeded. Scope is ' + reg.scope);
    ...
}

und in der Konsole sehe ich

Registration succeeded. Scope is https://example.com/static/mod/practice/

Wenn meine Seite befindet sich bei https://example.com/practice/foopage, muss ich sicherstellen, dass mein service worker Umfang ist https://example.com/practice/foopage?

Wenn ich versuche, den Bereich definieren, in der register Funktion rufen Sie wie

navigator.serviceWorker.register('../static/mod/practice/service-worker.js', { scope: '/practice/foopage/' }).then(function(reg) {
    ...
}

Bekomme ich die Fehlermeldung

Registration failed with SecurityError: Failed to register a ServiceWorker: The path of the provided scope ('/practice/foopage/') is not under the max scope allowed ('/static/mod/practice/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

Frage ist: Was genau macht Umfang finden? Ist es die Sammlung von URLs, die service worker wird schließlich die Kontrolle? Muss ich verschieben service-workers.js woanders? Wenn ja, wo?

InformationsquelleAutor Brian Leach | 2016-03-03

  1. 25

    Service-Mitarbeiter sind im Grunde ein proxy zwischen dem web-Anwendung und das internet, so dass es zum abfangen der Anrufe auf das Netzwerk, wenn dies gewünscht wird.

    Umfang in diesem Beispiel bezieht sich auf den Weg, dass die service-Mitarbeiter wird in der Lage sein, zum abfangen von Netzwerk-Aufrufe aus. Die scope Eigenschaft explizit genutzt werden können, definieren den Umfang es zu decken. Allerdings:

    Service-Mitarbeiter können nur Anfragen abfangen, die Ihren Ursprung in den Anwendungsbereich des aktuellen Verzeichnisses, aus dem die service-worker-Skript liegt und in dessen Unterverzeichnissen. Oder als MDN Staaten:

    Die service-Mitarbeiter nur catch-Anfragen von Kunden unter der service-Mitarbeiter befänden.

    Den max Bereich für ein service-Mitarbeiter ist die Lage der Arbeiter.

    Als Ihre service-Mitarbeiter befindet sich in /static/mod/practice/, es ist nicht berechtigt, im Rahmen Ihrer Möglichkeiten /practice/foopage/. Anfragen zu anderen hosts, z.B. https://stackoverflow.com/foo, können aufgefangen werden, in jedem Fall.

    Der einfachste Weg, um sicherzustellen, dass Ihre service-Mitarbeiter abfangen können alle Anrufe, die es braucht, wäre es in das root-Verzeichnis Ihres web-app (/). Sie können auch überschreiben Sie die Standard-Einschränkungen mit einem http-header und die manuelle Einstellung Bereich (siehe Ashraf Sabry s Antwort).

    Ich glaube nicht, dass ein js - Datei in das root-Verzeichnis war immer etwas, das getan werden würde. Aber mit neuen Konzepten kommen neue Paradigmen denke ich
    Ich denke, es ist vor allem aus Sicherheitsgründen. Wenn Sie nur Zugang zu /static, aber nicht an die Wurzel (/) Z. B. Ihre service-Mitarbeiter sollten nicht in der Lage zum abfangen von Anfragen an den root.
    Dies ist nur zum Teil richtig—der Umfang bestimmt, welche Seiten werden angesteuert durch die service-Mitarbeiter. Sobald eine Seite angesteuert, die von einem service-Mitarbeiter, alle HTTP-Anforderungen, die aus der Seite, unabhängig von der request-URL, löst der service-Mitarbeiter ist fetch Veranstaltung. Also, wenn eine kontrollierte Seite macht einen AJAX-request für https://thirdpartyapi.com/api/test Ihre service-Mitarbeiter haben eine chance, Sie abzufangen.
    Danke für die Klarstellung. Ich habe aktualisiert die Antwort entsprechend.

    InformationsquelleAutor nils

  2. 13

    Lassen Sie das service-worker-Datei in welchem Verzeichnis auferlegt, indem Sie die Struktur Ihres Projekts und legen Sie die scope option / und fügen Sie den Service-Worker-Allowed HTTP-header der Antwort von Ihrem service-Arbeiter-Datei.

    Ich bin mit IIS, daher würde ich fügen Sie die folgenden web.config-Datei:

    <location path="static/mod/practice/service-worker.js">
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Service-Worker-Allowed" value="/" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</location>

    Und registrieren Sie die Arbeiter durch:

    navigator.serviceWorker.register('/static/mod/practice/service-worker.js', { scope: '/' })
        .then(function (registration)
        {
          console.log('Service worker registered successfully');
        }).catch(function (e)
        {
          console.error('Error during service worker registration:', e);
        });

    Getestet auf Firefox und Chrome.

    Beziehen sich auf die Beispiele in Service-worker-Spezifikation

    InformationsquelleAutor Ashraf Sabry

  3. 0

    Für die Menschen, die mit nginx, es könnte nicht einfacher sein:

    # Given that /static is your route to assets
location /static {
        # using /as root scope
        add_header Service-Worker-Allowed /;
....

    InformationsquelleAutor shriek

Schreibe einen Kommentar