从缓存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(_);
    });
  });

注意：为什么使用 JavaScript eval 函数是一个坏主意？

您拥有的代码示例是 Service Workers 中常见的模式。它在该上下文中工作的原因是初始请求来自<script>标签而不是 的直接调用fetch。由于<script>标签的存在，浏览器会自动处理返回的内容。

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