1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: ServiceWorkerContainer
slug: Web/API/ServiceWorkerContainer
tags:
- API
- Draft
- Interface
- NeedsTranslation
- Offline
- Reference
- Service Workers
- ServiceWorkerContainer
- TopicStub
- Workers
translation_of: Web/API/ServiceWorkerContainer
---
<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}} </p>
<p><code>ServiceWorkerContainer</code>接口为 service worker提供一个容器般的功能，包括对service worker的注册，卸载 ，更新和访问service worker的状态，以及他们的注册者</p>
<p>主要是{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}}提供一个注册service worker的方法，{{domxref("ServiceWorkerContainer.controller")}}将获取当前控制页面网络的service worker</p>
<h2 id="属性">?属性</h2>
<dl>
<dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
<dd>当?{{domxref("ServiceWorker")}}对象的state是active的时候，返回一个 {{domxref("ServiceWorker")}} ?对象 和{{domxref("ServiceWorkerRegistration.active")}})返回相同的对象。 如果当前的state都不是active或者强制刷新浏览器则返回null。</dd>
</dl>
<dl>
<dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
<dd>定义了一个serviceWorker是否准备好为一个页面服务，将返回一个 {{jsxref("Promise")}}，并且这个 {{jsxref("Promise")}}永远不会 reject,这个 {{jsxref("Promise")}}会在{{domxref("ServiceWorkerRegistration")}} 获取到一个active的{{domxref("ServiceWorker")}}的时候被解决。</dd>
<dd> </dd>
</dl>
<h3 id="事件">?事件</h3>
<dl>
<dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
<dd>在{{domxref("ServiceWorkerRegistration")}}获取到一个新的active的{{domxref("ServiceWorker")}}对象的时候被触发</dd>
<dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
<dd>当service workers中出现错误的时候被触发</dd>
<dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
<dd>当{{domxref("ServiceWorkerContainer")}} 对象接受到一个message消息的时候被触发,message由{{domxref("MessagePort.postMessage()")}}发出</dd>
</dl>
<h2 id="方法">?方法</h2>
<dl>
<dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
<dd>创建或者更新一个{{domxref("ServiceWorkerRegistration")}} 用给定的<code>scriptURL</code></dd>
<dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
<dd>根据当前网页的URL与当前service worker的scope Url的匹配，返回一个 {{domxref("ServiceWorkerRegistration")}}对象,如果不能返回一个 {{domxref("ServiceWorkerRegistration")}},则返回一个{{jsxref("Promise")}}。</dd>
<dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
<dd>返回所有的{{domxref("ServiceWorkerRegistration")}}对象，如果不能返回一个 {{domxref("ServiceWorkerRegistration")}},则返回一个{{jsxref("Promise")}}。</dd>
</dl>
<h2 id="举例">?举例</h2>
<p>?代码是<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">service worker fallback-response sample</a> (see <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>)的其中一段. ?首先检查浏览器是否支持serviceWorker. 代码创建了一个serviceWorker，并且打印出来当前页面的serviceWorker的?是否接管了页面的网络状态. 如果没有需要刷新页面再次查看. 代码也处理了注册失败的情况</p>
<pre>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);
}</pre>
<h2 id="Specifications">Specifications</h2>
<table>
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<table>
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(40.0)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>24</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("44.0") }}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
<li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
<li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
<li>{{jsxref("Promise")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
</ul>
<ul>
<li> </li>
</ul>
|
