title: Access dom by web worker
body: <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>