diff options
Diffstat (limited to 'files/zh-cn/web/api/serviceworker/index.html')
| -rw-r--r-- | files/zh-cn/web/api/serviceworker/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/serviceworker/index.html b/files/zh-cn/web/api/serviceworker/index.html new file mode 100644 index 0000000000..8ea3404a4f --- /dev/null +++ b/files/zh-cn/web/api/serviceworker/index.html @@ -0,0 +1,163 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +tags: + - API + - Draft + - Experimental + - Service Worker + - 离线 +translation_of: Web/API/ServiceWorker +--- +<div>{{SeeCompatTable}} {{APIRef("Service Workers API")}}</div> + +<div>ServiceWorker API 的<a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API"> ServiceWorker接口</a> 提供一个对一个服务工作者的引用。 多个浏览上下文（例如页面，工作者等）可以与相同的服务工作者相关联，每个都通过唯一的ServiceWorker对象。</div> + +<div> </div> + +<p>一个ServiceWorker对象在 {{domxref("ServiceWorkerRegistration.active")}} 属性和 {{domxref("ServiceWorkerContainer.controller")}} 属性中可用 — 这是一个激活并在控制页面的service worker(service worker成功注册,被控页面已经重新加载完毕.)</p> + +<p>ServiceWorker接口被分配了一系列生命周期事件 --- 安装和激活 --- 以及功能型的事件,包括 fetch.一个ServiceWorker对象有一个与之关联的 {{domxref("ServiceWorker.state")}},指示着它的生命周期.</p> + +<h2 id="属性">属性</h2> + +<p><em>ServiceWorker 接口继承它父类{{domxref("Worker")}}的属性.</em></p> + +<dl> + <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt> + <dd>返回作为 {{domxref("ServiceWorkerRegistration")}} 一部分所定义的ServiceWorker序列化脚本URL.这个URL必须和注册该ServiceWorker的文档处于同一域.</dd> + <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt> + <dd>返回service worker的状态.其值可能是如下之一:installing,installed,activating,activated或者是redundant.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt> + <dd>一个一旦 {{domxref("ServiceWorker.state")}} 发生改变时,即一个类型为statechange事件触发时就会被调用的 {{domxref("EventListener")}} 属性.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dd><em>ServiceWorker 接口继承它父类 {{domxref("Worker")}} 的方法 ,并带有一个 {{domxref("Worker.terminate")}} 的异常 --- 它不应该从service workers.ServiceWorker中访问.</em></dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>代码段来自<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>). 这段代码监听了{{domxref("ServiceWorker.state")}} 的变化并且返回它的值.</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 = 'installing'; + } else if (registration.waiting) { + serviceWorker = registration.waiting; + document.querySelector('#kind').textContent = 'waiting'; + } else if (registration.active) { + serviceWorker = registration.active; + document.querySelector('#kind').textContent = 'active'; + } + if (serviceWorker) { + // logState(serviceWorker.state); + serviceWorker.addEventListener('statechange', function (e) { + // logState(e.target.state); + }); + } + }).catch (function (error) { + // Something went wrong during registration. The service-worker.js file + // might be unavailable or contain a syntax error. + }); +} else { + // The current browser doesn't support service workers. +}</pre> + +<h2 id="规范">规范</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-obj', 'ServiceWorker')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</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>24</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>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> + </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 Extended Support Release</a> (ESR.)</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> + <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", "Promises")}}</li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> +</ul> |