数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中使用 Service Worker 操作 DOM？
在本教程中，您将学习如何使用 Service Worker 操作 JavaScript DOM。
DOM 操作是指我们更改文档对象模型 (DOM) 的结构和元素。我们可以通过添加、删除、更改或修改元素及其属性来修改 DOM。
什么是 Service Worker？
Service Worker 就像 Web 浏览器和 Web 服务器之间的代理服务器。如果用户的浏览器不支持 Service Worker，它会增强现有的网站，但如果他访问任何使用 Service Worker 的网站，则没有任何功能会受到影响。
它充当 Web 应用程序、浏览器和网络（如果网络已连接）之间。Service Worker 通过提供离线访问来提高网站可靠性（如果网络断开），拦截网络请求并相应地采取行动，并且更新驻留在服务器上的组件并提高性能。
Service Worker 的概念和用途
Service Worker 是对现有网站的增强。它是一个事件驱动的 Worker，并以 JavaScript 文件的形式工作，可以控制网站。Service Worker 在 Worker 上下文中运行，这就是它没有 DOM 访问权限的原因，它在后台单独的线程中执行，与 JavaScript 的主线程分离，因此它是异步的、非阻塞的。
Service Worker 使用缓存，这使得它可以在网络不可用时离线工作。
在 JavaScript 中使用 Service Worker
Service Worker 处理网络请求和一些异步事件。因此，它使用 Promise 和异步编程。
让我们看看如何注册 Service Worker。
由于并非所有浏览器都支持 Service Worker，因此要注册 Service Worker，我们首先应该进行未来检查。因此，我们检查 Service Worker 是否存在于 navigator 中。
然后要注册 Service Worker，我们调用方法 navigator.serviceWorker.register()，并在方法内部传递 Service Worker 的路径，此函数返回一个 Promise，因为 Service Worker 是一个异步事件。
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("service-worker.js")
.then(function (reg) {
// Service worker registration successful
})
.catch(function (err) {
// Service worker registration failed.
});
}
当 Promise 返回成功消息时，我们可以执行要执行的任务。
Service Worker 的一些标准事件
安装
激活
获取
推送
同步
这里 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);
});
安装事件只会被调用一次，直到 Service Worker 被更新。
下一个事件是“激活”。因此，Service Worker 不会在安装后立即激活。
下一个事件是推送。MDN 表示，当 Service Worker 接收到推送消息时，会将事件**发送到 Service Worker 的全局范围**（由 ServiceWorkerGlobalScope 接口表示）。
让我们使用程序操作 DOM 元素
在这里，我们将更改文本颜色并在 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);
});
示例
Index.html 文件
<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 元素的方法。
1K+ 浏览量
