Access dom by web worker
<p>I am getting crazy and need your help. 
I am working on a serviceworker project and I am dealing with a javascript problem. I have two main files. The <code>server.html</code> file in which I call the external <code>service-worker.js</code> file in line <code>52</code>.
Here is my <strong><code>server.html</code></strong> file</p>

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

        &lt;h1&gt;--&gt;&lt;/h1&gt;&lt;div id="talker"&gt;&lt;/div&gt;

        &lt;button type="button" class="button blue" id="blue-display" disabled&gt;&lt;/button&gt;&lt;br /&gt;

        &lt;button type="button" class="button red" disabled&gt;&lt;/button&gt;&lt;br /&gt;

        &lt;button type="button" class="button lightblue" disabled&gt;&lt;/button&gt;
    &lt;/div&gt; &lt;!-- container --&gt;


    &lt;script type="text/javascript"&gt;
        $(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;           
            });       
        });
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p>and here is the <strong>service-worker.js</strong> file</p>

<pre><code>// Install Service Worker
self.addEventListener('install', function(event){
    console.log('&gt;&gt; sw installed!');
});
// Service Worker Active
self.addEventListener('activate', function(event){
    console.log('&gt;&gt; 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;
});
</code></pre>

<p>In the last line I would like to insert the received message in the div "talker". But I always get the error <strong><em>service-worker.js:17 Uncaught ReferenceError: document is not defined</em></strong></p>

<p>I took care, that I load the js-File after the document is loaded. 
Now I don't know what I do wrong. 
Thanks. </p>