如何使用 JavaScript 中的服务工作线程操作 DOM?
在本教程中，您将了解使用服务工作线程进行 JavaScript DOM 操作。
当我们更改文档对象模型 (DOM) 的结构和元素时，就会发生 DOM 操作。我们可以通过添加、删除、更改或修改元素及其属性来修改 DOM。
什么是服务工作线程?
服务工作线程的工作方式类似于 Web 浏览器和 Web 服务器之间的代理服务器。如果用户的浏览器不支持服务工作线程，它会增强现有网站的功能，但他访问任何使用服务工作线程的网站时，也不会影响任何功能。
它作用于 Web 应用程序、浏览器和网络(如果网络已连接)。服务工作者通过提供离线访问来提高网站的可靠性，在没有网络的情况下拦截网络请求并采取相应的行动，它更新驻留在服务器上的组件并提高性能。
服务工作者的概念和用途
服务工作者是对现有网站的增强。它是一个事件驱动的工作者，以可以控制网站的 JavaScript 文件的形式工作。服务工作者在工作者上下文中运行是它没有 DOM 访问权限的原因，它在后台执行，在与 JavaScript 主线程不同的线程中，这就是它非阻塞异步的原因。
服务工作者使用缓存，这使得在没有网络的情况下可以离线运行。
在 JavaScript 中使用服务工作者
服务工作者处理网络请求和一些异步事件。因此，它使用了承诺和异步编程。
让我们看看如何注册服务工作者。
由于所有浏览器仍然不支持服务工作者，因此要注册服务工作者，我们应该首先进行未来检查。因此，我们检查服务工作者是否存在于导航器中。
然后要注册服务工作者，我们调用方法 navigator.serviceWorker.register()，并在方法内部，我们将路径传递给服务工作者，此函数返回一个承诺，因为服务工作者是一个异步事件。
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("service-worker.js")
.then(function (reg) {
})
.catch(function (err) {
// 服务工作者注册失败。
});
}
当 Promise 返回成功消息时，我们就可以执行要执行的任务。
Service Worker 的一些标准事件
Install
Activate
Fetch
Push
Sync
Safari 浏览器不支持推送，大多数浏览器也不支持同步。
预缓存
当 Service Worker 在安装事件中注册时，预定义的资产文件将在请求之前被缓存。
Service-worker.js 文件代码
console.log('Started', self);
self.addEventListener('install', function(event) {
self.skipWaiting();
console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
console.log('Push message received', event);
});
安装事件只会调用一次，直到服务工作者更新为止。
下一个事件是"激活"。因此，服务工作者在安装后不会立即激活。
下一个事件是推送。MDN 表示，当服务工作者收到推送消息时，会将事件发送到服务工作者的全局范围(由 ServiceWorkerGlobalScope 接口表示)
让我们使用程序操作 DOM 元素
在这里，我们将更改文本颜色并在服务工作者成功注册后发送警报消息。
创建 service-worker.js 文件并添加以下代码 -
console.log('Started', self);
self.addEventListener('install', function(event) {
self.skipWaiting();
console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
console.log('Activated', event);
});
self.addEventListener('push', function(event) {
console.log('Push message received', event);
});
示例
Index.html file
<html>
<head>
<title>How to get/change the HTML with DOM element in JavaScript?</title>
</head>
<body>
<h2 id="tut">Change Here</h2>
<button type="button" onclick="ServiceWorker_Update_dom_Ele()">Get HTML for DOM element</button>
<script>
function ServiceWorker_Update_dom_Ele() {
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("service-worker.js")
.then(function (reg) {
var Element = document.getElementById("tut");
alert("Service worker registeration successful");
Element.style.color = "Red";
Element.innerHTML = "Tutorials Point";
})
.catch(function (err) {
alert("registration failed");
});
}
}
</script>
</body>
</html>
记住
Service Worker 仅在 https 或 localhost 等安全模式下运行，因此在 file:// 或 http 中运行 Service Worker 代码将不起作用。您可以在 vs code 中打开实时服务器以使 Service Worker 工作。
所以，您最终了解了 Service Worker 以及操作 DOM 元素的方法。
