Service Worker 可以获取并缓存跨源资产吗？

我正在使用一些服务人员代码Google 的渐进式 Web 应用程序教程 https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/但我收到错误：

Uncaught (in promise) TypeError:
 Failed to execute 'clone' on 'Response':
 Response body is already used
  

该网站使用第三方 Javascript 和网页字体样式表。 我想将这些 CDN 上托管的资产添加到离线缓存中。

addEventListener("fetch", function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
        return response || fetch(e.request).then(function(response) {
        var hosts = [
          "https://fonts.googleapis.com",
          "https://maxcdn.bootstrapcdn.com",
          "https://cdnjs.cloudflare.com"
        ];
        hosts.map(function(host) {
          if (e.request.url.indexOf(host) === 0) {
            caches.open(CACHE_NAME).then(function(cache) {
              cache.put(e.request, response.clone());
            });
          }
        });
        return response;
      });
    })
  );
});

这些托管在流行的 CDN 上，所以我的预感是他们应该为 CORS 标头做正确的事情。

以下是我想要缓存的 HTML 中的资源：

<link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic">
<link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Lato:900,300" rel="stylesheet">
<link rel="stylesheet" type="text/css"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

根据控制台日志，Service Worker 是trying获取这些资产：

Fetch finished loading:
 GET "https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css".
 sw.js:32
Fetch finished loading:
 GET "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML".
 sw.js:32
Fetch finished loading:
 GET "https://fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic".
 sw.js:32
Fetch finished loading:
 GET "https://fonts.googleapis.com/css?family=Lato:900,300".
 sw.js:32
Fetch finished loading:
 GET "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/config/TeX-AMS-MML_HTMLorMML.js?V=2.7.1".
 sw.js:32
Fetch finished loading:
 GET "https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?v=4.7.0".
 sw.js:32
  

如果我删除clone，正如建议的那样为什么必须在 Service Worker 中克隆 fetch 请求？ https://stackoverflow.com/q/45618984/73449，我会得到同样的错误：

TypeError: Response body is already used
  

如果我添加{ mode: "no-cors" }到每获取Service Worker CORS 问题 https://stackoverflow.com/q/44808368/73449，我会收到相同的错误和这些警告：

The FetchEvent for
 "https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?v=4.7.0"
 resulted in a network error response: an "opaque" response was
 used for a request whose type is not no-cors
The FetchEvent for
 "https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2"
 resulted in a network error response: an "opaque" response was
 used for a request whose type is not no-cors
The FetchEvent for
 "https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2"
 resulted in a network error response: an "opaque" response was
 used for a request whose type is not no-cors
The FetchEvent for
 "https://fonts.gstatic.com/s/merriweather/v19/u-4n0qyriQwlOrhSvowK_l521wRZWMf6hPvhPQ.woff2"
 resulted in a network error response: an "opaque" response was
 used for a request whose type is not no-cors
  

我可以将这些资产添加到服务工作人员的静态缓存中install事件，但我有理由仅在fetch event.

你在正确的轨道上使用clone() https://developer.mozilla.org/en-US/docs/Web/API/Response/clone，但时机很重要。您需要确保您致电clone()决赛前return response执行，因为此时响应将被传递到 Service Worker 的客户端页面，并且其主体将被“消耗”。

有两种方法可以解决此问题：要么调用clone()在执行异步缓存代码之前，或者延迟您的return response语句直到缓存完成之后。

我建议使用第一种方法，因为这意味着您最终将尽快收到页面的响应。我还建议您重写代码以使用async/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function，因为它更具可读性（并且受到当今支持服务工作者的任何浏览器的支持）。

addEventListener("fetch", function(e) {
  e.respondWith((async function() {
    const cachedResponse = await caches.match(e.request);
    if (cachedResponse) {
      return cachedResponse;
    }

    const networkResponse = await fetch(e.request);

    const hosts = [
      'https://fonts.googleapis.com',
      'https://maxcdn.bootstrapcdn.com',
      'https://cdnjs.cloudflare.com',
    ];

    if (hosts.some((host) => e.request.url.startsWith(host))) {
      // This clone() happens before `return networkResponse` 
      const clonedResponse = networkResponse.clone();

      e.waitUntil((async function() {
        const cache = await caches.open(CACHE_NAME);
        // This will be called after `return networkResponse`
        // so make sure you already have the clone!
        await cache.put(e.request, clonedResponse);
      })());
    }

    return networkResponse;
  })());
});

注：(async function() {})()语法可能看起来有点奇怪，但它是一个使用的快捷方式async/await在一个立即执行的函数中，该函数将返回一个承诺。看http://2ality.com/2016/10/async-function-tips.html#immediately-invoked-async-function-expressions http://2ality.com/2016/10/async-function-tips.html#immediately-invoked-async-function-expressions

对于原始代码，您需要在执行异步缓存更新之前克隆响应：

        var clonedResponse = response.clone();
        caches.open(CACHE_NAME).then(function(cache) {
          cache.put(e.request, clonedResponse);
        });

The Google 的 Service Worker 入门书 https://developers.google.com/web/fundamentals/primers/service-workers/有示例代码显示正确的方法。该代码有一个带有“重要”注释的注释，但它只是强调克隆，而不是克隆时遇到的问题：

        // IMPORTANT: Clone the response. A response is a stream
        // and because we want the browser to consume the response
        // as well as the cache consuming the response, we need
        // to clone it so we have two streams.
        var responseToCache = response.clone();

        caches.open(CACHE_NAME)
          .then(function(cache) {
            cache.put(event.request, responseToCache);
          });

        return response;