Fichier manifest et cache

**loubigou** · 18/02/2016, 14h31

Bonjour,
J'ai une application que je veux distribuer avec un fichier manifest

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE html>
<html lang="fr" manifest="aplal.appcache">

Sur mon serveur local 127.0.0.1, ça marche très bien.
Quand je la mets sur mon serveur d'hébergement, l'application est bien accessible en offline, mais quand je mets à jour le fichier manifest, elle ne se met pas à jour.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
   cache.addEventListener("updateready",function(evt){
     alert("updateready => status : "+cache.status);
     cache.swapCache();
    });

Pourtant updateready est bien déclenché ! Et donc swapCache() appelé ici, ie que la page détecte bien un changement de version du fichier manifest !
Je suis sur un serveur hébergé. Est-ce qu'il y a un problème de virtual Host ? Je ne maîtrise pas trop...
Quelqu'un a une idée ?

Merci à vous

**SylvainPV** · 19/02/2016, 13h51

Le fichier manifest doit être délivré par le serveur avec le bon mime type: text/cache-manifest. Peux-tu vérifier dans la requête réseau que c'est le cas ?

**loubigou** · 19/02/2016, 16h07

Oui, il est bien reconnu.
Voici la réponse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
HTTP Response Header
Name	Value	Delim
Status: HTTP/1.1 200 OK
Content-Type:	text/cache-manifest	
Last-Modified:	Thu, 18 Feb 2016 12:44:13 GMT	
Accept-Ranges:	bytes	
Date:	Fri, 19 Feb 2016 13:57:13 GMT	
Connection:	close	
X-Cacheable:	Cacheable	
X-CDN-Geo:	rbx1	
X-CDN-Geo-IP:	51.254.41.133	
Content-Length:	2432

D'ailleurs, tout marche bien. L'application est bien mise en cache.
Mais seule la mise à jour ne marche pas.
Et pourtant elle est détectée...
Dans mon fichier manifest, je déclare tous les fichiers de l'application.
Et il y a une feuille de style de jquery.ui qui fait référence à des fichiers que je n'ai pas mis. J'ai mis seulement ceux - 2 fichiers - dont j'avais besoin. Ce sont des fichiers que je n'utilise pas. Je ne sais pas si ça peut poser problème...

**SylvainPV** · 19/02/2016, 22h11

Je ne vois pas de problème dans la configuration. Peut-être est-ce juste un mauvaise compréhension de la façon dont marche applicationCache : après un swapCache(), la page courante n'est pas mise à jour. C'est uniquement le cache interne qui est mis à jour. Il faut donc rafraichir la page pour avoir la nouvelle version. Généralement on fait ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
cache.addEventListener("updateready",function(evt){     console.log("updateready => status : "+cache.status);
     cache.swapCache();
     if(confirm("Une version mise à jour de l'application est disponible, voulez-vous relancer l'application ?")){
       window.location.reload();
     }
    });

**loubigou** · 19/02/2016, 22h44

Ben non, je fais tout bien...

J'ai essayé reload, de quitter et revenir, etc...
Sinon, y-a-t-il un autre moyen pour faire des applications online/offline ?
J'ai vaguement lu des infos sur les services worker. Mais il faut du https et c'est pas supporté par tous les navigateurs....

**SylvainPV** · 19/02/2016, 23h28

Tu peux poster le contenu de ton fichier manifest, ainsi que le code complet du script chargé du swapCache ?

**danielhagnoul** · 20/02/2016, 01h00

Ce n'est pas obsolète ?

Voir : https://developer.mozilla.org/fr/doc...lication_Cache

HTML5 supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans application cache - une collection de ressources obtenues depuis un fichier manifest (*.appcache) inclue dans une application web.

Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

L'utilisation de la fonction de mise en cache d'application décrite ici est actuellement fortement déconseillée; cette fonctioannalité est en train d' être retiré de la plate-forme Web. Utiliser Service Workers à la place.

**SylvainPV** · 20/02/2016, 03h51

Oui l'appCache a été déprécié en faveur des Service Workers. Mais les Service Workers requièrent du HTTPS et ont un support navigateur bien plus faible : http://caniuse.com/#feat=serviceworkers

Si on veut des fonctionnalités offline tout de suite, l'appCache reste un choix pragmatique. Je doute qu'il disparaisse des navigateurs de sitôt, trop d'applications en dépendent.

**loubigou** · 20/02/2016, 11h15

Bon, c'est juste la grosse liste de tous les fichiers de l'application..
Il n'y a pas de ressources externes ni de fallback...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
CACHE MANIFEST
# Version 201601-MAJ:19/02/2016 - V1
###################
# dossier principal
###################
aplal.html
preview.html
favicon.ico
 
###############
# dossier css
###############
css/normalize.css
css/jquery-ui.min.css
css/jquery.ui.labeledslider.css
css/sopera.css
css/questionnary.css
css/aplal.mustache-templates.css
css/aplal.css
css/custom.css
css/images/ui-icons_454545_256x240.png
css/images/ui-icons_888888_256x240.png
 
#############
# dossier img
#############
img/arrow-down32.svg
img/arrow-left32.svg
img/arrow-right32.svg
img/arrow-up32.svg
img/book.svg
img/calculator.svg
img/calendar16.png
img/download.svg
img/file-empty.svg
img/file-text.svg
img/floppy-disk-inactive.svg
img/floppy-disk.svg
img/folder-open.svg
img/gear.svg
img/gear16.png
img/gear16b.png
img/graph.svg
img/home16.png
img/home16b.png
img/info.svg
img/info32.png
img/info48.png
img/logoush.png
img/multigear.svg
img/no16.png
img/no32.png
img/printer.svg
img/question16.png
img/question32.png
img/undo.svg
img/undolx.svg
img/undolz.svg
img/undorz.svg
img/warning32.png
img/wrench.svg
img/xbody16b.png
img/zoom-in.svg
img/zoom-out.svg
 
##############
# dossier help
##############
help/ap.css
help/ap.html
help/ap.js
help/ap_body.js
help/calcul_de_al_accession.html
help/calcul_de_apl_accession.html
help/calcul_de_apl_al_locative.html
help/charges_locatives.html
help/colocataire.html
help/definition_des_zones_geographiques.html
help/edition_de_tableaux.html
help/larrow.ico
help/le_calcul_automatique.html
help/loyer.html
help/mensualite_prise_en_compte.html
help/personne_a_charge.html
help/personne_seule_avec_personne_a_charge.html
help/print16.gif
help/printpreview16.gif
help/rarrow.ico
help/remboursement_dette_sociale.html
 
#############
# dossier js
#############
js/aplal.data.min.js
js/aplal.editions.min.js
js/aplal.go.min.js
js/aplal.json.min.js
js/aplal.min.js
#js/aplal.mustache-templates.html
js/Blob.min.js
js/d3.min.js
js/d3.tip.min.js
js/FileSaver.min.js
js/ICanHaz-no-mustache.min.js
js/jquery-ui-1.11.2.custom.min.js
js/jquery.json.min.js
js/jquery.min.js
js/jquery.ui.datepicker-fr.min.js
js/jquery.ui.labeledslider.min.js
js/mustache.min.js
js/sopera.min.js
#js/sopera.mustache-templates.html
#js/sopera.mustache-templates.loader.min.js
js/sopera.plot3d.min.js
js/sopera.svg.min.js
js/store.min.js

Ensuite, j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    var cache=window.applicationCache;
    //cache.addEventListener("checking",function(evt){
    //  alert("checking => status : "+cache.status);
    //});
    //cache.addEventListener("noupdate",function(evt){
    //  alert("noupdate => status : "+cache.status);
    //});
    cache.addEventListener("updateready",function(){
      //alert("updateready => status : "+cache.status);
      if (cache.status==cache.UPDATEREADY) {
        //alert("Mise à jour disponible");
        //so.msgbox("Mise à jour de l'application");
        cache.swapCache();
        //window.location.reload();
      }
    },false);

Comme je le disais, updateready est bien déclenché quand il y a modification du fichier manifest !
(le message Mise à jour disponible s'affiche).

Là, je ne vois pas...

**SylvainPV** · 20/02/2016, 16h27

Hmm je sèche, tout a l'air en ordre...

A tout hasard, tu peux essayer avec le debugger ouvert et l'option "Disable cache while Devtools is open" ?

**loubigou** · 21/02/2016, 19h13

j'ai bien vu cette option, mais ça me sert à quoi ? Je l'utilise comment ?
ps : je suis en déplacement cette semaine et moins disponible pour me connecter.
Enfin, merci pour l'attention portée à mon problème....

**SylvainPV** · 21/02/2016, 22h50

à désactiver le cache HTTP standard (pas l'applicationCache). Normalement si le swapCache a été appelé, le cache actuel a été invalidé, mais là je commence à être à court d'idées.

Fichier manifest et cache

JavaScript

Discussions similaires

Partager

Partager