Cache refresh PHP / HTML

Door boris delaschickas op 16-09-2021 13:06 gewijzigd op 16-09-2021 13:09

1.796 views

Beste Mensen,

Ik loop als newbie tegen een cache probleem aan waar ik met behulp van google niet uit kom.

Met de webpagina wil ik dynamisch kunnen monitoren welke filmpjes geupload worden.

Ik heb een werkend simpel php script dat een directory scanned op mp4's en daar een grid gallery van maakt.

Echter, als ik exta mp4's upload of mp4's delete, kan ik eindeloos op (ctrl) refresh blijven drukken, de gallery blijft hangen op het oude aantal mp4's. Ik kan ze zelfs afspelen als ze online al gedelete zijn.

huh? klinkt als een cache dingetje...

met wat googlen, plukken en testen heb ik een test php script dat werkt. Op refresh wordt het correcte aantal mp4's getoond:

<?php
	header('Cache-Control: no-cache');
	header('Pragma: no-cache');

	foreach ( glob("gallery/*.mp4") as $file ) {	
		$file_info = pathinfo( getcwd().'/'.$file );
		echo $file_info['dirname'], "<br>";
		echo $file_info['basename'], "<br>";
		echo $file_info['extension'], "<br>";
		echo $file_info['filename'], "<br>"; 
		echo '<hr>';
	}
?>

Dit werkt echter niet als ik die php gebruik met html om de gallery te genereren:

index.php:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />

		<title>Video Gallery</title>
		<link rel="stylesheet" type="text/css" href="theme.css">
		<script src="gallery.js"></script>
	</head>
	<body>
		<div id="vid-gallery">

		<?php
			header('Cache-Control: no-cache, no-store, must-revalidate');
			header('Pragma: no-cache');
			header('Expires: 0');

			foreach ( glob("gallery/*.mp4") as $file ) {	
				printf("<video src='gallery/%s'></video>", rawurlencode(basename($file)));
			}
		?> 

		</div>
	</body>
</html>

Zowel de html meta tags voor cache control en de php header cache controls bieden geen soelaas. Ik heb vele combi's en parameters geprobeerd, maar het blijft hangen op het oude aantal fimpjes.

Mijn vraag concreet: Wat kan ik doen om met html het correcte aantal filmpjes te krijgen na een refresh?

Groet, Boris

Niet echt ter zake, maar volledigheidshalve :)
gallery.js:

window.addEventListener("DOMContentLoaded", function(){
  for (let vid of document.querySelectorAll("#vid-gallery video")) {
    // (A) CLICK ON THUMBNAIL TO GO FULLSCREEN
    vid.addEventListener("click", function(){
      if (!this.fullscreenElement) {
        this.controls = true;
        this.requestFullscreen();
      }
    });
    // (B) EXIT FULLSCREEN MODE
    vid.addEventListener("fullscreenchange", function(){
      if (document.fullscreenElement == null) {
        this.controls = false;
        this.pause();
      }
    });
  }
});

theme.css

/* (A) GALLERY - BIG SCREEN */
#vid-gallery {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 10px;
}
#vid-gallery video {
  width: 100%;
  cursor: pointer;
}
/* (B) GALLERY - SMALL SCREEN */
@media screen and (max-width: 1000px) {
  #vid-gallery { grid-template-columns: repeat(2, auto); }
}
@media screen and (max-width: 600px) {
  #vid-gallery { grid-template-columns: auto; }
}