Question

在不使用服务工作者的web pure vanilla 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 Workers中常见的模式。它在该上下文中工作的原因是初始请求来自<script>标记而不是fetch的方向调用。由于<script>标记，浏览器会自动执行返回的内容。

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

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

1 个答案: