blob: 30073ded26dfc697aeeab1da0305438976902234 (
plain)
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
|
---
title: WindowClient
slug: Web/API/WindowClient
tags:
- API
- Client
- Experimental
- Interface
- NeedsTranslation
- Reference
- Service Workers
- ServiceWorker
- TopicStub
- WindowClient
translation_of: Web/API/WindowClient
---
<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
<p>The <code>WindowClient</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. The service worker client independently selects and uses a service worker for its own loading and sub-resources.</p>
<h2 id="Methods">Methods</h2>
<p><em><code>WindowClient</code> inherits methods from its parent interface, {{domxref("Client")}}.</em></p>
<dl>
<dt>{{domxref("WindowClient.focus()")}}</dt>
<dd>Gives user input focus to the current client. </dd>
<dt>{{domxref("WindowClient.navigate()")}}</dt>
<dd>Loads a specified URL into a controlled client page.</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p><em><code>WindowClient</code> inherits properties from its parent interface, {{domxref("Client")}}.</em></p>
<dl>
<dt>{{domxref("WindowClient.focused")}} {{readonlyInline}}</dt>
<dd>A boolean that indicates whether the current client has focus.</dd>
<dt>{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}</dt>
<dd>Indicates the visibility of the current client. This value can be one of <code>hidden</code>, <code>visible</code>, <code>prerender</code>, or <code>unloaded</code>.</dd>
</dl>
<h2 id="Example">Example</h2>
<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(clients.matchAll({
type: "window"
}).then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
});</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', '#window-client-interface', 'WindowClient')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initial definition</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(42.0)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>navigate()</code></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(42.0)}}</td>
</tr>
<tr>
<td><code>navigate()</code></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><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
<li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
<li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
</ul>
|
