ServiceWorker
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
* Some parts of this feature may have varying levels of support.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
Giao diện ServiceWorker của Service Worker API cung cấp một tham chiếu đến một service worker. Nhiều ngữ cảnh duyệt web (ví dụ: các trang, worker, v.v.) có thể được liên kết với cùng một service worker, mỗi ngữ cảnh thông qua một đối tượng ServiceWorker duy nhất.
Đối tượng ServiceWorker khả dụng thông qua một số thuộc tính sau:
ServiceWorkerRegistration.activeServiceWorkerGlobalScope.serviceWorkerServiceWorkerContainer.controller— khi service worker ở trạng tháiactivatinghoặcactivatedServiceWorkerRegistration.installing— khi service worker ở trạng tháiinstallingServiceWorkerRegistration.waiting— khi service worker ở trạng tháiinstalled
Thuộc tính ServiceWorker.state và sự kiện statechange có thể được sử dụng để kiểm tra và quan sát các thay đổi trong trạng thái vòng đời của service worker được liên kết với đối tượng.
Các sự kiện vòng đời liên quan, chẳng hạn như install và activate được gửi đến chính service worker.
Service worker cho phép nhập tĩnh các mô-đun ECMAScript, nếu được hỗ trợ, bằng cách sử dụng import.
Việc nhập động bị cấm theo đặc tả kỹ thuật — việc gọi import() sẽ ném ra lỗi.
Service worker chỉ có thể được đăng ký trong phạm vi Window ở một số hoặc tất cả trình duyệt, vì đối tượng ServiceWorker không được hiển thị tới DedicatedWorkerGlobalScope và SharedWorkerGlobalScope.
Kiểm tra phần tương thích trình duyệt để biết thông tin.
Thuộc tính của instance
Giao diện ServiceWorker kế thừa các thuộc tính từ giao diện cha, EventTarget.
ServiceWorker.scriptURLRead only-
Trả về URL tập lệnh đã được tuần tự hóa của
ServiceWorkerđược định nghĩa như một phần củaServiceWorkerRegistration. URL phải có cùng nguồn gốc với tài liệu đăng kýServiceWorker. ServiceWorker.stateRead only-
Trả về trạng thái của service worker. Nó trả về một trong các giá trị sau:
parsed,installing,installed,activating,activated, hoặcredundant.
Phương thức của instance
Giao diện ServiceWorker kế thừa các phương thức từ giao diện cha, EventTarget.
ServiceWorker.postMessage()-
Gửi một thông điệp — bao gồm bất kỳ đối tượng JavaScript nào có thể sao chép theo cấu trúc — đến service worker. Thông điệp được truyền đến service worker bằng cách sử dụng sự kiện
messagetrên phạm vi toàn cục của nó.
Sự kiện
statechange-
Được kích hoạt khi
ServiceWorker.statethay đổi. error-
Được kích hoạt khi xảy ra lỗi bên trong đối tượng
ServiceWorker.
Ví dụ
Đoạn mã này trích từ mẫu sự kiện đăng ký service worker (xem trực tiếp). Mã lắng nghe mọi thay đổi trong ServiceWorker.state và trả về giá trị của nó.
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("service-worker.js", {
scope: "./",
})
.then((registration) => {
let serviceWorker;
if (registration.installing) {
serviceWorker = registration.installing;
document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
serviceWorker = registration.waiting;
document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
serviceWorker = registration.active;
document.querySelector("#kind").textContent = "active";
}
if (serviceWorker) {
// logState(serviceWorker.state);
serviceWorker.addEventListener("statechange", (e) => {
// logState(e.target.state);
});
}
})
.catch((error) => {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
});
} else {
// The current browser doesn't support service workers.
// Perhaps it is too old or we are not in a Secure Context.
}
Đặc tả kỹ thuật
| Specification |
|---|
| Service Workers Nightly # serviceworker-interface |