diff options
Diffstat (limited to 'files/ja/web/api/serviceworkerglobalscope/index.html')
| -rw-r--r-- | files/ja/web/api/serviceworkerglobalscope/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/ja/web/api/serviceworkerglobalscope/index.html b/files/ja/web/api/serviceworkerglobalscope/index.html new file mode 100644 index 0000000000..1f484c3e08 --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/index.html @@ -0,0 +1,153 @@ +--- +title: ServiceWorkerGlobalScope +slug: Web/API/ServiceWorkerGlobalScope +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerGlobalScope + - TopicStub + - Workers + - インターフェイス +translation_of: Web/API/ServiceWorkerGlobalScope +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><code>ServiceWorkerGlobalScope</code> は <a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> のインターフェイスで、サービスワーカーのグローバル実行コンテキストを表します。</p> + +<p>開発者は ServiceWorker の状態が停止/再起動サイクルをまたいで続かないことを心にとめておいてください。このため各イベントハンドラーは、むき出しの、デフォルトのグローバル状態で実行されることを想定すべきです。</p> + +<p>いったん正しく登録されたら、サービスワーカーはメモリーとプロセッサーの力を温存するため、アイドル時であれば停止させることができます。アクティブなサービスワーカーはイベント、例えば {{domxref("ServiceWorkerGlobalScope.onfetch")}} や {{domxref("ServiceWorkerGlobalScope.onmessage")}} に応じて自動的に再起動します。</p> + +<p>加えて、同期リクエストはサービスワーカーでは許可されていません— 非同期リクエスト、つまり{{domxref("GlobalFetch.fetch", "fetch()")}} メソッド経由で初期化されたものが使われます。</p> + +<p>このインターフェイスは {{domxref("WorkerGlobalScope")}} インターフェイスと、その親の {{domxref("EventTarget")}} を継承し、このため {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}} のプロパティを実装しています。</p> + +<p>{{InheritanceDiagram(700, 85, 20)}}</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt> + <dd>サービスワーカーに関連する {{domxref("Clients")}} オブジェクトを含む。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt> + <dd>サービスワーカーの登録を表す {{domxref("ServiceWorkerRegistration")}} オブジェクトを含む。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt> + <dd>サービスワーカーに関連する {{domxref("CacheStorage")}} オブジェクトを含む。</dd> +</dl> + +<h2 id="Event" name="Event">イベント</h2> + +<dl> + <dt>{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}</dt> + <dd>{{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.active")}} ワーカーを得た時に発生します。<br> + {{domxref("ServiceWorkerGlobalScope.onactivate")}} プロパティからも利用できます。</dd> + <dt><code>fetch</code></dt> + <dd>{{domxref("GlobalFetch.fetch", "fetch()")}} が呼び出されたときに発生します。<br> + {{domxref("ServiceWorkerGlobalScope.onfetch")}} プロパティからも利用できます。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}</dt> + <dd>{{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.installing")}} ワーカーを得た時に発生します。<br> + {{domxref("ServiceWorkerGlobalScope.oninstall")}} プロパティからも利用できます。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}</dt> + <dd>メッセージを受信したときに発生します。制御中のページは {{domxref("MessagePort.postMessage()")}} メソッドを使用してサービスワーカーにメッセージを送信することができます。サービスワーカーは任意で <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a> で公開されている {{domxref("MessagePort")}} を通じて、対応する制御中のページに返信することができます。<br> + {{domxref("ServiceWorkerGlobalScope.onmessage")}} プロパティからも利用できます。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}</dt> + <dd>表示された通知をユーザーがクリックしたときに発生します。<br> + {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} プロパティからも利用できます。</dd> + <dt><code>notificationclose</code></dt> + <dd>表示された通知をユーザーが閉じたときに発生します。<br> + {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} プロパティからも利用できます。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}</dt> + <dd>サーバーのプッシュ通知が届いたときに発生します。<br> + {{domxref("ServiceWorkerGlobalScope.onpush")}} プロパティからも利用できます。</dd> + <dt>{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}</dt> + <dd>プッシュ通知への加入が無効化されたとき、または無効化されようとするとき (例えば、プッシュ通知の有効期限が設定されたとき) に発生します。<br> + {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} プロパティからも利用できます。</dd> + <dt><code>sync</code></dt> + <dd>サービスワーカーのクライアントページから {{domxref("SyncManager.register")}} への呼び出しが行われたときに発生します。ネットワークが有効であるか、すぐに利用可能になるのであれば、直ちに同期が試みられます。<br> + {{domxref("ServiceWorkerGlobalScope.onsync")}} プロパティからも利用できます。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt> + <dd>現在のサービスワーカーの登録を、待ち状態からクライアントが使っている時のアクティブ状態に進めます。</dd> +</dl> + +<p><code>ServiceWorkerGlobalScope</code> は {{domxref("WorkerGlobalScope")}} を実装します — これは {{domxref("GlobalFetch")}} を実装します。このため利用できる次のプロパティも持っています:</p> + +<dl> + <dt>{{domxref("GlobalFetch.fetch()")}}</dt> + <dd>リソース取得(fetch)のプロセスを開始します。これはリクエストのレスポンスを表す {{domxref("Response")}} オブジェクトを解決するpromiseを返します。このアルゴリズムは service worker コンテキストに渡されるfetch処理のエントリーポイントです。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードスニペットは、<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a>（<a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a> を参照してください）からのものです。{{domxref("ServiceWorkerGlobalScope.onfetch")}} イベントハンドラーは <code>fetch</code> イベントを監視します。イベントが発火した時、コードは {{domxref("Cache")}} オブジェクト内で、最初にマッチングしたリクエストに対して解決するプロミスを返します。もし、何もマッチしなかった場合は、コードはネットワークからのレスポンスをフェッチします。</p> + +<p>さらに、このコードは {{domxref("GlobalFetch.fetch", "fetch()")}} 演算から投げられた例外をハンドリングします。 HTTP のエラーレスポンス (たとえば、404) は、例外を引き起こさないことにご注意ください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。</p> + +<pre class="brush: js">self.addEventListener('fetch', function(event) { + console.log('Handling fetch event for', event.request.url); + + event.respondWith( + caches.match(event.request).then(function(response) { + if (response) { + console.log('Found response in cache:', response); + + return response; + } + console.log('No response found in cache. About to fetch from network...'); + + return fetch(event.request).then(function(response) { + console.log('Response from network is:', response); + + return response; + }, function(error) { + console.error('Fetching failed:', error); + + throw error; + }); + }) + ); +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">サービスワーカーの使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li>{{jsxref("Promise")}}</li> + <li><a href="/ja/docs/Web/Guide/Performance/Using_web_workers">ウェブワーカーの使用</a></li> +</ul> |