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
|
---
title: FetchEvent
slug: Web/API/FetchEvent
translation_of: Web/API/FetchEvent
---
<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
<p>使用<code>ServiceWorker</code>技术时,页面的提取动作会在ServiceWorker作用域(<code>ServiceWorkerGlobalScope</code>)中触发fetch事件.</p>
<p>使用 {{domxref("ServiceWorkerGlobalScope.onfetch")}}或addEventListener监听.<br>
该事件回调会注入<code>FetchEvent</code>参数.它携带了有关请求和结果响应的信息以及方法{{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} ,允许我们向受控页面提供任意响应.</p>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("FetchEvent.FetchEvent()")}}</dt>
<dd>Creates a new <code>FetchEvent</code> object.</dd>
</dl>
<h2 id="属性">属性</h2>
<p><em>Inherits properties from its ancestor, {{domxref("Event")}}</em>.</p>
<dl>
<dt>{{domxref("FetchEvent.isReload")}} {{readonlyInline}}</dt>
<dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the event was dispatched with the user's intention for the page to reload, and <code>false</code> otherwise. Typically, pressing the refresh button in a browser is a reload, while clicking a link and pressing the back button is not.</dd>
<dt>{{domxref("FetchEvent.request")}} {{readonlyInline}}</dt>
<dd>Returns the {{domxref("Request")}} that triggered the event handler.</dd>
<dt>{{domxref("FetchEvent.clientId")}} {{readonlyInline}}</dt>
<dd>Returns the id of the client that the current service worker is controlling.</dd>
</dl>
<h3 id="Deprecated_properties">Deprecated properties</h3>
<dl>
<dt>{{domxref("FetchEvent.client")}} {{readonlyInline}}</dt>
<dd>Returns the {{domxref("Client")}} that the current service worker is controlling.</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>Inherits methods from its parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
<dl>
<dt>{{domxref("FetchEvent.respondWith()")}}</dt>
<dd>Resolves by returning a {{domxref("Response")}} or a <a href="http://fetch.spec.whatwg.org/#concept-network-error">network error</a> to <code style="font-style: normal;"><a href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a></code>.</dd>
<dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
<dd>
<p>Extends the lifetime of the event. It is intended to be called in the {{event("install")}} {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the {{event("active")}} {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker.</p>
</dd>
</dl>
<h2 id="示例">示例</h2>
<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker fetch sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/prefetch/">run the fetch sample live</a>). In an earlier part of the code, an {{domxref("InstallEvent")}} controls caching of a number of resources. The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler then listens for the {{event("fetch")}} event. When fired, {{domxref("FetchEvent.respondWith()")}} returns a promise back to the controlled page. This promise resolves to the first matching URL request in the {{domxref("Cache")}} object. If no match is found (i.e. that resource wasn't cached in the install phase), the code fetches a response from the network.</p>
<p>The code also handles exceptions thrown from the {{domxref("ServiceWorkerGlobalScope.fetch()")}} operation. Note that a HTTP error response (e.g., 404) doesn't trigger an exception. It returns a normal response object that has the appropriate error code set.</p>
<pre class="brush: js">self.addEventListener('fetch', function(event) {
console.log('Handling fetch event for', event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
console.log('Found response in cache:', response);
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function(response) {
console.log('Response from network is:', response);
return response;
}).catch(function(error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
});</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(40.0)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}[<sup>1]</sup></td>
<td>{{CompatNo}}</td>
<td>24</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("44.0") }}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(44.0)}}</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="请参见">请参见</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>
|
