How does the ProcessingJS link work without an internet connection?-CodePudding

This isn't a problem, just asking out of curiosity:

How do HTML/JS projects which include the ProcessingJS library work even when offline, given that the library link is the standard https kind and not a link to a file on the disk?

I tested this by turning WiFi off, then opening the project file in Safari (which worked), and trying to load a different webpage (which didn't, as expected). I know that the library is also available as downloadable file, but this project isn't using that, only the link:

<!DOCTYPE html>

<html>
 <head>
    <title>Example Program</title>
    <style>
        body {
            background-color: purple;
        }
        #canvasDiv {
            margin-left: 20%;
            margin-right: 20%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="canvasDiv">
        <canvas id="_canvas"></canvas>
    </div>
</body>
 
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
 
<script>
    var canvasWidth = 200;
    var canvasHeight = 200;
    
    var drawSmiley = function(p, x, y, d) {
        p.background(255);
        p.strokeWeight(3);
        p.stroke(0);
        p.fill(250, 200, 0);
        p.ellipse(x, y, d, d);
        p.strokeWeight(8);
        p.point(x - 0.2*d, y - 0.1*d);
        p.point(x   0.2*d, y - 0.1*d);
        p.strokeWeight(5);
        p.arc(x, y   0.05*d, 0.6*d, 0.4*d, 0.5, 2.64);
        p.textSize(24);
        p.fill(0, 200, 0);
        p.noStroke();
        p.textAlign(p.CENTER, p.CENTER);
        p.text("Hello", 100, 20);
        p.text("World", 100, 180);
    };
    
    var applyProcessing = function(p) {
        p.setup = function() {
            p.size(canvasWidth, canvasHeight);
            drawSmiley(p, 100, 100, 100);
        };
    };
    
    var canvas = document.getElementById("_canvas");
    var pInstance = new Processing(canvas, applyProcessing);
    
 </script>

</html>

Does running the script for the first time automatically download and store a copy of the library somewhere, or is ProcessingJS functionality built into the browser too, like regular JavaScript?

CodePudding user response：

Look at the requests that your browser makes, and you can see that the script response gets cached. The red line below is when I disconnected the internet and loaded the page again.

jsdelivr sets the following header on scripts it serves:

cache-control: public, max-age=31536000, s-maxage=31536000, immutable

And:

The max-age=N response directive indicates that the response remains fresh until N seconds after the response is generated.)

Indicates that caches can store this response and reuse it for subsequent requests while it's fresh.

So the script is permitted to stay in storage and not be re-fetched for 31536000 seconds. See here for a description of "freshness".

jsdelivr does this for all of its scripts, not just Processing.js. jsdelivr could well have set different headers and told browsers that it should re-download the script every time - but that would both require more of their server resources and would have broken your example page while no internet connection is available.