ServiceWorkerContainer

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

ServiceWorkerContainer接口为 service worker 提供一个容器般的功能,包括对 service worker 的注册,卸载,更新和访问 service worker 的状态,以及他们的注册者

主要是ServiceWorkerContainer.register(scriptURL, scope[, base])提供一个注册 service worker 的方法,ServiceWorkerContainer.controller将获取当前控制页面网络的 service worker

?属性

ServiceWorkerContainer.controller 只读

ServiceWorker 对象的 state 是 active 的时候,返回一个 ServiceWorker ?对象 和ServiceWorkerRegistration.active) 返回相同的对象。如果当前的 state 都不是 active 或者强制刷新浏览器则返回 null。

ServiceWorkerContainer.ready (en-US) 只读

定义了一个 serviceWorker 是否准备好为一个页面服务,将返回一个 Promise,并且这个 Promise永远不会 reject,这个 Promise会在ServiceWorkerRegistration 获取到一个 active 的ServiceWorker的时候被解决。

?事件

ServiceWorkerContainer.oncontrollerchange (en-US)

ServiceWorkerRegistration获取到一个新的 active 的ServiceWorker对象的时候被触发

ServiceWorkerContainer.onerror (en-US)

当 service workers 中出现错误的时候被触发

ServiceWorkerContainer.onmessage (en-US)

ServiceWorkerContainer 对象接受到一个 message 消息的时候被触发,message 由MessagePort.postMessage() (en-US)发出

?方法

ServiceWorkerContainer.register()

创建或者更新一个ServiceWorkerRegistration 用给定的scriptURL

ServiceWorkerContainer.getRegistration() (en-US)

根据当前网页的 URL 与当前 service worker 的 scope Url 的匹配,返回一个 ServiceWorkerRegistration对象,如果不能返回一个 ServiceWorkerRegistration,则返回一个Promise

ServiceWorkerContainer.getRegistrations() (en-US)

返回所有的ServiceWorkerRegistration对象,如果不能返回一个 ServiceWorkerRegistration,则返回一个Promise

?举例

?代码是service worker fallback-response sample (see fallback-response live) 的其中一段。?首先检查浏览器是否支持 serviceWorker. 代码创建了一个 serviceWorker,并且打印出来当前页面的 serviceWorker 的?是否接管了页面的网络状态。如果没有需要刷新页面再次查看。代码也处理了注册失败的情况

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
    if (navigator.serviceWorker.controller) {
      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
      showRequestButtons();
    } else {
      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
    }
  }).catch(function(error) {
    document.querySelector('#status').textContent = error;
  });
} else {
  var aElement = document.createElement('a');
  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
  aElement.textContent = 'unavailable';
  document.querySelector('#status').appendChild(aElement);
}

Specifications

Specification
Service Workers
# serviceworkercontainer-interface

Browser compatibility

BCD tables only load in the browser

See also