[Resolu][Cache manifest] : comment le tester ?

Salut à tous,

je me suis amusé à implémenter un cache manifest sur mon site, dans l'idée de voir si cela pouvait améliorer les perfs pour les navigateurs mobiles. Je l'ai mis uniquement sur la version smartphone de ma home page pour faire des essais (pour éviter le super message de Firefox).
(si vous voulez le tester, un user agent de smartphone type iPhone fera l'affaire... oui, je sais, la détection par user-agent, c'est mal mais c'est vraiment pas le sujet)

L'idée est de mettre en cache les principaux éléments du graphisme : CSS et images. Et évidemment, si la connexion se perd, d'indiquer à l'internaute qu'il n'est plus connecté.

Plusieurs questions m'interrogationnent :

Déjà, est-ce que la syntaxe est bonne ?

CACHE MANIFEST
# 2011-07-17:v4

# Explicitly cached 'master entries'.
CACHE
 http://www.nicolas-hoffmann.net/favicon.ico
 

 http://www.nicolas-hoffmann.net/style/ND_new_green/rss.png
 
 http://www.nicolas-hoffmann.net/images/wikio_btn_abo-univ_plain_fr.gif
 
 http://www.nicolas-hoffmann.net/images/twitter-b.png
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/valid-xhtml10.png
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/wcag1AA.png
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/wcag1AA.png
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/soutien.png
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/vcss.png
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/top.jpg
 
 http://www.nicolas-hoffmann.net/style/ND_new_green/bas.jpg
 

 http://www.nicolas-hoffmann.net/style/ND_new_green/ND_new_green.css
 
 http://www.nicolas-hoffmann.net/source/preload_ND_new_green.js
 
 http://www.nicolas-hoffmann.net/offline.html
 

FALLBACK:
/ /offline.html

Ensuite, est-il possible d'éviter le message "Firefox veut stocker des éléments pour une utilisation hors-ligne" ?

Et plus important : avez-vous des idées pour tester la rapidité de rendu, histoire de voir si ça améliore le schmilblick ? (et pouvez-vous tester au passage, voir comment ça marche sur divers smartphones)

Merci d'avance à ceux qui répondront !
Nico
Modifié par Nico3333fr (16 Oct 2011 - 10:03)

Bonjour,

Je viens te tester ton site avec mon iphone ... et première surprise, je n'ai pas été redirigé vers la version mobile par l'user-agent... alors je ne sais pas si c'est normal.

De mon coté je cherche également a tester mon cache.manifest que j'ai composé de la façon suivante : (identique à la tienne si ce n'est que mes chemins sont en absolu)

CACHE MANIFEST
# version 2.2

CACHE:

/homez.16/chaletde4/www/iphone/css/developer-style.css
/homez.16/chaletde4/www/iphone/css/style.css
/homez.16/chaletde4/www/iphone/javascript/functions.js
/homez.16/chaletde4/www/iphone/javascript/developer-functions.js
/homez.16/chaletde4/www/iphone/icons/accueil.png
/homez.16/chaletde4/www/iphone/icons/bowling.png
/homez.16/chaletde4/www/iphone/icons/location_ski.png
/homez.16/chaletde4/www/iphone/icons/meteo.png
/homez.16/chaletde4/www/iphone/icons/residences.png
/homez.16/chaletde4/www/iphone/icons/restaurant.png
/homez.16/chaletde4/www/iphone/icons/webcam.png
/homez.16/chaletde4/www/iphone/images/fond.png
/homez.16/chaletde4/www/iphone/splash.png
/homez.16/chaletde4/www/iphone/icone.png
/homez.16/chaletde4/www/iphone/accueil.php
/homez.16/chaletde4/www/iphone/appartements.php
/homez.16/chaletde4/www/iphone/details_residences.php
/homez.16/chaletde4/www/iphone/gallerie.php
/homez.16/chaletde4/www/iphone/index.php
/homez.16/chaletde4/www/iphone/meteo.php
/homez.16/chaletde4/www/iphone/photo.php
/homez.16/chaletde4/www/iphone/plans.php
/homez.16/chaletde4/www/iphone/residences.php
/homez.16/chaletde4/www/iphone/restaurant.php

Et malheureusement pour moi ca ne fonctionne pas. J'ai pu tester une Web app avec un cache manifest qui fonctionne et c'est qu'une fois le raccourci sur l'accueil de l'iphone cela revient au même qu'une application car le contenue est accessible même hors connexion ! Alors que pour la mienne .... ca ne fonctionne pas !

Si quelqu'un a des réponses ... bienvenue

Hello.

Tu peux voir le contenu stocké avec l'onglet Resources de l'outil de dev de Chrome.

Pour le message de FF, je suis quasiment sur qu'il n'y a rien à y faire.

Ah, apparemment, ça ne fonctionne pas sous Chromium, l'onglet local est vide. Bizarre, pourtant Firefox m'affiche bien le message demandant de stocker des infos en local :

CACHE MANIFEST
# 2011-07-17:v7

# Explicitly cached 'master entries'.
CACHE
/favicon.ico


