我变得疯狂，需要你的帮助。我正在研究一个serviceworker项目，我正在处理一个javascript问题。我有两个主要文件。我在server.html行中调用外部service-worker.js文件的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>
这是service-worker.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“talker”中插入收到的消息。但我总是得到错误service-worker.js：17 Uncaught ReferenceError：文档未定义
我小心翼翼，我在加载文档后加载了js-File。现在我不知道自己做错了什么。谢谢。
服务工作者 - 一般的Web工作者 - 根本无法直接访问DOM。相反，让工作人员将信息发布到主线程，并让主线程中的代码根据需要更新DOM。浏览器上JavaScript的主题模型是只有一个主UI线程（运行页面内代码的默认线程），可以访问DOM。其他人被围住了。
This page和this page都谈论服务工作者和客户之间的消息传递。这是一个非常简单的例子：
加载服务工作者的页面中的脚本：
(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);
});
这取决于当前版本的Chrome和Firefox支持的event.source。
或者，您可以使用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接受一些filtering options。
你说你在上班时遇到了麻烦。以下是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 ...）。
服务工作者基于异步，根据文章，您无法访问使用服务的DOM，以获取有关https://developers.google.com/web/fundamentals/primers/service-workers/的更多信息