ServiceWorkerContainer

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

 

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

事件

ServiceWorkerContainer.oncontrollerchange
ServiceWorkerRegistration获取到一个新的active的ServiceWorker对象的时候被触发
ServiceWorkerContainer.onerror
当service workers中出现错误的时候被触发
ServiceWorkerContainer.onmessage
ServiceWorkerContainer  对象接受到一个message消息的时候被触发,message由MessagePort.postMessage()发出

方法

ServiceWorkerContainer.register() 
创建或者更新一个ServiceWorkerRegistration 用给定的scriptURL
ServiceWorkerContainer.getRegistration()
根据当前网页的URL与当前service worker的scope Url的匹配,返回一个 ServiceWorkerRegistration对象,如果不能返回一个 ServiceWorkerRegistration,则返回一个Promise
ServiceWorkerContainer.getRegistrations()
返回所有的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 Status Comment
Service Workers
ServiceWorkerContainer
Working Draft Initial definition.

Browser compatibility

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

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

See also

  •  

文档标签和贡献者

 最后编辑者: jianxcao,