/style/ND_new_green/rss.png
/images/wikio_btn_abo-univ_plain_fr.gif
/images/twitter-b.png
/style/ND_new_green/valid-xhtml10.png
/style/ND_new_green/wcag1AA.png
/style/ND_new_green/wcag1AA.png
/style/ND_new_green/soutien.png
/style/ND_new_green/vcss.png
/style/ND_new_green/top.jpg
/style/ND_new_green/bas.jpg

/style/ND_new_green/ND_new_green.css
/source/preload_ND_new_green.js
/offline.html

FALLBACK:
/ /offline.html

NETWORK:
*

Une idée ? (j'ai mis une page de test au cas ou où le appcache est bien activé : http://www.nicolas-hoffmann.net/source/index2.php )

à+
Nicolas

En réponse à Florian_R :

J'ai bien mis mon cache.manifest en place tel qu'il est écrit dans mon post précédent. J'ai vérifié sous chrome dans le menu Outils de Développement / Ressources mais dans la rubrique Application Cache seule une ligne apparaît : URL de mon site.

Tous les fichiers listés dans mon cache.manifest n'apparaissent pas.

As tu une idées ?

@reedbedroom: En effet, je viens de faire quelques tests avec différentes url.

Site de Nico3333fr (manifest en .appcache dans un sous-dossier) : http://www.nicolas-hoffmann.net/source/index2.php Message de FF, pas de données dans l'onglet Application cache.

Démo de ce tuto : http://www.html5-css3.fr/demos/exemple-application-web-offline-cache-manifest-html5.html (manifest en .manifest à la racine) : même résultat que au-dessus.

Démo du lien pointé par Patidou (manifest en .appcache à la racine) : http://html5demos.com/offlineapp Message de FF, les ressources listées dans le manifest apparaissent bien.

Démo de ce tuto (manifest en .manifest à la racine) : http://diveintohtml5.org/examples/offline/halma.html : même résultat que au-dessus.


Dans les 2 cas ou ça marche, l'onglet de Chrome indique "Document was loaded from Application Cache with manifest XXX".

Dans les deux autres : "Application Cache Error Event : Resource fetch failed (404)"

J'ai comme l'impression qu'il y a une histoire de liens relatifs là-dedans, mais je n'ai pas trop eu le temps de creuser plus en détail.

@Nico3333fr : Tu pourrais essayer de mettre un retour chariot entre # Explicitly cached 'master entries'. et CACHE? Juste une idée idiote comme ça au passage.

EDIT: en fait, il te manque juste les deux points après cache : http://stackoverflow.com/questions/7481318/why-is-chrome-requesting-cache-when-i-have-manifest-cache-manifest
Modifié par Florian_R (27 Sep 2011 - 14:05)

Suite aux messages (merci bien ! ), j'ai mis le cache.manifest à la racine de mon site et je l'ai modifié comme suit :

CACHE MANIFEST

# 2011-07-17:v9

# Explicitly cached 'master entries'.

CACHE:
/favicon.ico
/style/ND_new_green/rss.png
/images/wikio_btn_abo-univ_plain_fr.gif
/images/twitter-b.png
/style/ND_new_green/valid-xhtml10.png
/style/ND_new_green/wcag1AA.png
/style/ND_new_green/wcag1AA.png
/style/ND_new_green/soutien.png
/style/ND_new_green/vcss.png
/style/ND_new_green/top.jpg
/style/ND_new_green/bas.jpg

/style/ND_new_green/ND_new_green.css
/source/preload_ND_new_green.js
/offline.html

FALLBACK:
/ /offline.html

NETWORK:
*

Apparemment, Chromium a l'air d'avoir compris les changements sur cette page : http://www.nicolas-hoffmann.net/source/index2.php , l'onglet application cache contient bien les fichiers spécifiés.
Par contre, pas de message sous Firefox... ceci dit, il est possible que j'ai cliqué une fois sur "accepter le local storage". J'imagine que Firefox ne redemande plus ?

Y a-t-il moyen de tester ça sous Firefox ?

EDIT : ça venait bien de mon Firefox @t home, le message apparaît toujours. Par contre, si quelqu'un a une astuce, une extension, ce que vous voulez, pour tester l'efficacité de ce cache manifest sur Firefox, je suis preneur.
Modifié par Nico3333fr (03 Oct 2011 - 11:41)

Re!

J'ai bien l'impression que l'endroit ou se trouve le fichier n'influe pas en fait, je pense que c'était Chrome qui était chatouilleux sur la petite coquille de syntaxe.

Sinon, pour FF, on peux consulter le contenu caché via about:cache et voir si tout roule via le mode hors connexion.

Au passage, je suis tombé sur using application cache (en) sur MDN, le contenu a l'air plus exhaustif que les autres ressources sur le même sujet.

Et bien, grâce (ou à cause) de mon iPod touch qui n'a jamais voulu chopper le wifi à Paris-web, je peux désormais le dire : ça marche !
La page offline a bien été affichée alors que je n'avais pas de connexion.

@Florian_R : je vais aller jeter un œil, merci !