缓存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/[email protected]/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?

你的代码示例是为服务工作中常见的模式。它在这种情况下工作的原因是最初的请求是从<script>标记而不是方向调用fetch。由于<script>标签，浏览器会自动执行返回的内容。

<script src="https://unpkg.com/[email protected]/underscore-min.js"></script>