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

在不使用服务工作人员的Web纯香草JavaScript应用程序中，我想显式缓存位于AWS S3文件服务器上的JavaScript文件。下面的脚本会坐在index.html文件的应用程序（我已经修改了URL，因为它是一个客户端项目）：缓存api中检索的JavaScript文件未执行

<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浏览器中看到源文件内容开发者工具。

为什么这不起作用？我在这方面的想法出了什么问题。

非常感谢，弗雷德

来源

2017-10-15 Fred

你在控制台日志中得到什么？ – Hunter

你确定这不能使用htaccess，http头等声明吗？此外，这些javascript命令是否与所有当前浏览器兼容？另外，可能有一个js库来处理这个问题。 –

感谢您的评论Eyal。 Fetch具有相当不错的浏览器支持（全球目前为79％：http：//www.caniuse.com/#search=fetch）。这是一个技术要求，我使用了Vanilla JavaScript，并且是JQuery可以处理的。 – Fred

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>

来源

2017-10-16 15:17:50 abraham

感谢亚伯拉罕对你的出色和明确的解释。但是，当它第一次执行并且它尝试访问final then子句中的response.text（）时，我会收到错误消息“Can not read property'text of undefined”。第二次运行它时，它会从缓存中提取脚本，并且可以通过控制台日志查看该代码，但代码没有执行。当我简单地将

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

回答

相关问题