We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


ServiceWorker API 的 ServiceWorker接口 提供一个对一个服务工作者的引用。 多个浏览上下文(例如页面,工作者等)可以与相同的服务工作者相关联,每个都通过唯一的ServiceWorker对象。

一个ServiceWorker对象在 ServiceWorkerRegistration.active 属性和 ServiceWorkerContainer.controller 属性中可用 — 这是一个激活并在控制页面的service worker(service worker成功注册,被控页面已经重新加载完毕.)

ServiceWorker接口被分配了一系列生命周期事件 --- 安装和激活 --- 以及功能型的事件,包括 fetch.一个ServiceWorker对象有一个与之关联的 ServiceWorker.state,指示着它的生命周期.


ServiceWorker 接口继承它父类Worker的属性.

ServiceWorker.scriptURL 只读
返回作为 ServiceWorkerRegistration 一部分所定义的ServiceWorker序列化脚本URL.这个URL必须和注册该ServiceWorker的文档处于同一域.
ServiceWorker.state 只读
返回service worker的状态.其值可能是如下之一:installing,installed,activating,activated或者是redundant.

Event handlers

ServiceWorker.onstatechange 只读
一个一旦 ServiceWorker.state 发生改变时,即一个类型为statechange事件触发时就会被调用的 EventListener 属性.


ServiceWorker 接口继承它父类 Worker 的方法 ,并带有一个 Worker.terminate 的异常 --- 它不应该从service workers.ServiceWorker中访问.


代码段来自service worker registration-events sample (live demo). 这段代码监听了ServiceWorker.state 的变化并且返回它的值.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js', {
        scope: './'
    }).then(function (registration) {
        var 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', function (e) {
                // logState(e.target.state);
    }).catch (function (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.


Specification Status Comment
Service Workers
Working Draft Initial definition.


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 44.0 (44.0)[1] 未实现 24 未实现
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 未实现 44.0 (44.0) (Yes) 未实现 ? 未实现 40.0

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)



此页面的贡献者: xgqfrms-GitHub, Taoja, marsoln
最后编辑者: xgqfrms-GitHub,