Revision 966379 of Client

<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>

<p>The <code>Client</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the scope of a service worker client. A service worker client is either a document in a browser context or a {{domxref("SharedWorker")}}, which is controlled by an active worker. A client object acts as a snapshot representation of its associated service worker client in the scope of a service worker.</p>

<p><code>Client</code> is still under development (see <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">issue 414</a> and <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">issue 423</a>).</p>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("Client.postMessage()")}}</dt>
 <dd>Allows a service worker to send a message to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerClient" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object."><code>ServiceWorkerClient</code></a>.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("Client.frameType")}} {{readonlyInline}}</dt>
 <dd>Indicates the type of browsing context of the current client. This value can be one of&nbsp;<code>auxiliary</code>,&nbsp;<code>top-level</code>,&nbsp;<code>nested</code>, or&nbsp;<code>none</code>.</dd>
 <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt>
 <dd>Returns the universally unique identifier&nbsp;of the <code>Client</code> object.</dd>
 <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt>
 <dd>The URL of the current service worker client.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>This code is based on a snippet taken from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">service worker post-message sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/post-message/">post-message live</a>.) The code sends message data to which the service worker can reply via {{domxref("Client.postMessage()")}}.</p>

<p>The message is wrapped in a promise that resolves if the response doesn't contain an error and rejects with the error.</p>

<pre class="brush: js">
// service worker client (e.g. a document)
function sendMessage(message) {
  return new Promise(function(resolve, reject) {
    // note that this is the ServiceWorker.postMessage version
    navigator.serviceWorker.controller.postMessage(message);
    window.serviceWorker.onMessage = function(e) {
      resolve(e.data);
    });
  });
}

// controlling service worker
self.addEventListener("message", function(e) {
  // e.source is a client object
  e.source.postMessage("Hello! Your message was: " + e.data);
});
</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', '#client', 'Client')}}</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(40.0)}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup><br />
    {{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-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>{{CompatVersionUnknown}}<sup>[1]</sup><br />
    {{ CompatGeckoMobile("44.0") }}<sup>[2]</sup></td>
   <td>{{CompatUnknown}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<ul>
 <li><strong>[1]</strong>: In Firefox, go to <code>about:config</code> and set <code>dom.serviceWorkers.enabled</code> to <code>true</code>; restart browser. In Firefox you can also disable https-only checks by setting <code>dom.serviceWorkers.testing.enabled</code> to <code>true</code>.</li>
 <li><strong>[2]:</strong> Service workers have been turned on in Firefox by default as of Gecko 44.</li>
 <li><strong>[3]:</strong> In Firefox OS you can enable the prefs using the WebIDE tool by going to <em>Other &gt; Device Preferences</em>; bear in mind that you also need to <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Unrestricted_app_debugging_%28including_certified_apps_main_process_etc.%29">disable devtools restricted privileges</a>.</li>
</ul>

<h3 id="Chrome_Notes">Chrome Notes</h3>

<p>The <code>frameType</code> property is not supported&nbsp;Chrome {{CompatChrome(43.0)}}.</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>