From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/fetchevent/index.html | 110 ++++++++++++++++++++ files/ko/web/api/fetchevent/respondwith/index.html | 115 +++++++++++++++++++++ 2 files changed, 225 insertions(+) create mode 100644 files/ko/web/api/fetchevent/index.html create mode 100644 files/ko/web/api/fetchevent/respondwith/index.html (limited to 'files/ko/web/api/fetchevent') diff --git a/files/ko/web/api/fetchevent/index.html b/files/ko/web/api/fetchevent/index.html new file mode 100644 index 0000000000..9b0e1cce34 --- /dev/null +++ b/files/ko/web/api/fetchevent/index.html @@ -0,0 +1,110 @@ +--- +title: FetchEvent +slug: Web/API/FetchEvent +tags: + - API + - FetchEvent + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - TopicStub + - Workers +translation_of: Web/API/FetchEvent +--- +

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

+ +

This is the event type for fetch events dispatched on the {{domxref("ServiceWorkerGlobalScope", "service worker global scope", "", 1)}}. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the {{domxref("FetchEvent.respondWith", "event.respondWith()")}} method, which allows us to provide a response to this fetch.

+ +

Constructor

+ +
+
{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}
+
Creates a new FetchEvent object. This constructor is not typically used. The browser creates these objects itself and provides them to fetch event callbacks.
+
+ +

Properties

+ +

Inherits properties from its ancestor, {{domxref("Event")}}.

+ +
+
{{domxref("fetchEvent.clientId")}} {{readonlyInline}}
+
The {{domxref("Client.id", "id")}} of the same-origin {{domxref("Client", "client")}} that initiated the fetch.
+
{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}
+
A {{jsxref("Promise")}} for a {{domxref("Response")}}, or void if this is not a navigation, or {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} is not enabled.
+
{{domxref("fetchEvent.request")}} {{readonlyInline}}
+
The {{domxref("Request")}} the browser intends to make.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("fetchEvent.respondWith()")}}
+
Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.
+
{{domxref("extendableEvent.waitUntil()")}}
+
+

Extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching.

+
+
+ +

Examples

+ +

This fetch event uses the browser default for non-GET requests. For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.

+ +
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);
+  }());
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/ko/web/api/fetchevent/respondwith/index.html b/files/ko/web/api/fetchevent/respondwith/index.html new file mode 100644 index 0000000000..1e348c699c --- /dev/null +++ b/files/ko/web/api/fetchevent/respondwith/index.html @@ -0,0 +1,115 @@ +--- +title: FetchEvent.respondWith() +slug: Web/API/FetchEvent/respondWith +translation_of: Web/API/FetchEvent/respondWith +--- +

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

+ +

{{domxref("FetchEvent")}}의 respondWith() 메소드는 브라우저의 기본 fetch 핸들링을 막고, 당신 스스로 {{domxref("Response")}}에 대한 promise를 제공할 수 있게 허락합니다.

+ +

대부분의 상황에서 당신은 수신자가 이해하는 어떠한 응답이라도 제공할 수 있습니다. 예를 들어, {{HTMLElement('img')}} 엘리먼트가 해당 요청을 시작했다면, 응답 객체는 이미지 데이터를 필요로 합니다. 보안적인 이유들로, 여기엔 몇가지 전역 규칙이 존재합니다.

+ + + +

Specifying the final URL of a resource

+ +

From Firefox 59 onwards, when a service worker provides a {{domxref("Response")}} to {{domxref("FetchEvent.respondWith()")}}, the {{domxref("Response.url")}} value will be propagated to the intercepted network request as the final resolved URL.  If the {{domxref("Response.url")}} value is the empty string, then the {{domxref("Request.url","FetchEvent.request.url")}} is used as the final URL.

+ +

In the past the {{domxref("Request.url","FetchEvent.request.url")}} was used as the final URL in all cases.  The provided {{domxref("Response.url")}} was effectively ignored.

+ +

This means, for example, if a service worker intercepts a stylesheet or worker script, then the provided {{domxref("Response.url")}} will be used to resolve any relative {{cssxref("@import")}} or {{domxref("WorkerGlobalScope.importScripts()","importScripts()")}} subresource loads ({{bug(1222008)}}).

+ +

For most types of network request this change has no impact because you can't observe the final URL.  There are a few, though, where it does matter:

+ + + +

Note that navigation requests for {{domxref("Window","Windows")}} and {{domxref("HTMLIFrameElement","iframes")}} do NOT use the final URL.  The way the HTML specification handles redirects for navigations ends up using the request URL for the resulting {{domxref("Window.location")}}.  This means sites can still provide an "alternate" view of a web page when offline without changing the user-visible URL.

+ +

Syntax

+ +
fetchEvent.respondWith(
+  // Promise that resolves to a Response.
+​)
+ +

Parameters

+ +

A {{jsxref("Promise")}} for a {{domxref("Response")}}.

+ +

Return value

+ +

Void.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionNotes
NetworkErrorA network error is triggered on certain combinations of {{domxref("Request.mode","FetchEvent.request.mode")}} and {{domxref("Response.type")}}  values, as hinted at in the "global rules" listed above.
+ +

Examples

+ +

This fetch event tries to return a response from the cache API, falling back to the network otherwise.

+ +
addEventListener('fetch', event => {
+  // Prevent the default, and handle the request ourselves.
+  event.respondWith(async function() {
+    // Try to get the response from a cache.
+    const cachedResponse = await caches.match(event.request);
+    // Return it if we found one.
+    if (cachedResponse) return cachedResponse;
+    // If we didn't find a match in the cache, use the network.
+    return fetch(event.request);
+  }());
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#fetch-event-respondwith-method', 'respondWith()')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

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