ServiceWorker

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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
ServiceWorker
Editor's Draft Initial definition.

浏览器兼容性

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.)

参见

文档标签和贡献者