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
|
---
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>
|
