1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
---
title: FetchEvent
slug: Web/API/FetchEvent
tags:
- API
- FetchEvent
- Interfaz
- Offline
- Referencia
- Service Workers
- Workers
translation_of: Web/API/FetchEvent
---
<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
<p>Este es el tipo de evento para eventos "<code>fetch</code>" despachados en el {{domxref("ServiceWorkerGlobalScope", "scope global del service worker", "", 1)}}. Contiene información sobre la búsqueda (fetch), incluyendo la petición (request) y cómo el receptor tratará la respuesta (response).</p>
<p>Provee el método {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("FetchEvent.FetchEvent()", "new FetchEvent()")}}</dt>
<dd>Crea un nuevo objecto <code>FetchEvent</code>. Este constructor no se usa normalmente. El propio navegador crea estos objetos y los proporciona a los callbacks de eventos "<code>fetch</code>".</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<p><em>Hereda propiedades del ancestro, {{domxref("Event")}}</em>.</p>
<dl>
<dt>{{domxref("fetchEvent.clientId")}} {{readonlyInline}}</dt>
<dd>El {{domxref("Client.id", "id")}} del mismo origen {{domxref("Client", "client")}} que inició el "fetch".</dd>
<dt>{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}</dt>
<dd>Un {{jsxref("Promise")}} para un {{domxref("Response")}}, o vacío si este no es una navegación, o {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} no esta habilitado.</dd>
<dt>{{domxref("fetchEvent.request")}} {{readonlyInline}}</dt>
<dd>La {{domxref("Request")}} que el navegador intenta crear.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<p><em>Herada métodos del padre, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
<dl>
<dt>{{domxref("fetchEvent.respondWith()")}}</dt>
<dd>Evita el manejo de búsqueda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.</dd>
<dt>{{domxref("extendableEvent.waitUntil()")}}</dt>
<dd>
<p>Extiende el tiempo de vida del evento. Se usa para notificar al navegador las tareas que van más allá de la devolución de una respuesta, como la transmisión y el almacenamiento en caché.</p>
</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Este evento fetch, permite al navegador hacer esta acción por defecto para peticiones non-GET. Para peticiones GET esto intenta retornar una coincidencia en el cache, y vuelve de nuevo a la red. Si busca una concidencia en el cache, actualiza asincronicamente el cache para la próxima vez.</p>
<pre class="brush: js notranslate">addEventListener('fetch', event => {
// Permite al navegador hacer este asunto por defecto
// para peticiones non-GET.
if (event.request.method != 'GET') return;
// Evita el valor predeterminado, y manejar solicitud nosostros mismos.
event.respondWith(async function() {
// Intenta obtener la respuesta de el cache.
const cache = await caches.open('dynamic-v1');
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
// Si encontramos una coincidencia en el cache, lo devuelve, pero también
// actualizar la entrada en el cache en segundo plano.
event.waitUntil(cache.add(event.request));
return cachedResponse;
}
// Si no encontramos una coincidencia en el cache, usa la red.
return fetch(event.request);
}());
});</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte Básico</td>
<td>{{CompatChrome(40)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}[<sup>1]</sup></td>
<td>{{CompatNo}}</td>
<td>24</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>Propiedad preloadResponse</code> </td>
<td>{{CompatChrome(59)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatOpera(46)}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte Básico</td>
<td>{{CompatChrome(40)}}</td>
<td>{{CompatChrome(40)}}</td>
<td>{{ CompatGeckoMobile("44.0") }}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>Propiedad preloadResponse</code> </td>
<td>{{CompatChrome(59)}}</td>
<td>{{CompatChrome(59)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatOperaMobile(46)}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>
|
