Understanding caching?

Question

Yesterday, we had no power at home, thus no Internet. So I assumed that I wouldn't be able to have my web-app work locally, since at the end of "index.html" I have:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
        window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>

However, that wasn't the case, it would work smoothly. So I guessed that the browser remembered the last time it downloaded these js files.

When I reloaded my wep-app though, it would fail to load the js files, since there was no Internet connection. This behavior would happen again and again.

In both cases it would fail to download:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700">

but that's not a critical error. Notice that the css of twitter-bootstrap was locally in my project file, that's why it's irrelevant.

I am trying to understand why, any thoughts?

I am using chrome Version 52.0.2743.116 (64-bit) in a MacBook Pro El Capitan.

---

Mine: The browser used the cached versions of the js files, but even on Normal Reload it would try to re-download them..

Answer 1

Some external files do not have a far-future expiration date set in the HTTP header.

You'll notice, when I load a page with the google font, here is the response header:

Google Font API

Access-Control-Allow-Origin: *
Cache-Control: private, max-age=86400
Content-Encoding: gzip
Content-Type: text/css; charset=utf-8
Date: Sat, 10 Sep 2016 04:55:29 GMT
Expires: Sat, 10 Sep 2016 04:55:29 GMT
Link: <http://fonts.gstatic.com>; rel=preconnect; crossorigin
Server: ESF
Timing-Allow-Origin: *
Transfer-Encoding: chunked
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

You'll notice here that Google served up this font with an instant-expiration. (I accessed the file on Sat, 10 Sep 2016 04:55:29 GMT and it expires at that same time) This is probably why it never loaded in the first place.

Other then that - I'm honestly not sure why the JS files became unavailable for you after page reload. The rest of the files have far-future expiration headers, and I tested it myself using Firefox Version 48.0.1 with no issues. I first loaded the page with your scripts, then chose to "Work Offline". The browser continued to serve cached versions of these files no matter how many times I pressed refresh or F5. Perhaps its a setting with your browser, but I can't be too sure. Maybe someone else has more info on this.