为什么浏览器不从缓存中加载cdn文件?

gab*_*abe 7 html5 caching cdn browser-cache offline-caching

这是一个非常简单的例子来说明我使用CDN中的JQuery修改页面的问题:

<html>
  <body>
    <p>Hello Dean!</p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>$("p").html("Hello, Gabe!")</script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

当您使用互联网连接加载此页面时,页面将显示"Hello Gabe".当我关闭互联网连接时,页面显示"Hello Dean"并显示错误 - JQuery不可用.

我的理解是CDN的有很长Cache-Control并且Expire在头响应,这是我理解的意思是,浏览器本地缓存文件.

$ curl -s -D - https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js | head

HTTP/1.1 200 OK
Server: cloudflare-nginx
Date: Fri, 17 Apr 2015 16:30:33 GMT
Content-Type: application/javascript
Transfer-Encoding: chunked
Connection: keep-alive
Last-Modified: Thu, 18 Dec 2014 17:00:38 GMT
Expires: Wed, 06 Apr 2016 16:30:33 GMT
Cache-Control: public, max-age=30672000
Run Code Online (Sandbox Code Playgroud)

但这似乎并没有发生.有人可以解释一下发生了什么吗?另外 - 我怎样才能让浏览器在某个地方的缓存中使用JQuery的副本?

出现这个问题是因为我们希望使用CDN来服务外部库,但也希望能够离线开发页面 - 就像在飞机上一样.

我使用Chrome和Firefox获得了类似的行为.

小智 4

没有什么可以处理 CDN 的。当浏览器遇到脚本标记时,它会向服务器请求它,无论它托管在 CDN 还是您的服务器上。如果浏览器之前在同一地址上加载过它,服务器会告知是否应该重新加载(发送304 HTTP 状态代码)。

您可能正在寻找的是缓存您的应用程序以供离线使用。HTML5 缓存清单文件可以实现这一点。您需要创建一个文件,列出需要缓存以供显式离线使用的所有文件