FetchEvent.respondWith()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

respondWith() 方法为 FetchEvent prevents the browser's default fetch handling, and allows you to provide a promise for a 响应 yourself.

In most cases you can provide any response that the receiver understands. For example, if an <img> initiates the request, the response body needs to be image data. For security reasons, there are a few global rules:

You can only return 响应 objects of type " opaque " if the fetchEvent.request 对象的 mode is " no-cors ". This prevents the leaking of private data.
You can only return 响应 objects of type " opaqueredirect " if the fetchEvent.request 对象的 mode is " manual ".
You cannot return 响应 objects of type " cors " if the fetchEvent.request 对象的 mode is " same-origin ".

Specifying the final URL of a resource

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

In the past the FetchEvent.request.url was used as the final URL in all cases. The provided Response.url was effectively ignored.

This means, for example, if a service worker intercepts a stylesheet or worker script, then the provided Response.url will be used to resolve any relative @import or 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:

若 fetch() is intercepted, then you can observe the final URL on the result's Response.url .
若 worker script is intercepted, then the final URL is used to set self.location and used as the base URL for relative URLs in the worker script.
If a stylesheet is intercepted, then the final URL is used as the base URL for resolving relative @import loads.

Note that navigation requests for Windows and 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 Window.location . This means sites can still provide an "alternate" view of a web page when offline without changing the user-visible URL.

句法

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

参数

A 响应 或 Promise 解析为 响应 . Otherwise, a network error is returned to Fetch.

返回值

undefined .

异常

异常	注意事项
`NetworkError`	A network error is triggered on certain combinations of `FetchEvent.request.mode` and `Response.type` values, as hinted at in the "global rules" listed above.
`InvalidStateError`	The event has not been dispatched or `respondWithWith()` has already been invoked.

范例

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

注意 : caches.match() is a convenience method. Equivalent functionality is to call cache.match() on each cache (in the order returned by caches.keys() ) until a 响应 被返回。

规范

规范	状态	注释
服务工作者 The definition of 'respondWith()' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`respondWith`	Chrome 42 注意事项 42 注意事项 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008 ). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960 .	Edge ≤79 注意事项 ≤79 注意事项 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008 ). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960 .	Firefox 59 注意事项 59 注意事项 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008 ). 44 注意事项 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.	IE 不支持 No	Opera 29	Safari 不支持 No	WebView Android 42 注意事项 42 注意事项 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008 ). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960 .	Chrome Android 42 注意事项 42 注意事项 NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008 ). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960 .	Firefox Android ?	Opera Android 29	Safari iOS 不支持 No	Samsung Internet Android 4.0
Change in behavior when specifying the final URL of a resource.	Chrome 不支持 No	Edge 不支持 No	Firefox 59	IE 不支持 No	Opera ?	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android ?	Opera Android ?	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
兼容性未知 ?
实验。期望将来行为有所改变。

另请参阅

元数据

最后修改： Jun 1, 2020

在此页

Specifying the final URL of a resource

句法

参数

返回值

异常

范例

规范

浏览器兼容性

图例

另请参阅

相关话题