ServiceWorkerContainer - Web API 接口参考 编辑

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

 

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

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!

• Desktop
• Mobile

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

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promise
• Using web workers

•