From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/fetchevent/clientid/index.html | 66 +++++++++++ files/ja/web/api/fetchevent/index.html | 112 ++++++++++++++++++ .../web/api/fetchevent/preloadresponse/index.html | 80 +++++++++++++ .../web/api/fetchevent/replacesclientid/index.html | 70 +++++++++++ files/ja/web/api/fetchevent/request/index.html | 93 +++++++++++++++ files/ja/web/api/fetchevent/respondwith/index.html | 130 +++++++++++++++++++++ .../api/fetchevent/resultingclientid/index.html | 70 +++++++++++ 7 files changed, 621 insertions(+) create mode 100644 files/ja/web/api/fetchevent/clientid/index.html create mode 100644 files/ja/web/api/fetchevent/index.html create mode 100644 files/ja/web/api/fetchevent/preloadresponse/index.html create mode 100644 files/ja/web/api/fetchevent/replacesclientid/index.html create mode 100644 files/ja/web/api/fetchevent/request/index.html create mode 100644 files/ja/web/api/fetchevent/respondwith/index.html create mode 100644 files/ja/web/api/fetchevent/resultingclientid/index.html (limited to 'files/ja/web/api/fetchevent') diff --git a/files/ja/web/api/fetchevent/clientid/index.html b/files/ja/web/api/fetchevent/clientid/index.html new file mode 100644 index 0000000000..73666422a1 --- /dev/null +++ b/files/ja/web/api/fetchevent/clientid/index.html @@ -0,0 +1,66 @@ +--- +title: FetchEvent.clientId +slug: Web/API/FetchEvent/clientId +tags: + - API + - FetchEvent + - Property + - Reference + - Service Workers + - clientId +translation_of: Web/API/FetchEvent/clientId +--- +

{{APIRef("Service Workers API")}}

+ +

{{domxref("FetchEvent")}}インターフェイスの clientId 読み取り専用プロパティは、現在のサービスワーカーが制御している {{domxref("Client")}} の id を返します。

+ +

次に、{{domxref("Clients.get()")}} メソッドに、この id を渡して、関連するクライアントを取得できます。

+ +

構文

+ +
var myClientId = fetchEvent.clientId;
+ +

値

+ +

クライアント id を表す {{domxref("DOMString")}}。

+ +

例

+ +
self.addEventListener('fetch', function(event) {
+  console.log(event.clientId);
+​});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#dom-fetchevent-clientid', 'clientId')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.FetchEvent.clientId")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/fetchevent/index.html b/files/ja/web/api/fetchevent/index.html new file mode 100644 index 0000000000..9d0e59017f --- /dev/null +++ b/files/ja/web/api/fetchevent/index.html @@ -0,0 +1,112 @@ +--- +title: FetchEvent +slug: Web/API/FetchEvent +tags: + - API + - FetchEvent + - Interface + - Offline + - Reference + - Service Workers + - Workers +translation_of: Web/API/FetchEvent +--- +

{{APIRef("Service Workers API")}}

+ +

これは、{{domxref("ServiceWorkerGlobalScope", "サービスワーカーのグローバルスコープ", "", 1)}}にディスパッチされる fetch イベント用のイベント型です。 これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。 これは、このフェッチへのレスポンスを提供できるようにする {{domxref("FetchEvent.respondWith", "event.respondWith()")}} メソッドを提供します。

+ +

コンストラクター

+ +
+
{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}
+
新しい FetchEvent オブジェクトを作成します。 このコンストラクターは通常は使用しません。 ブラウザーはこのオブジェクト自体を作成して fetch イベントのコールバックのために提供します。
+
+ +

プロパティ

+ +

先祖の {{domxref("Event")}} からプロパティを継承します。

+ +
+
{{domxref("FetchEvent.clientId")}} {{readonlyInline}}
+
フェッチを開始した同一オリジンの {{domxref("Client")}} の {{domxref("Client.id", "id")}}。
+
{{domxref("FetchEvent.preloadResponse")}} {{readonlyinline}}
+
{{domxref("Response")}} への {{jsxref("Promise")}}、またはこのフェッチがナビゲーションでない場合や、ナビゲーションのプリロードが有効になっていない場合は undefined。
+
{{domxref("FetchEvent.replacesClientId")}} {{readonlyInline}}
+
ページのナビゲーション中に置き換えられる {{domxref("Client")}} の {{domxref("Client.id", "id")}}。
+
{{domxref("FetchEvent.resultingClientId")}} {{readonlyInline}}
+
ページのナビゲーション中に前のクライアントを置き換える {{domxref("Client")}} の {{domxref("Client.id", "id")}}。
+
{{domxref("FetchEvent.request")}} {{readonlyInline}}
+
ブラウザーが行うつもりの {{domxref("Request")}}。
+
+ +

