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/index.html | 112 +++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/ja/web/api/fetchevent/index.html (limited to 'files/ja/web/api/fetchevent/index.html') 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")}}

+
+ +

関連情報

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