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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
---
title: ServiceWorkerRegistration
slug: Web/API/ServiceWorkerRegistration
tags:
- API
- Draft
- Interface
- NeedsTranslation
- Offline
- Reference
- Service Workers
- ServiceWorkerRegistration
- TopicStub
- Workers
translation_of: Web/API/ServiceWorkerRegistration
---
<div>
<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
</div>
<p>The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</p>
<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
<div class="note">
<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
</div>
<h2 id="Properties">Properties</h2>
<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
<dl>
<dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
<dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
<dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
<dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
<dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
<dd>Returns a service worker whose state is <code>installed</code>. This is initially set to <code>null</code>.</dd>
<dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
<dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
<dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
<dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.</dd>
<dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
<dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
<dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
<dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
</dl>
<h3 id="Event_handlers">Event handlers</h3>
<dl>
<dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
<dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
<dl>
<dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
<dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
<dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
<dd>Displays the notification with the requested title.</dd>
<dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
<dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
<dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
<dd>Unregisters the service worker registration and returns a promise (see {{jsxref("Promise")}}). The service worker will finish any ongoing operations before it is unregistered.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a class="external external-icon" href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). The code checks to see if the browser supports service workers and if there's currently a service worker handling requests on this page for the current navigation.</p>
<p>Any new service workers are registered; if there's an existing service worker, the code overrides its default scope so that the registration applies to the current directory and everything underneath it. The example also reports any registration failures.</p>
<pre class="brush: js">if ('serviceWorker' in navigator) {
document.querySelector('#availability').innerText = 'are';
document.querySelector('#controlled').innerText = navigator.serviceWorker.controller ? 'is' : 'is not';
navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
document.querySelector('#register').textContent = 'succeeded';
}).catch(function(error) {
document.querySelector('#register').textContent = 'failed: ' + error;
});
} else {
document.querySelector('#availability').innerText = 'are not';
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-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-registration-obj', 'ServiceWorkerRegistration')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
<td>{{Spec2('Push API')}}</td>
<td>Adds the {{domxref("PushManager","pushManager")}} property.</td>
</tr>
<tr>
<td>{{SpecName('Web Notifications')}}</td>
<td>{{Spec2('Web Notifications')}}</td>
<td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td>
</tr>
<tr>
<td>{{SpecName('Background Sync')}}</td>
<td>{{Spec2('Background Sync')}}</td>
<td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-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>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Available in web workers</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("44.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>getNotifications()</code>, <code>showNotification()</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>sync</code> property</td>
<td>{{CompatChrome(49.0)}}</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</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>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoMobile("44.0") }}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(40.0)}}</td>
</tr>
<tr>
<td>Available in web workers</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("44.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>getNotifications()</code>, <code>showNotification()</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("46.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>sync</code> property</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>{{CompatChrome(49.0)}}</td>
</tr>
</tbody>
</table>
</div>
<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="/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="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
</ul>
|
