diff options
Diffstat (limited to 'files/ja/web/api/serviceworkercontainer')
11 files changed, 789 insertions, 0 deletions
diff --git a/files/ja/web/api/serviceworkercontainer/controller/index.html b/files/ja/web/api/serviceworkercontainer/controller/index.html new file mode 100644 index 0000000000..784e302662 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/controller/index.html @@ -0,0 +1,64 @@ +--- +title: ServiceWorkerContainer.controller +slug: Web/API/ServiceWorkerContainer/controller +tags: + - API + - Controller + - Property + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - ServiceWorkerController +translation_of: Web/API/ServiceWorkerContainer/controller +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>controller</code></strong> 読み取り専用プロパティは、{{domxref("ServiceWorker")}} オブジェクトの状態が <code>activating</code> または <code>activated</code> ならそれ ({{domxref("ServiceWorkerRegistration.active")}} で返されるのと同じオブジェクト) を返します。このプロパティはリクエストが強制リフレッシュ(<em>Shift</em> + リフレッシュ)やアクティブワーカーがない場合は <code>null</code> を返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <em>myController</em> = navigator.serviceWorker.controller; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("ServiceWorker")}} オブジェクト。.</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { + // 1回限りのチェックを行って、サービスワーカーが制御しているかどうかを確認します。 + if (navigator.serviceWorker.controller) { + console.log(`このページは現在サービスワーカーによって制御されています: ${navigator.serviceWorker.controller}`); + } else { + console.log('このページは現在サービスワーカーによって制御されていません。'); + } +} else { + console.log('サービスワーカーをサポートしていません。'); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#navigator-service-worker-controller', 'ServiceWorkerRegistration.controller')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.controller")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/getregistration/index.html b/files/ja/web/api/serviceworkercontainer/getregistration/index.html new file mode 100644 index 0000000000..989fece148 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/getregistration/index.html @@ -0,0 +1,64 @@ +--- +title: ServiceWorkerContainer.getRegistration() +slug: Web/API/ServiceWorkerContainer/getRegistration +tags: + - API + - Method + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer/getRegistration +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>getRegistration()</code></strong> メソッドは、スコープ URL が指定されたドキュメント URL と一致する {{domxref("ServiceWorkerRegistration")}} オブジェクトを取得します。 このメソッドは、{{domxref("ServiceWorkerRegistration")}} または <code>undefined</code> に解決される {{jsxref("Promise")}} を返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>scope</code> {{optional_inline}}</dt> + <dd>サービスワーカー登録の一意の識別子 — 取得する登録オブジェクトのスコープ URL。 これは通常、相対 URL です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{domxref("ServiceWorkerRegistration")}} オブジェクトまたは <code>undefined</code> に解決される {{jsxref("Promise")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">navigator.serviceWorker.getRegistration('/app').then(function(registration) { + if(registration){ + document.querySelector('#status').textContent = 'ServiceWorkerRegistration が見つかりました。'; + } +}); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.getRegistration")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/getregistrations/index.html b/files/ja/web/api/serviceworkercontainer/getregistrations/index.html new file mode 100644 index 0000000000..80a371138c --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/getregistrations/index.html @@ -0,0 +1,59 @@ +--- +title: ServiceWorkerContainer.getRegistrations() +slug: Web/API/ServiceWorkerContainer/getRegistrations +tags: + - API + - Method + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerContainer + - getRegistrations +translation_of: Web/API/ServiceWorkerContainer/getRegistrations +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>getRegistrations()</code></strong> メソッドは、<code>ServiceWorkerContainer</code> に関するすべての {{domxref("ServiceWorkerRegistration")}} を配列で取得します。 このメソッドは、{{domxref("ServiceWorkerRegistration")}} の配列に解決される {{jsxref("Promise")}} を返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.getRegistrations().then(function(<em>serviceWorkerRegistrations</em>) { ... });</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{domxref("ServiceWorkerRegistration")}} オブジェクトの配列に解決される {{jsxref("Promise")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">navigator.serviceWorker.getRegistrations().then(function(registrations) { + document.querySelector('#status').textContent = 'ServiceWorkerRegistrations が見つかりました。'; +});</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#navigator-service-worker-getRegistrations', 'getRegistrations()')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.getRegistrations")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/index.html b/files/ja/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..3fc3212cdf --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/index.html @@ -0,0 +1,128 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Interface + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerContainer + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary"><a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> の <code>ServiceWorkerContainer</code> インターフェイスは、ネットワークエコシステムの全体的な単位として、サービスワーカーを表すオブジェクトを提供します。 サービスワーカーは、サービスワーカーの登録、登録解除、更新のための機能や、サービスワーカーの状態とそれらの登録状況にアクセスするための機能を備えています。</span></p> + +<p>ここで最も重要なことは、サービスワーカーを登録するための {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} メソッドと、現在のページがアクティブに制御されているかどうかを判断するための {{domxref("ServiceWorkerContainer.controller")}} プロパティを公開していることです。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt> + <dd>{{domxref("ServiceWorker")}} オブジェクトの状態が <code>activating</code> または <code>activated</code> の場合、それを返します（{{domxref("ServiceWorkerRegistration.active")}} によって返されるのと同じオブジェクト）。 このプロパティは、強制リフレッシュのリクエスト中（<em>Shift</em> + リフレッシュ）、またはアクティブワーカーがない場合は <code>null</code> を返します。</dd> +</dl> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt> + <dd>サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。 決して拒否せず、現在のページに関連付けられている {{domxref("ServiceWorkerRegistration")}} に {{domxref("ServiceWorkerRegistration.active")}} ワーカーが存在するようになるまで無期限に待機する {{jsxref("Promise")}} を返します。 その条件が満たされると、{{domxref("ServiceWorkerRegistration")}} で解決されます。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<dl> + <dt><code>controllerchange</code></dt> + <dd>文書に関連する {{domxref("ServiceWorkerRegistration")}} が新しいアクティブ（{{domxref("ServiceWorkerRegistration.active","active")}}）ワーカーを取得すると発生します。<br> + {{domxref("ServiceWorkerContainer.oncontrollerchange")}} プロパティからも利用できます。</dd> + <dt><code>error</code></dt> + <dd> 関連するサービスワーカーでエラーが発生するたびに発生します。<br> + {{domxref("ServiceWorkerContainer.onerror")}} プロパティからも利用できます。</dd> + <dt><code><a href="/ja/docs/Web/API/ServiceWorkerContainer/message_event">message</a></code></dt> + <dd>着信メッセージを {{domxref("ServiceWorkerContainer")}} オブジェクトが受信したときに発生します（例えば、{{domxref("MessagePort.postMessage()")}} 呼び出しを介して）。<br> + {{domxref("ServiceWorkerContainer.onmessage")}} プロパティからも利用できます。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}}</dt> + <dd>指定された <code>scriptURL</code> の {{domxref("ServiceWorkerRegistration")}} を作成または更新します。</dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt> + <dd>指定された文書 URL とスコープが一致する {{domxref("ServiceWorkerRegistration")}} オブジェクトを取得します。 このメソッドは、{{domxref("ServiceWorkerRegistration")}} または <code>undefined</code> に解決される {{jsxref("Promise")}} を返します。</dd> + <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt> + <dd><code>ServiceWorkerContainer</code> に関するすべての {{domxref("ServiceWorkerRegistration")}} オブジェクトを配列で返します。 このメソッドは、{{domxref("ServiceWorkerRegistration")}} の配列に解決される {{jsxref("Promise")}} を返します。</dd> + <dt>{{domxref("ServiceWorkerContainer.startMessages()")}}</dt> + <dd>サービスワーカーからその制御下のページにディスパッチされるメッセージの流れを明示的に開始します（例えば、{{domxref("Client.postMessage()")}} を介して送信されます）。 これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、まずブラウザーがサービスワーカーをサポートしているかどうかを確認します。 サポートしている場合、コードはサービスワーカーを登録し、ページがサービスワーカーによってアクティブに制御されているかどうかを判断します。 そうでない場合は、サービスワーカーが制御できるように、ページを再読み込みするようユーザーに求めます。 コードは、登録失敗も報告します。</p> + +<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { + // デフォルトのスコープを使用して、 + // サイトのルートでホストされるサービスワーカーを登録します。 + navigator.serviceWorker.register('/sw.js').then(function(registration) { + console.log('サービスワーカー登録成功:', registration); + + // この時点で、オプションで registration に何かを行うことができます。 + // https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration を参照してください + }).catch(function(error) { + console.log('サービスワーカー登録失敗:', error); + }); + + // 登録状況に関係なく、 + // 現在のページが既存のサービスワーカーによって制御されているかどうか、 + // およびそのコントローラーがいつ変更されたかについての情報も表示しましょう。 + + // まず、現在サービスワーカーが制御されているかどうか、 + // 1回限りのチェックを行います。 + if (navigator.serviceWorker.controller) { + console.log('このページは現在サービスワーカーによって制御されています:', navigator.serviceWorker.controller); + } + + // 次に、ハンドラーを登録して、新しいまたは更新された + // サービスワーカーが制御を取得するタイミングを検出します。 + navigator.serviceWorker.oncontrollerchange = function() { + console.log('このページは今サービスワーカーによって制御されています:', navigator.serviceWorker.controller); + }; +} else { + console.log('サービスワーカーをサポートしていません。'); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#serviceworkercontainer', 'ServiceWorkerContainer')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>（英語）</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか？</a>（英語）</li> + <li>{{jsxref("Promise")}}</li> + <li><a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web worker の使用</a></li> +</ul> diff --git a/files/ja/web/api/serviceworkercontainer/message_event/index.html b/files/ja/web/api/serviceworkercontainer/message_event/index.html new file mode 100644 index 0000000000..34fa83fc71 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/message_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'ServiceWorkerContainer: message イベント' +slug: Web/API/ServiceWorkerContainer/message_event +tags: + - API + - Event + - Reference + - Service Workers + - ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer/message_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>message</code></strong> イベントは、サービスワーカーからメッセージを受信するために、サービスワーカーによって制御されるページで使用します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td><code><a href="/ja/docs/Web/API/ServiceWorkerContainer/onmessage">onmessage</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、サービスワーカーは <a href="/ja/docs/Web/API/ServiceWorkerGlobalScope/onfetch"><code>fetch</code></a> イベントからクライアントの ID を取得し、<a href="/ja/docs/Web/API/Client/postMessage"><code>Client.postMessage</code></a> を使用してメッセージを送信します。</p> + +<pre class="brush: js">// サービスワーカー内 +async function messageClient(clientId) { + const client = await clients.get(clientId); + client.postMessage('こんにちはクライアント！'); +} + +addEventListener('fetch', (event) => { + messageClient(event.clientId); + event.respondWith(() => { + // ... + }); +});</pre> + +<p>クライアントは <code>message</code> イベントをリッスンしてメッセージを受信できます。</p> + +<pre class="brush: js">// 制御されているページ +navigator.serviceWorker.addEventListener('message', (message) => { + console.log(message); +});</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-onmessage', 'message')}}</td> + <td>{{Spec2('Service Workers')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.message_event")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker の使用</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/sw-test">サービスワーカーの基本的なコード例</a>（英語）</li> + <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker の準備はできていますか？</a>（英語）</li> + <li><a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web worker の使用</a></li> +</ul> diff --git a/files/ja/web/api/serviceworkercontainer/oncontrollerchange/index.html b/files/ja/web/api/serviceworkercontainer/oncontrollerchange/index.html new file mode 100644 index 0000000000..133a08b972 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/oncontrollerchange/index.html @@ -0,0 +1,51 @@ +--- +title: ServiceWorkerContainer.oncontrollerchange +slug: Web/API/ServiceWorkerContainer/oncontrollerchange +tags: + - API + - Interface + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerContainer + - onchange + - oncontrollerchange +translation_of: Web/API/ServiceWorkerContainer/oncontrollerchange +--- +<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>oncontrollerchange</code></strong> プロパティは、{{Event("controllerchange")}} イベントが発生するたびに（文書に関連する {{domxref("ServiceWorkerRegistration")}} が新しいアクティブ（{{domxref("ServiceWorkerRegistration.active","active")}}）ワーカーを取得したときに）発生するイベントハンドラーです。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.oncontrollerchange = function(<em>controllerchangeevent</em>) { ... }</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// 未定</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-oncontrollerchange', 'ServiceWorkerContainer: oncontrollerchange')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.oncontrollerchange")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/onerror/index.html b/files/ja/web/api/serviceworkercontainer/onerror/index.html new file mode 100644 index 0000000000..94f9975441 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/onerror/index.html @@ -0,0 +1,36 @@ +--- +title: ServiceWorkerContainer.onerror +slug: Web/API/ServiceWorkerContainer/onerror +tags: + - API + - Experimental + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerContainer + - onerror +translation_of: Web/API/ServiceWorkerContainer/onerror +--- +<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <code><strong>onerror</strong></code> プロパティは、関連するサービスワーカーで {{Event("error")}} イベントが発生するたびに発生するイベントハンドラーです。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.onerror = function(<em>errorevent</em>) { ... }</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">navigator.serviceWorker.onerror = function(errorevent) { + console.log(`受信したエラーメッセージ: ${errorevent.message}`); +} +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.onerror")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/onmessage/index.html b/files/ja/web/api/serviceworkercontainer/onmessage/index.html new file mode 100644 index 0000000000..b59e93fc14 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/onmessage/index.html @@ -0,0 +1,55 @@ +--- +title: ServiceWorkerContainer.onmessage +slug: Web/API/ServiceWorkerContainer/onmessage +tags: + - API + - Property + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer/onmessage +--- +<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>onmessage</code></strong> プロパティは、{{Event("message")}} イベントが発生するたびに発火するイベントハンドラーです。 （例えば、{{domxref("Client.postMessage()")}} 呼び出しを介して）着信メッセージを {{domxref("ServiceWorkerContainer")}} オブジェクトに受信したときに発生します。</span></p> + +<div class="note"> +<p><strong>注</strong>: 他のウェブメッセージング機能との整合性を保つため、サービスワーカーコンテキストから受信されるメッセージ（<code>onmessage</code> のイベントオブジェクトなど）は、最新のブラウザーでは {{domxref("MessageEvent")}} オブジェクトによって表されます。 （これらは、以前は廃止された {{domxref("ServiceWorkerMessageEvent")}} オブジェクトで表されていました。）</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.onmessage = function(<em>messageevent</em>) { ... }</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">navigator.serviceWorker.onmessage = function(messageevent) { + console.log(`received data: ${messageevent.data}`); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-serviceworkerglobalscope-onmessage', 'ServiceWorkerContainer: onmessage')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.onmessage")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/ready/index.html b/files/ja/web/api/serviceworkercontainer/ready/index.html new file mode 100644 index 0000000000..24611267c4 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/ready/index.html @@ -0,0 +1,64 @@ +--- +title: ServiceWorkerContainer.ready +slug: Web/API/ServiceWorkerContainer/ready +tags: + - API + - Property + - Ready + - Reference + - Service worker API + - ServiceWorker + - ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer/ready +--- +<p>{{APIRef("Service Workers API")}}</p> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>ready</code></strong> 読み取り専用プロパティは、サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。 決して拒否しない {{jsxref("Promise")}} を返し、現在のページに関連する {{domxref("ServiceWorkerRegistration")}} がアクティブ（{{domxref("ServiceWorkerRegistration.active","active")}}）ワーカーを持つまで無期限に待機します。 その条件が満たされると、{{domxref("ServiceWorkerRegistration")}} で解決されます。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">navigator.serviceWorker.ready.then(function(<em>serviceWorkerRegistration</em>) { ... });</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>決して拒否せず、最終的には {{domxref("ServiceWorkerRegistration")}} で解決される可能性がある {{jsxref("Promise")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then(function(registration) { + console.log('サービスワーカーがアクティブ:', registration.active); + + // この時点で、registration.pushManager.subscribe() などの + // アクティブなサービスワーカーを必要とするメソッドを呼び出すことができます + }); +} else { + console.log('サービスワーカーをサポートしていません。'); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#navigator-service-worker-ready', 'ServiceWorkerRegistration.ready')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.ready")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/register/index.html b/files/ja/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..e6705f094d --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,101 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +tags: + - API + - Method + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - ServiceWorkerContainer + - register +translation_of: Web/API/ServiceWorkerContainer/register +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>register()</code></strong> メソッドは、所与の <code>scriptURL</code> の {{domxref("ServiceWorkerRegistration")}} を作成または更新します。</span></p> + +<p>成功した場合、サービスワーカー登録は、提供されたスクリプト URL（<code>scriptURL</code>）を<em>スコープ</em>（<code>scope</code>）に結び付け、その後スコープをナビゲーションでの照合に使用します。 このメソッドは、制御されたページから無条件に呼び出すことができます。 つまり、アクティブな登録があるかどうかを最初に確認する必要はありません。</p> + +<p><em>スコープ</em>の意味と使用法についてはしばしば混乱があります。 サービスワーカーは自身の場所よりも広いスコープを持つことはできないため、デフォルトよりも狭いスコープが必要な場合にのみ、<code>scope</code> オプションを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>) + .then(function(<em>serviceWorkerRegistration</em>) { ... });</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt><code>scriptURL</code></dt> + <dd>サービスワーカースクリプトの URL。 登録されたサービスワーカーファイルには、有効な <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">JavaScript の MIME タイプ</a>が必要です。</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>登録オプションを含むオブジェクト。 現在利用可能なオプションは次のとおりです。 + <ul> + <li><code>scope</code>: サービスワーカーの登録スコープを定義する URL を表す {{domxref("USVString")}}。 つまり、サービスワーカーが制御できる URL の範囲です。 これは通常、相対 URL です。 これは、アプリケーションのベース URL を基準にしています。 デフォルトでは、サービスワーカー登録の <code>scope</code> 値は、サービスワーカースクリプトが配置されているディレクトリになります。 動作の詳細については、<a href="#Examples">例</a>のセクションを参照してください。</li> + </ul> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{domxref("ServiceWorkerRegistration")}} オブジェクトで解決する {{jsxref("Promise")}}。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ここで説明する例は、サービスワーカーのスコープがページにどのように適用されるかをよりよく理解するために、まとめて理解する必要があります。</p> + +<p>次の例では、<code>scope</code>（を省略した場合）のデフォルト値を使用しています。 この場合、サービスワーカーは <code>example.com/index.html</code> とその下のページ（<code>example.com/product/description.html</code> など）を制御します。</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // デフォルトのスコープを使用して、 + // サイトのルートでホストされるサービスワーカーを登録します。 + navigator.serviceWorker.register('/sw.js').then(function(registration) { + console.log('サービスワーカー登録成功:', registration); + }, /*catch*/ function(error) { + console.log('サービスワーカー登録失敗:', error); + }); +} else { + console.log('サービスワーカーをサポートしていません。'); +}</pre> + +<p>次のコードは、サイトのルートにあるページに含まれている場合、上記の例とまったく同じページに適用されます。 スコープが含まれている場合は、ページの場所をベースとして使用することに注意してください。 あるいは、このコードが <code>example.com/product/description.html</code> のページに含まれている場合、<code>'./'</code> のスコープは、サービスワーカーが <code>example.com/product</code> の下のリソースにのみ適用されることを意味します。 <code>example.com</code> のすべてに適用されるサービスワーカーを <code>example.com/product/description.html</code> で登録する必要がある場合は、上記のようにスコープを省略します。</p> + +<pre class="brush: js">if ('serviceWorker' in navigator) { + // より限定的なスコープを使用して、 + // サイトのルートでホストされるサービスワーカーを登録します。 + navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) { + console.log('サービスワーカー登録成功:', registration); + }, /*catch*/ function(error) { + console.log('サービスワーカー登録失敗:', error); + }); +} else { + console.log('サービスワーカーをサポートしていません。'); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.register")}}</p> +</div> diff --git a/files/ja/web/api/serviceworkercontainer/startmessages/index.html b/files/ja/web/api/serviceworkercontainer/startmessages/index.html new file mode 100644 index 0000000000..313ab34f80 --- /dev/null +++ b/files/ja/web/api/serviceworkercontainer/startmessages/index.html @@ -0,0 +1,76 @@ +--- +title: ServiceWorkerContainer.startMessages() +slug: Web/API/ServiceWorkerContainer/startMessages +tags: + - API + - Reference + - Service Workers + - ServiceWorkerContainer + - startMessages +translation_of: Web/API/ServiceWorkerContainer/startMessages +--- +<div>{{APIRef("Service Workers API")}}</div> + +<p><span class="seoSummary">{{domxref("ServiceWorkerContainer")}} インターフェイスの <strong><code>startMessages()</code></strong> メソッドは、サービスワーカーからその制御下にあるページにディスパッチされるメッセージの流れを明示的に開始します（例えば、{{domxref("Client.postMessage()")}} を介して送信されます）。 これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。</span></p> + +<h2 id="Explanation" name="Explanation">説明</h2> + +<p>デフォルトでは、ページの読み込み中に、ページを制御するサービスワーカーから（{{domxref("Client.postMessage()")}} を使用して）ページに送信されたすべてのメッセージはキューに入れられ、ページの HTML 文書が読み込まれて解析されると（つまり、{{event("DOMContentLoaded")}} イベント発生の後に）ディスパッチされます。 例えば、ページの読み込みが完了する前に {{domxref("EventTarget.addEventListener()")}} を使用してメッセージハンドラーを呼び出したが、すぐにメッセージの処理を開始したい場合は、{{domxref("ServiceWorkerContainer.startMessages()")}} を呼び出すことで、これらのメッセージのディスパッチを開始できます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: {{domxref("ServiceWorkerContainer.onmessage")}} を使用してハンドラーを直接設定すると、メッセージの送信が自動的に開始されます。 この場合、<code>startMessages()</code> は必要ありません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.startMessages();</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code>。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">if('serviceWorker' in navigator) { + navigator.serviceWorker + .register('/sw.js') + .then(function() { console.log('サービスワーカーが登録された'); }); +} + +// ... + +navigator.serviceWorker.addEventListener('message', (e) => { + // ... +}); + +navigator.serviceWorker.startMessages(); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-startmessages', 'ServiceWorkerContainer: startMessages()')}}</td> + <td>{{Spec2('Service Workers')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.ServiceWorkerContainer.startMessages")}}</p> +</div> |