0
288
Vistas¿Cómo funciona el enlace de ProcessingJS sin conexión a Internet?
Esto no es un problema, solo pregunto por curiosidad:
¿Cómo funcionan los proyectos HTML/JS que incluyen la biblioteca ProcessingJS incluso cuando están fuera de línea, dado que el enlace de la biblioteca es del tipo https estándar y no un enlace a un archivo en el disco?
Probé esto apagando WiFi, luego abriendo el archivo del proyecto en Safari (que funcionó) e intentando cargar una página web diferente (que no funcionó, como se esperaba). Sé que la biblioteca también está disponible como archivo descargable, pero este proyecto no usa eso, solo el enlace:
<!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>¿La ejecución del script por primera vez descarga y almacena automáticamente una copia de la biblioteca en algún lugar, o la funcionalidad ProcessingJS también está integrada en el navegador, como JavaScript normal?
1 Respuestas
Responde la pregunta0
Mire las solicitudes que realiza su navegador y podrá ver que la respuesta del script se almacena en caché. La línea roja a continuación es cuando desconecté Internet y cargué la página nuevamente.
jsdelivr establece el siguiente encabezado en los scripts que sirve:
control de caché: público, max-age=31536000, s-maxage=31536000, inmutable
y :
La directiva de respuesta max-age=N indica que la respuesta permanece actualizada hasta N segundos después de que se genera la respuesta).
Indica que las memorias caché pueden almacenar esta respuesta y reutilizarla para solicitudes posteriores mientras está actualizada.
Por lo tanto, se permite que el script permanezca almacenado y no se vuelva a recuperar durante 31536000 segundos. Ver aquí para una descripción de "frescura".
jsdelivr hace esto para todos sus scripts, no solo para Processing.js. jsdelivr bien podría haber establecido diferentes encabezados y decirle a los navegadores que deberían volver a descargar el script cada vez, pero eso requeriría más recursos de su servidor y habría roto su página de ejemplo mientras no haya conexión a Internet disponible.