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

Question

这里有一个非常简单的例子来说明我的问题，使用来自 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>

当您使用 Internet 连接加载此页面时，页面显示 "Hello Gabe"。然后当我关闭互联网连接时，页面显示 "Hello Dean" 并出现错误 -- JQuery 不可用。

我的理解是CDNs在头响应中有很长的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

但这似乎并没有发生。有人可以解释这是怎么回事吗？另外——我怎样才能让浏览器在某个地方的缓存中使用 JQuery 的副本？

提出这个问题是因为我们希望使用 CDN 为外部库提供服务，但也希望能够离线开发页面——就像在飞机上一样。

我在使用 Chrome 和 Firefox 时得到了类似的行为。

Answer 1

CDN 没有什么好处理的。当浏览器遇到脚本标签时，它会向服务器请求它，无论它是托管在 CDN 上还是在您的服务器上。如果浏览器之前加载过它，在同一个地址上，服务器会告诉它是否应该重新加载（发送 304 HTTP status code）。

您可能正在寻找的是缓存您的应用程序以供离线使用。 HTML5 cache manifest file 是可能的。您需要创建一个文件，列出所有需要缓存的文件以供显式离线使用

Answer 2

由于之前的回答建议使用缓存清单文件，我只是想让人们知道该功能正在从 Web 标准中删除。

Mozilla 提供的信息：

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

建议使用 Service worker 而不是缓存清单。

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

Why isn't the browser loading cdn file from cache?

html

caching

cdn

browser-cache

offline-caching