Zugriff auf dom von web-worker

Ich bin verrückt und brauche Ihre Hilfe.
Ich arbeite an einer serviceworker Projekt und ich bin den Umgang mit einem javascript-problem. Ich habe zwei wichtigsten Dateien. Die server.html - Datei, in die ich rufen Sie die externe service-worker.js Datei in Zeile 52.
Hier ist mein server.html Datei

<body>
    <div class="container"> 
        <h1>PRESENTER</h1>
        <div id="nicky">Nickname: <span id="nickname"></span></div>
        <form id="form-nick" name="form-nick" method="post" action="">
            <div class="formelement">
                <label name="labelnick" for="nick">Nickname:</label>
                <input type="text" id="nick" name="nick">
                <button type="submit">OK</button>
            </div>
        </form><br /><br />

        <h1>--></h1><div id="talker"></div>

        <button type="button" class="button blue" id="blue-display" disabled></button><br />

        <button type="button" class="button red" disabled></button><br />

        <button type="button" class="button lightblue" disabled></button>
    </div> <!-- container -->


    <script type="text/javascript">
        $(document).ready(function() {
            console.log("jquery ready function");

            $('#nick').focus();

            $('#form-nick').submit(function(){
                var form = $('#form-nick');
                var data = form.serialize();
                $.post('nicky.php', data, function(response) {
                    if (response) {
                        $('#nicky').show();
                        $('#nickname').text(response);
                        $('#form-nick').hide();
                        $('.blue, .red, .lightblue').fadeIn(100);

                        if('serviceWorker' in navigator){
                            //Register service worker
                            navigator.serviceWorker.register('service-worker.js').then(function(reg){
                                console.log("SW registration succeeded. Scope is "+reg.scope);

                            }).catch(function(err){
                                console.error("SW registration failed with error "+err);
                            });
                        }
                    } else {

                    }
                });
                return false;           
            });       
        });
    </script>
</body>

und hier ist die service-worker.js Datei

//Install Service Worker
self.addEventListener('install', function(event){
    console.log('>> sw installed!');
});
//Service Worker Active
self.addEventListener('activate', function(event){
    console.log('>> sw activated!');
});
//Service Worker reveives message
self.addEventListener('message', function(event){
    console.log(event.data);
    send_message_to_all_clients(event.data);
    document.getElementById("talker").innerHTML = event.data;
});

In der letzten Zeile würde ich gerne einfügen der empfangenen Nachricht in das div "talker". Aber ich bekomme immer den Fehler service-Arbeiter.js:17 " Uncaught ReferenceError: document ist nicht definiert

Passte ich auf, dass ich laden Sie die js-Datei, nachdem das Dokument geladen ist.
Jetzt weiß ich nicht was ich falsch mache.
Danke.

Code in einem service-Mitarbeiter keinen Zugriff auf ein Dokument.
Was ist Ihr Ziel mit einem service-Mitarbeiter? Im Gegensatz zu einem shared-Arbeiter, oder einfach nur ein Sammler?

InformationsquelleAutor Raphael | 2016-06-08

Service-Mitarbeiter — web-Arbeiter im Allgemeinen — keinen direkten Zugriff auf das DOM überhaupt. Stattdessen haben die Arbeiter post die Informationen zu den Haupt-thread, und der code in der main-thread aktualisieren der DOM als angemessen. Die theading Modell für JavaScript auf dem Browser ist, dass es nur einen Haupt-UI-thread (die default-Ihre Seite code ausgeführt wird), die auf das DOM zugreifen. Die anderen sind abgeschottet.

Auf dieser Seite und auf dieser Seite beide sprechen von Nachrichten zwischen service-Mitarbeiter und Kunden. Hier ist ein ganz einfaches Beispiel:

Skript in die Seite, das laden der service-Mitarbeiter:

(function() {
    "use strict";

    if (!navigator.serviceWorker || !navigator.serviceWorker.register) {
        console.log("This browser doesn't support service workers");
        return;
    }

    //Listen to messages from service workers.
    navigator.serviceWorker.addEventListener('message', function(event) {
        console.log("Got reply from service worker: " + event.data);
    });

    //Are we being controlled?
    if (navigator.serviceWorker.controller) {
        //Yes, send our controller a message.
        console.log("Sending 'hi' to controller");
        navigator.serviceWorker.controller.postMessage("hi");
    } else {
        //No, register a service worker to control pages like us.
        //Note that it won't control this instance of this page, it only takes effect
        //for pages in its scope loaded *after* it's installed.
        navigator.serviceWorker.register("service-worker.js")
            .then(function(registration) {
                console.log("Service worker registered, scope: " + registration.scope);
                console.log("Refresh the page to talk to it.");
                //If we want to, we might do `location.reload();` so that we'd be controlled by it
            })
            .catch(function(error) {
                console.log("Service worker registration failed: " + error.message);
            });
    }
})();

