从缓存 api 中检索的 JavaScript 文件未执行

Question

在不使用服务工作者的 Web 纯原生 JavaScript 应用程序中，我想显式缓存位于 AWS S3 文件服务器上的 JavaScript 文件。以下脚本将位于应用程序的 index.html 文件中（我已修改 URL，因为它是客户端项目）：

<script>
    caches.match('https://s3.amazonaws.com/com.myproject/myjavascript.js')
    .then(function(response) {
        if (response) {
            return response;
        } else {
            fetch('https://s3.amazonaws.com/com.myproject/myjavascript.js')
            .then(function(res) {
                return caches.open('mycache')
                .then(function(cache) {
cache.put('https://s3.amazonaws.com/com.myproject/myjavascript.js',res.clone());
                   console.log(res.clone());
                   return res;
                });
            });
       }
    });
</script>

我相信这段代码应该执行以下操作：检查 myjavascript.js 文件是否在缓存中。如果是，则返回将由浏览器执行的 JavaScript 文件。如果在缓存中没有找到 myjavascriptfile.js，则将其取出并放置在子缓存“mycache”中，最后返回到执行它的浏览器。

运行此程序后，我在缓存中找到文件的 URL，响应为“Ok”，但浏览器未执行代码，并且在 Chrome 浏览器开发人员中的源代码中看不到文件内容工具。

为什么这不起作用？我的想法有什么问题。

非常感谢， 弗雷德

Answer 1

fetch 本身不会执行 JavaScript。它只是对指定的内容发出请求，并使其可供代码访问。如果您真的想继续使用这种方法，可以获取文本并对其进行评估。

const url = 'https://unpkg.com/underscore@1.8.3/underscore-min.js';
caches.match(url)
  .then(function(response) {
    if (response) {
      return response;
    } else {
      return fetch(url)
        .then(function(res) {
          return caches.open('mycache')
            .then(function(cache) {
              cache.put(url,res.clone());
                console.log(res.clone());
                return res;
            });
        });
    }
  })
  .then(function(response) {
    console.log(response);
    response.text().then(function(text) {
      eval(text);
      console.log(_);
    });
  });

注意：Why is using the JavaScript eval function a bad idea?

您拥有的代码示例是 Service Worker 中常见的一种模式。它在这种情况下工作的原因是初始请求来自<script> 标签，而不是fetch 的方向调用。由于<script> 标记，浏览器会自动处理执行返回的内容。

<script src="https://unpkg.com/underscore@1.8.3/underscore-min.js"></script>