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

Asked 17/4, 2015 at 16:33 Answered 27/9, 2017 at 14:49

Solved html caching browser-cache cdn offline-caching

Here is a very simple example to illustrate my question using JQuery from a CDN to modify the page:

<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>

When you load this page with an internet connection, the page displays "Hello Gabe". When I then turn off the internet connection, the page displays "Hello Dean" with an error -- JQuery is not available.

My understanding is that CDNs have a long Cache-Control and Expire in the header response, which I understand to mean that the browser caches the file locally.

$ 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

But this does not appear to be happening. Can someone please explain what is going on? Also -- how can I get the browser to use the copy of JQuery in the cache somewhere?

This question came up because we want to be using CDN's to serve external libraries, but also want to be able to develop the page offline -- like on an airplane.

I get similar behavior using Chrome and Firefox.

Build answered 17/4, 2015 at 16:33 Comment(2)

I'm just starting to look into this problem as well, but have you found https://mcmap.net/q/785032/-is-there-a-way-to-use-a-cdn-for-jquery-and-have-an-offline-web-app-via-html5-manifests/2336725 ? – Bering 15/5, 2015 at 20:58

Take a look to see if the file is actually cached in your system on chrome in the address bar type "about:cache". – Bonanza 7/9, 2015 at 8:57

There's nothing to deal with CDN. When then browser encounters a script tag, it will request it to the server, whether it's hosted on a CDN or on your server. If the browser previously loaded it, on the same address, the server tells whether it should be reloaded or not (sending 304 HTTP status code).

What you are probably looking for is to cache your application for offline use. It's possible with HTML5 cache manifest file. You need to create a file listing all files needed to be cached for explicit offline use

Allier answered 5/1, 2016 at 4:40 Comment(1)

If 2 sites use the same CDN address for jquery, do they share the cached resource? Or is it site specific? Wondering how many copies of jquery I have in my cache. – Bombproof 21/12, 2016 at 16:35

Since the previous answer recommended using a cache manifest file, I just wanted to make people aware that this feature is being dropped from the web standards.

Info available from Mozilla:

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

It's recommended to use Service workers instead of the cache manifest.

Colunga answered 27/9, 2017 at 14:49 Comment(0)

Recommended topics

Hot tags