メソッド

+ +

親である {{domxref("ExtendableEvent")}} からメソッドを継承します。

+ +
+
{{domxref("FetchEvent.respondWith()")}}
+
ブラウザー既定のフェッチ処理を抑止し、自身のレスポンス (の promise を) 提供します。
+
{{domxref("ExtendableEvent.waitUntil()")}}
+
+

イベントの存続期間を延長します。 ストリーミングやキャッシングなど、レスポンスの返却を超えて延長するタスクをブラウザーに通知するために使用します。

+
+
+ +

例

+ +

この fetch イベントは、非 GET リクエストに対してブラウザー既定のものを使用します。 GET リクエストに対してはキャッシュからマッチするものを返そうとし、ネットワークにフォールバックします。 キャッシュにマッチするものが見つかった場合、次回ためにキャッシュを非同期に更新します。

+ +
self.addEventListener('fetch', event => {
+  // Let the browser do its default thing
+  // for non-GET requests.
+  if (event.request.method != 'GET') return;
+
+  // Prevent the default, and handle the request ourselves.
+  event.respondWith(async function() {
+    // Try to get the response from a cache.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // If we found a match in the cache, return it, but also
+      // update the entry in the cache in the background.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // If we didn't find a match in the cache, use the network.
+    return fetch(event.request);
+  }());
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#dom-fetchevent-fetchevent', 'FetchEvent()')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.FetchEvent")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/fetchevent/preloadresponse/index.html b/files/ja/web/api/fetchevent/preloadresponse/index.html new file mode 100644 index 0000000000..257f293eb8 --- /dev/null +++ b/files/ja/web/api/fetchevent/preloadresponse/index.html @@ -0,0 +1,80 @@ +--- +title: FetchEvent.preloadResponse +slug: Web/API/FetchEvent/PreloadResponse +tags: + - API + - FetchEvent + - Offline + - Property + - Reference + - Service Workers + - Web Performance + - Workers + - request +translation_of: Web/API/FetchEvent/PreloadResponse +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("FetchEvent")}} インターフェイスの preloadResponse 読み取り専用プロパティは、ナビゲーションプリロードがトリガーされた場合はナビゲーションプリロード {{domxref("Response")}} に解決され、それ以外の場合は undefined に解決される {{jsxref("Promise")}} を返します。

+ +

構文

+ +
var expectedResponse = fetchEvent.preloadResponse;
+ +

値

+ +

{{domxref("Response")}} に解決されるか、それ以外の場合は undefined に解決される {{jsxref("Promise")}}。

+ +

例

+ +

このコードスニペットは、ナビゲーションプリロードのページ（英語）からのものです。 {{domxref("ServiceWorkerGlobalScope.onfetch")}} イベントハンドラーは、fetch イベントをリッスンします。 起動したら、{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} に、制御されたページに戻す Promise を渡します。 この Promise は、{{domxref("Cache")}} オブジェクトで最初に一致した URL リクエストに解決されます。 一致が見つからない場合、コードはプリロード済みのレスポンスをチェックします。 それ以外の場合は、ネットワークからレスポンスをフェッチします。

+ +
addEventListener('fetch', event => {
+  event.respondWith(async function() {
+    // 可能な場合はキャッシュから応答します
+    const cachedResponse = await caches.match(event.request);
+    if (cachedResponse) return cachedResponse;
+
+    // それ以外の場合は、プリロード済みのレスポンスがあればそれを使用します
+    const response = await event.preloadResponse;
+    if (response) return response;
+
+    // それ以外の場合は、ネットワークを試します。
+    return fetch(event.request);
+  }());
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#fetch-event-preloadresponse', 'preloadResponse')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.FetchEvent.preloadResponse")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/fetchevent/replacesclientid/index.html b/files/ja/web/api/fetchevent/replacesclientid/index.html new file mode 100644 index 0000000000..fcb089891b --- /dev/null +++ b/files/ja/web/api/fetchevent/replacesclientid/index.html @@ -0,0 +1,70 @@ +--- +title: FetchEvent.replacesClientId +slug: Web/API/FetchEvent/replacesClientId +tags: + - API + - DOM + - FetchEvent + - Property + - Reference + - Service Workers + - Workers + - replacesClientId +translation_of: Web/API/FetchEvent/replacesClientId +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("FetchEvent")}} インターフェイスの replacesClientId 読み取り専用プロパティは、ページナビゲーション中に置き換えられる{{domxref("Client", "クライアント")}}の {{domxref("Client.id", "id")}} です。

+ +

例えば、ページ A からページ B に移動する場合、replacesClientId はページ A に関連するクライアントの id です。 about:blank のクライアントは置き換えられるのではなく再利用されるため、about:blank から別のページに移動するときは、空の文字列になることがあります。

+ +

さらに、フェッチがナビゲーションでない場合、replacesClientId は空の文字列になります。 これは、ナビゲーションの直前に間もなく置き換えられるクライアントにアクセス/通信するために使用できます。

+ +

構文

+ +
var myReplacedClientId = fetchEvent.replacesClientId;
+ +

値

+ +

{{domxref("DOMString")}}。

+ +

例

+ +
self.addEventListener('fetch', function(event) {
+  console.log(event.replacesClientId);
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#dom-fetchevent-replacesclientid', 'replacesClientId')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.FetchEvent.replacesClientId")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/fetchevent/request/index.html b/files/ja/web/api/fetchevent/request/index.html new file mode 100644 index 0000000000..358292d840 --- /dev/null +++ b/files/ja/web/api/fetchevent/request/index.html @@ -0,0 +1,93 @@ +--- +title: FetchEvent.request +slug: Web/API/FetchEvent/request +tags: + - API + - FetchEvent + - Offline + - Property + - Reference + - Service Workers + - Workers + - request +translation_of: Web/API/FetchEvent/request +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("FetchEvent")}} インターフェイスの request 読み取り専用プロパティは、イベントハンドラーをトリガーした {{domxref("Request")}} を返します。

+ +

このプロパティは null 不可です（Firefox の場合、バージョン 46 以降）。 他の方法でリクエストが提供されない場合、コンストラクターの init オブジェクトに request を含める必要があります（{{domxref("FetchEvent.FetchEvent()")}} を参照）。

+ +

構文

+ +
var recentRequest = fetchEvent.request;
+ +

値

+ +

{{domxref("Request")}} オブジェクト。

+ +

例

+ +

このコードスニペットは、サービスワーカーのフェッチの例からのものです（フェッチの例をライブで実行）。 {{domxref("ServiceWorkerGlobalScope.onfetch")}} イベントハンドラーは、fetch イベントをリッスンします。 起動したら、{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} に、制御されたページに戻す Promise を渡します。 この Promise は、{{domxref("Cache")}} オブジェクトで最初に一致した URL リクエストに解決されます。 一致が見つからない場合、コードはネットワークからレスポンスをフェッチします。

+ +

このコードは、{{domxref("ServiceWorkerGlobalScope.fetch")}} 操作からスローされた例外も処理します。 HTTP エラーレスポンス（404 など）は例外をトリガーしないことに注意してください。 適切なエラーコードが設定された通常のレスポンスオブジェクトを返します。

+ +
self.addEventListener('fetch', function(event) {
+  console.log('フェッチイベントの処理:', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('キャッシュで見つかったレスポンス:', response);
+
+        return response;
+      }
+      console.log('キャッシュにレスポンスが見つかりません。 ネットワークからフェッチします...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('ネットワークからのレスポンス:', response);
+
+        return response;
+      }).catch(function(error) {
+        console.error('フェッチ失敗:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#fetch-event-request', 'request')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.FetchEvent.request")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/fetchevent/respondwith/index.html b/files/ja/web/api/fetchevent/respondwith/index.html new file mode 100644 index 0000000000..5e72940bcb --- /dev/null +++ b/files/ja/web/api/fetchevent/respondwith/index.html @@ -0,0 +1,130 @@ +--- +title: FetchEvent.respondWith() +slug: Web/API/FetchEvent/respondWith +tags: + - API + - Experimental + - FetchEvent + - Method + - Offline + - Reference + - Service Worker + - Worker + - respondWith +translation_of: Web/API/FetchEvent/respondWith +--- +

{{APIRef("Service Workers API")}}

+ +

{{domxref("FetchEvent")}} インターフェイスの respondWith() メソッドは、ブラウザー既定の fetch ハンドリングを抑止して、あなたが {{domxref("Response")}} 用の Promise を提供できるようにします。

+ +

たいていの場合、あなたは受け手が理解できるどんなレスポンスでも提供できます。例えば、{{HTMLElement('img')}} がリクエストを開始する場合、レスポンスボディには画像データが必要です。セキュリティの理由から、少しのグローバルルールがあります:

+ + + +

リソースの最終 URL を指定する

+ +

Firefox 59 以降では、サービスワーカーが {{domxref("FetchEvent.respondWith()")}} に {{domxref("Response")}} を渡すとき、その {{domxref("Response.url")}} の値がインターセプトされたネットワークリクエストの最終 URL として伝搬します。{{domxref("Response.url")}} の値が空文字の場合は、{{domxref("Request.url","FetchEvent.request.url")}} が最終 URL として利用されます。

+ +

かつては {{domxref("Request.url","FetchEvent.request.url")}} がすべての場合に最終 URL として使われていました。与えられた {{domxref("Response.url")}} は実際には無視されていました。

+ +

つまり、例えば、サービスワーカーがスタイルシートや Worker スクリプトをインターセプトすると、与えられた {{domxref("Response.url")}} が、サブリソースが読み込む相対的な {{cssxref("@import")}} や {{domxref("WorkerGlobalScope.importScripts()","importScripts()")}} の代わりに使われます ({{bug(1222008)}})。

+ +

たいていのネットワークリクエストに対して、最終 URL を観測できないためこの変更は影響ありません。しかし、少しだけ関係する場合があります:

+ + + +

{{domxref("Window","Window")}} と {{domxref("HTMLIFrameElement","iframe")}} のナビゲーションリクエストはこの最終 URL を使わ「ない」ことに注意してください。HTML 仕様のナビゲーションのリダイレクトの処理方法では、{{domxref("Window.location")}} のためにリクエスト URL を使います。これは、オフラインの時に、ユーザーに見える URL を変更することなくサイトが「代替の」ウェブページを提供できるということを意味します。

+ +

構文

+ +
fetchEvent.respondWith(
+  // Response に解決される Promise。
+​);
+ +

パラメーター

+ +

{{domxref("Response")}} または Response に解決される {{jsxref("Promise")}}。それ以外の場合は、ネットワークエラーが Fetch に返されます。

+ +

返り値

+ +

undefined。

+ +

例外

+ + + + + + + + + + + + + + + + + + +
例外注記
NetworkError上記の "グローバルルール" にヒントがあるように、ネットワークエラーは {{domxref("Request.mode","FetchEvent.request.mode")}} と {{domxref("Response.type")}}  の値の組み合わせでトリガーされます。
InvalidStateErrorイベントがディスパッチされていないか、respondWith() が既に呼び出されています。
+ +

例

+ +

この fetch イベントはキャッシュ API からのレスポンスを返そうとし、ない場合にはネットワークにフォールバックします。

+ +
addEventListener('fetch', event => {
+  // デフォルトを抑止し、リクエストを自分で処理します。
+  event.respondWith(async function() {
+    // キャッシュからレスポンスを取得しようとします。
+    const cachedResponse = await caches.match(event.request);
+    // 見つかったらそれを返します。
+    if (cachedResponse) return cachedResponse;
+    // キャッシュ内に一致するものが見つからなかった場合は、ネットワークを使用します。
+    return fetch(event.request);
+  }());
+});
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#fetch-event-respondwith-method', 'respondWith()')}}{{Spec2('Service Workers')}}初期定義。
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.FetchEvent.respondWith")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/fetchevent/resultingclientid/index.html b/files/ja/web/api/fetchevent/resultingclientid/index.html new file mode 100644 index 0000000000..a8bde62492 --- /dev/null +++ b/files/ja/web/api/fetchevent/resultingclientid/index.html @@ -0,0 +1,70 @@ +--- +title: FetchEvent.resultingClientId +slug: Web/API/FetchEvent/resultingClientId +tags: + - API + - DOM + - FetchEvent + - Property + - Reference + - Service Workers + - Worker + - resultingClientId +translation_of: Web/API/FetchEvent/resultingClientId +--- +
{{APIRef("Service Workers API")}}
+ +

{{domxref("FetchEvent")}} インターフェイスの resultingClientId 読み取り専用プロパティは、ページナビゲーション中に前のクライアントを置き換える{{domxref("Client", "クライアント")}}の {{domxref("Client.id", "id")}} です。

+ +

例えば、ページ A からページ B に移動する場合、resultingClientId はページ B に関連するクライアントの id です。

+ +

フェッチリクエストがサブリソースのリクエストであるか、リクエストの宛先（destination）が report である場合、resultingClientId は空の文字列になります。

+ +

構文

+ +
var myResultingClientId = fetchEvent.resultingClientId;
+ +

値

+ +

{{domxref("DOMString")}}。

+ +

例

+ +
self.addEventListener('fetch', function(event) {
+  console.log(event.resultingClientId);
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Service Workers', '#dom-fetchevent-resultingclientid', 'resultingClientId')}}{{Spec2('Service Workers')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.FetchEvent.resultingClientId")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf