Détecter l'état du cache

Version imprimable

28/09/2012, 13h53
devyan

Détecter l'état du cache

Bonjour,

J'aimerai savoir si il est possible en Javascript de savoir si le cache navigateur est activé ou non.

Mon but est de pouvoir alerter l'utilisateur si les images de mon serveur de ressources statiques ne sont pas mises en cache.

Merci d'avance,

devyan
28/09/2012, 21h54
sekaijin

c'est un choix de l'utilisateur qui n'appartien qu'a lui
A+JYT

Salut,

J'ai cherché un peu et j'ai pas trouvé de solution simple. Voici une proposition:

Coté serveur un petit script qui renvoie toujours quelque chose de différent et qui demande la mise en cache coté client.

Code:

1
2
3
4
5
6
7
8
9
10
 
<?php
        $response = uniqid();
        header('Content-Type: text/plain');
        header('Content-Length: '.strlen($response));
        header('Cache-Control: max-age=2592000, public');
        header("Last-Modified: " . gmdate("D, d M Y H:i:s", time()) . " GMT");
        header("Pragma: public");
        echo $response;
?>

Coté client l'idée est de faire deux requêtes ajax consécutives sur cette page
php. Si le cache est activé alors tu dois obtenir deux fois la même réponse. Si il ne l'est pas, tu reçoit deux réponse différentes.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type='text/javascript'>
 
$(function() {
 
	function getVersion(callback) {
		$.ajax({
			type: "GET",
			url: "cachetest.php",
			success: function(output, status, xhr) {
				callback(output);
			},
			error: function(output) {
				alert('error');
			}
		});
	}
 
	function checkCache(callback) {
		getVersion(function(v1) {
			getVersion(function(v2) {
				callback(v1!=v2);
			});
		});
	}
 
	checkCache(function(disabled) {
 		if(disabled) $('#message').text("Cache désactivé");
		else $('#message').text("Cache activé");
	});
 
});
 
</script>

Je m'excuse de fournir une réponse basée sur JQuery, si besoin je traduirai.

29/09/2012, 11h26
sekaijin

je ne pense pas que cela fonctionne en tout cas pas toujours.

la gestion du cache sur un navigateur est soumise à la gestion des codes retours du serveur

lorsque le client à un document en cache et qu'il veut y accéder de nouveau il envois un GET /chemin/du/document
au serveur
si celui-ci lui répond avec un code de retour "NO Change"
alors il prends la version en cache
si le serveur répond "OK" alors il attends le contenu du serveur

donc si ta page php renvois toujours un contenu différent elle renvoie toujours OK et donc le client n'utilise jamais son cache
du coup ton JS reçois toujours des réponses différentes

les parmas d'expiration sont présent pour indiquer au navigateur que quoi qu'il arrive au dela du délai indiquer il doit attendre la réponse du serveur.

A+JYT
29/09/2012, 11h32
SpaceFrog

une autre solution serait de tester le temps de chargement d'une image deux fois de suite (avec complete) si le temps du complete du seconde chargement est beaucoup plus court cela pourrait vouloir dire que l'image a été chargée depuis le cache.
29/09/2012, 12h46
marcha

Citation:

Envoyé par sekaijin

lorsque le client a un document en cache et qu'il veut y accéder de nouveau il envois un GET /chemin/du/document
au serveur

Ici tu parles du cas particulier d'une requête IF-MODIFIED-SINCE avec une réponse du serveur qui peut soit contenir le fichier frais soit une réponse NOT MODIFIED.

Le but des headers renvoyés par par le script php est de demander au
navigateur de garder ça en cache sans faire de requête IF-MODIFIED-SINCE

Mais il serait judicieux d'implémenter la gestion de ce type de requêtes dans le script php de mon exemple.

Citation:

Envoyé par sekaijin

les parmas d'expiration sont présent pour indiquer au navigateur que quoi qu'il arrive au dela du délai indiquer il doit attendre la réponse du serveur.
A+JYT

Oui, cela ne doit pas poser problème étant donné qu'il y a deux requêtes
successives sur la même ressource. Lors du "renouvellement", la première requête sera servie par le serveur et la seconde proviendra du cache si celui-ci est activé.

Bonjour à tous,

J'ai aussi fait des recherches et quelques essais de mon côté...

Citation:

Envoyé par sekaijin

c'est un choix de l'utilisateur qui n'appartien qu'a lui

Bien evidemment et je ce que je cherche est simplement de savoir quel en est le réglage qu'à bien pu faire l'utilisateur ;)

Citation:

Envoyé par SpaceFrog

une autre solution serait de tester le temps de chargement d'une image deux fois de suite (avec complete) si le temps du complete du seconde chargement est beaucoup plus court cela pourrait vouloir dire que l'image a été chargée depuis le cache.

J'ai aussi pensé à une solution dans ce genre mais les tests que j'ai effectué n'ont absolument pas été concluents.

J'ai également testé une solution semblable à ce que propose marcha à la différence que je teste simplement le responseHeader "Date".

Je fais un premier appel Ajax à une petite image (pixel.gif par exemple) en forçant le chargement de l'image (en ajoutant un paramètre TIMESTAMP)
Ensuite je mémorise la valeur du header "Date" du XmlHttpRequest.
J'attends un peu plus d'une seconde et refait un appel à la même image (avec le même paramètre et la même valeur de TIMESTAMP).
Si pour ce second appel le Header "Date" est identique alors c'est que l'image a été chargée à partir du cache. Dans le cas contraire "Date" est plus récent d'au moins 1 seconde.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function testerCache(resource, callback) {
    // initialisation
    var ok = true,
        res,
        dt0, dt1,
        url = resource || "../image/pixel.gif"; // chemin relatif d'un fichier image
    // premier appel
    if (window.XMLHttpRequest && !document.all) {
        // Uniquement pour le cas où "url" serait sur un domaine différent (ce qui est le cas pour mon test jsFiddle)
        try {
            window.netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
        } catch (erreur) {
            ok = false;
            callback(erreur.message || erreur);
        }            
    }
    if (ok) {
        $.ajax({
            url: url,
            cache: false, // forcer le chargement du fichier        
            error: function(x, s, e) {callback(s + ' (' + (e.message || e) + ')');},
            success: function(d, s, x) {
                url = this.url; // récupération de l'url exacte du premier appel.
                dt0 = new Date(x.getResponseHeader('Date') || '1970 01 01').getTime();
                // programmer le second appel
                setTimeout(function() {
                    if (window.XMLHttpRequest && !document.all) {
                        // Uniquement pour le cas où "url" serait sur un domaine différent (ce qui est le cas pour mon test jsFiddle)
                        try {
                            window.netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
                        } catch (erreur) {
                            ok = false;
                            callback(erreur.message || erreur);
                        }            
                    }
                    if (ok) {
                        $.ajax({
                             url: url,
                             cache: true, // activer l'utilisation du cache
                             error: function(x, s, e) {callback(s + ' (' + (e.message || e) + ')');},
                             success: function(d, s, x) {
                                 dt1 = new Date(x.getResponseHeader('Date') || '1970 01 01').getTime();
                                 if ($.isFunction(callback)) {
                                     callback((dt0 == dt1) ? 'true' : 'false');
                                 }
                             }
                         });                    
                     }
                    },
                    1050);
            }
        });    
    }
}
 
testerCache("http://jsfiddle.net/img/info-close.png", function(res) { alert(res); );

Ce code est une version alpha, à tester sur les différents navigateurs dans différentes version.

J'avais l'espoir que l'on aurait pu avoir un indicateur permettant de connaître directement l'état du cache du navigateur, personnellement je n'ai rien trouvé dans ce sens.

devyan.