Доступ к dom веб-работником

Я схожу с ума и нуждаюсь в вашей помощи. Я работаю над проектом serviceworker, и я имею дело с проблемой javascript. У меня есть два основных файла. The server.html файл, в котором я вызываю внешний в строке 52. Вот мой server.html

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

и вот это сервис-работник.js

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

в последней строке я хотел бы вставить полученное сообщение в div "Говорун". Но я всегда получаю ошибку сервис-работник.js: 17 Uncaught ReferenceError: документ не определен

Я позаботился о том, чтобы загрузить js-файл после загрузки документа. Теперь я не знаю, что я делаю не так. Спасибо.

7
dom javascript jquery

2 ответов

работники сервиса-веб-работники в целом-вообще не имеют прямого доступа к DOM. Вместо этого работник отправляет информацию в основной поток и имеет код в основном потоке, обновляющий DOM по мере необходимости. Модель theading для JavaScript в браузерах заключается в том, что существует только один основной поток пользовательского интерфейса (по умолчанию работает ваш код на странице), который может получить доступ к DOM. Остальные отделены от него.

на этой странице и этот страница оба говорят о обмене сообщениями между работниками служб и клиентами. Вот очень простой пример:

скрипт на странице загрузки сервисного работника:

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

и service-worker.js:

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

это зависит от event.source, который поддерживается текущими версиями Chrome и Firefox.

попеременно, вместо того, чтобы использовать event.source, вы можете отправить сообщение нескольким клиентам работника сервиса с помощью self.clients.matchAll; снова в service-worker.js:

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

matchAll принимает параметры фильтрации.

Вы сказали, что у вас возникли проблемы с его работой. Вот полная версия того, что работает для меня в Chrome и 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);
    }));
});

как вы можете видеть, это версия с использованием self.clients.matchAll с комментарием event.source версия выше его.

Если Я запустите это в двух окнах, каждое обновление каждого окна отправляет сообщение в другие окна (потому что я использую self.clients.matchAll...).

18

Service worker основан на асинхронном и в соответствии со статьей Вы не можете получить доступ к DOM, используя службу, работающую для получения дополнительной информации https://developers.google.com/web/fundamentals/primers/service-workers/

0