---
title: ServiceWorker
slug: Web/API/ServiceWorker
tags:
  - API
  - Draft
  - Offline
  - Referensi
  - ServiceWorker
translation_of: Web/API/ServiceWorker
---
<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>

<p>Antarmuka <code>ServiceWorker</code> dari <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> menyediakan referensi kepada service worker. Konteks multi browsing (mis. halaman, pekerja, dll.) dapat dikaitkan dengan service worker yang sama, masing - masing melalui objek <code>ServiceWorker</code> tersendiri.</p>

<p>Objek <code>ServiceWorker</code> tersedia di properti {{domxref("ServiceWorkerRegistration.active")}} , dan properti {{domxref("ServiceWorkerContainer.controller")}}  — ini adalah service worker yang aktif dan mengontrol halaman (service worker telah sukses terdaftar, dan halaman yang di kontrol telah di muat kembali.)</p>

<p>Antarmuka <code>ServiceWorker</code> terbagi sebagai rangkaian siklus event — <code>install</code> dan <code>activate</code> — dan fungsional event termasuk <code>fetch</code>. Objek <code>ServiceWorker</code> memiliki keterkaitan {{domxref("ServiceWorker.state")}}, berdasarkan siklusnya.</p>

<h2 id="Properti">Properti</h2>

<p><em>Antarmuka <code>ServiceWorker</code> mewarisi properti dari induknya, {{domxref("Worker")}}.</em></p>

<dl>
 <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
 <dd>Mengembalikan serialisasi script URL <code>ServiceWorker</code> didefinisikan sebagai bagian dari {{domxref("ServiceWorkerRegistration")}}. URL harus dari origin yang sama dengan dokumen yang mendaftarkan <code>ServiceWorker</code>.</dd>
 <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
 <dd>Mengembalikan status keadaan service worker. Akan mengembalikan salah satu dari nilai berikut: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code>, atau <code>redundant</code>.</dd>
</dl>

<h3 id="Event_handlers">Event handlers</h3>

<dl>
 <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
 <dd>Properti {{domxref("EventListener")}} dipanggil setiap kali event type <code>statechange</code> di jalankan; Pada dasarnya dijalankan setiap ada perubahan pada {{domxref("ServiceWorker.state")}}.</dd>
</dl>

<h2 id="Method">Method</h2>

<p><em>Antarmuka <code>ServiceWorker</code> mewarisi method dari induknya, {{domxref("Worker")}}, dengan pengecualian {{domxref("Worker.terminate")}} — tidak harus dapat diakses dari service workers.</em></p>

<h2 id="Contoh">Contoh</h2>

<p>Ini adalah potongan kode dari <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). Kode memperhatikan setiap perubahan di {{domxref("ServiceWorker.state")}} dan mengembalikan nilainya.</p>

<pre class="brush: js">if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js', {
        scope: './'
    }).then(function (registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
            document.querySelector('#kind').textContent = 'Menginstall';
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
            document.querySelector('#kind').textContent = 'Mengunggu';
        } else if (registration.active) {
            serviceWorker = registration.active;
            document.querySelector('#kind').textContent = 'Aktif';
        }
        if (serviceWorker) {
            // logState(serviceWorker.state);
            serviceWorker.addEventListener('statechange', function (e) {
                // logState(e.target.state);
            });
        }
    }).catch (function (error) {
        // Terjadi kesalahan saat mendaftarkan. File service-worker.js
        // mungkin tidak tersedia atau terdapat sintaks yang error.
    });
} else {
    // Browser ini tidak mendukung service worker.
}</pre>

<h2 id="Spesifikasi">Spesifikasi</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spesifikasi</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Definisi inisial</td>
  </tr>
 </tbody>
</table>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fitur</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Dukungan dasar</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>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fitur</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>Dukungan dasar</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>
 </tbody>
</table>
</div>

<p>[1] Service workers (dan <a href="/en-US/docs/Web/API/Push_API">Push</a>) telah di nonaktifkan di <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
 <li><a href="/id/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Menggunakan Service Workers</a></li>
 <li><a href="https://github.com/mdn/sw-test">Contoh kode dasar Service workers</a></li>
 <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
 <li>{{jsxref("Promise", "Promises")}}</li>
 <li><a href="/id/docs/Web/Guide/Performance/Using_web_workers">Menggunakan web worker</a></li>
</ul>