Und in service-worker.js:

self.addEventListener("message", function(event) {
    event.source.postMessage("Responding to " + event.data);
});

Beruht auf event.source, die unterstützt wird von den aktuellen Versionen von Chrome und Firefox.

Alternativ, anstelle der Verwendung event.source haben, können Sie senden eine Nachricht an mehrere clients von einem service-Mitarbeiter mit self.clients.matchAll; wieder in service-worker.js:

self.addEventListener("message", function(event) {
    self.clients.matchAll().then(all => all.forEach(client => {
        client.postMessage("Responding to " + event.data);
    }));
});

matchAll akzeptiert einige Filter-Optionen.

Du hast gesagt, dass es dir schwerfällt, es zu arbeiten. Hier ist eine vollständige version von was funktioniert bei mir in Chrome und Firefox:

service-worker.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Service Worker</title>
</head>
<body>
(Look in the console.)
<script>
(function() {
    "use strict";

    if (!navigator.serviceWorker || !navigator.serviceWorker.register) {
        console.log("This browser doesn't support service workers");
        return;
    }

    //Listen to messages from service workers.
    navigator.serviceWorker.addEventListener('message', function(event) {
        console.log("Got reply from service worker: " + event.data);
    });

    //Are we being controlled?
    if (navigator.serviceWorker.controller) {
        //Yes, send our controller a message.
        console.log("Sending 'hi' to controller");
        navigator.serviceWorker.controller.postMessage("hi");
    } else {
        //No, register a service worker to control pages like us.
        //Note that it won't control this instance of this page, it only takes effect
        //for pages in its scope loaded *after* it's installed.
        navigator.serviceWorker.register("service-worker.js")
            .then(function(registration) {
                console.log("Service worker registered, scope: " + registration.scope);
                console.log("Refresh the page to talk to it.");
                //If we want to, we might do `location.reload();` so that we'd be controlled by it
            })
            .catch(function(error) {
                console.log("Service worker registration failed: " + error.message);
            });
    }
})();
</script>
</body>
</html>

service-worker.js:

self.addEventListener("message", function(event) {
    //event.source.postMessage("Responding to " + event.data);
    self.clients.matchAll().then(all => all.forEach(client => {
        client.postMessage("Responding to " + event.data);
    }));
});

Wie Sie sehen können, das ist die version mit self.clients.matchAll mit der auskommentierten event.source version oben.

Wenn ich ausführen, dass in beiden Fenstern jeder Aktualisierung von jedem Fenster sendet eine Nachricht an die anderen Fenster (denn ich bin mit self.clients.matchAll...).

you can't directly manipulate the DOM from inside a worker von developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/...
Kann ein service-Arbeiter (im Gegensatz zu einer web-worker) sogar Nachrichten posten?
Crowder: Können Sie mir ein Beispiel, wie man die Meldung aus der Konsole service-worker.js der dom Datei (server.html), bitte!
ah OK, ja das macht viel mehr Sinn (zumindest mit meinem oberflächlichen Verständnis der service-Mitarbeiter).
Ein kurzer test war erfolgreich. Ich danke Ihnen sehr. Ich bin mit dem code-Beispiel in meinem Projekt ein post wird das komplette Projekt auf github und den link hier in den nächsten Tagen.

InformationsquelleAutor T.J. Crowder

0

Service-Mitarbeiter basiert auf asynchronen und laut dem Artikel kann man nicht auf das DOM zugreifen, die mit service gearbeitet für mehr Informationen Lesen Sie auf
https://developers.google.com/web/fundamentals/primers/service-workers/

Während dieser Zusammenhang kann auch die Frage beantworten, link nur Antworten sind entmutigt auf Stack Overflow, verbessern Sie diese Antwort durch die Einnahme von lebenswichtigen teilen Sie den link und setzen ihn in deine Antwort, das macht Sie sicher, dass Ihre Antwort noch eine Antwort, wenn der link wird geändert oder entfernt 🙂

InformationsquelleAutor Mohit Shukla

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.