資料結構
網路
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+ 瀏覽量
