HTML5 - Le manifeste de cache fonctionne très bien sur Chrome mais pas sur Firefox et Opera
Je développe une application Web pour une utilisation hors connexion. J'ai donc besoin d'utiliser la fonctionnalité de cache d'application.
Tout fonctionne bien sur Chrome (15.0.874.106) mais ne fonctionne pas sur Firefox (7.0.1) et Opera (11.52).
Ceci est mon fichier manifeste de cache cache.manifest.php (je l'ai réduit au strict minimum):
<?php
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
header('Content-type: text/cache-manifest');
?>CACHE MANIFEST
CACHE:
/app/common/css/reset.css
/favicon.ico
Et voici les 4 premières lignes du document HTML "principal":
<!DOCTYPE html>
<html manifest="/app/mobile/cache.manifest.php">
<head>
<title>MyApp Mobile</title>
Lorsque j'essaie de charger le manifeste de cache (http://www.myapp.com/app/mobile/cache.manifest.php) dans le navigateur, le fichier s'affiche correctement, mais lorsque j'essaie de charger la page une fois hors connexion, le message d'erreur s'affiche. Page d'erreur "Impossible de se connecter". Encore une fois, cela se produit sur Firefox et Opera.
Firebug dit "0 items in offline cache" et je n'ai pas trouvé le moyen de vérifier le cache de l'application sur DragonFly.
Je commence à m'énerver et je ne sais pas comment résoudre efficacement le problème sous Firefox et Opera. S'il vous plaît aider.
Merci Dan
D'après mon expérience d'utilisation de HTML5 AppCache, c'est une bonne chose une fois que vous l'utilisez, mais extrêmement fragile. Si quelque chose ne va pas, le navigateur ignore tout le fichier et, ennuyeux, au lieu d'utiliser le cache ordinaire du navigateur, il charge de nouveau tout depuis le serveur.
Pire encore, les navigateurs ne rechargeront pas le fichier manifeste à moins que son contenu textuel change. Donc, vous pouvez modifier les en-têtes de votre serveur ou quelque chose pour le réparer, mais à moins que le contenu de cache.manifest.phpmodifications _ ne soit ignoré à l'aveuglette et que vous fassiez exactement ce qu'il a fait la dernière fois. Donc, il aurait pu être cassé, puis vous l'avez corrigé, mais les navigateurs ignorent les modifications car le contenu textuel de cache.manifest.php n'a pas changé. Cela semble même être immunisé contre l’effacement du cache de votre navigateur, ce qui contribue en partie à la confusion: le cache des applications est vraiment très sérieux en ce qui concerne la mise en cache.
Pour contourner ce problème, les modifications de texte dans les commentaires comptent. Vous devez donc placer un commentaire en haut avec une version, un horodatage ou la date (par exemple, # Version 1.2) et modifiez-le lorsque vous souhaitez que le navigateur "remarque".
Alors, le navigateur ne l'utilisera toujours pas immédiatement! La façon dont fonctionne le cache d'applications est la prochaine fois que vous chargez la page, il refera exactement ce qu'il a fait la dernière fois et commencera à rechercher une mise à jour en arrière-plan. Donc, vous voulez probablement que la console soit prête, attendez quelque chose comme "mise à jour ..." puis "complète", alors cliquez sur Actualiser et le navigateur commencera enfin à utiliser la nouvelle version. Enfin!
Dans l’ensemble, il peut être pénible de travailler. Cependant, une fois que cela fonctionne, il est presque à l'épreuve des balles: vous pouvez être sûr que tout ce qui est répertorié dans le manifeste de cache ne concerne que chaque téléchargé une fois, toujours, pour toujours, par utilisateur, jusqu'à ce que changer le contenu textuel du fichier.
La conformité aux normes du navigateur est plutôt bonne ces jours-ci. Par conséquent, la meilleure chose à faire est de le faire fonctionner, mais vous avez vérifié Chrome en dernier et c’est le seul navigateur à avoir correctement mis en cache le fichier manifeste. Pendant le développement, vous avez peut-être eu une panne, mais Firefox et Opera accrochent à mort leurs anciens fichiers manifestes. Je parie que vous avez également essayé de vider le cache du navigateur dans Firefox et Opera, ce qui n’a probablement rien fait. Vous devez modifier le contenu texte du fichier et procéder à une double actualisation avant que Firefox et Opera ne renoncent enfin à leur version endommagée du fichier manifeste commencez à utiliser celui qui fonctionne et que vous avez probablement téléchargé il y a bien longtemps.
De: http://appcache.offline.technology
Dans Firefox, toutes les ressources servies avec Cache-control: no-store ne seront pas mises en cache, même si elles sont explicitement incluses dans le manifeste.
Mon php par défaut envoie:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Il suffit d'ajouter:
header("Cache-Control: no-cache, must-revalidate");
Au fichier php pour qu'il commence à le mettre en cache.
(Ceci est similaire à la réponse de Mychal Hackman, mais un peu plus spécifique).
Pour moi, votre manifeste de cache a l'air un peu "inhabituel" ... il pourrait être utile d'ajouter une section FALLBACK ... un autre point est que l'appcache peut interférer avec le "cache de navigateur normal", c'est-à-dire que si le manifeste de cache est modifié, il doit assurez-vous que le navigateur le recharge, idéalement en changeant le nom (par exemple, en indiquant le numéro de version, l'horodatage ... dans le nom).
Vous pouvez interagir dans votre page avec appcache via JS, ce qui pourrait vous aider à identifier le problème que vous voyez.
Pour des informations détaillées, y compris le code JS et une présentation détaillée, voir
Si nécessaire, revenez avec des questions spécifiques.
METTRE À JOUR
Selon les commentaires fournis par OP this , cela montre une implémentation sympa de l’API JS pour la vérification/débogage d’appcache, comme décrit dans les liens ci-dessus.
Vérifiez votre cache dans about:cache. Je parie que vous verrez "data-size 0 bytes" pour votre (vos) fichier (s) PHP.
Vérifiez vos en-têtes de cache, j'ai trouvé dans Firefox le défaut était "no-cache" sur mes fichiers php. Je viens d'ajouter:
header("Pragma: public");
header("Cache-Control: public, max-age=6000");
dans mon fichier PHP et rechargé le cache hors connexion et il fonctionne enfin.
HTH
Vous pouvez vérifier l'état actuel du cache de l'application à l'aide de window.applicationCache.status, qui renvoie une valeur numérique mappée aux états suivants: 0 - uncached, 1 - idle, 2 - checking, 3 - downloading, 4 - updateready, 5 - obsolete.
Il convient de noter que l’API de cache d’application a quelques points à noter: window.applicationCache.update(): Cela déclenchera le processus de téléchargement du cache d’application, qui équivaut presque à recharger la page. Il vérifie simplement si le manifeste a changé et, le cas échéant, télécharge une nouvelle version de tout le contenu du cache (en respectant les en-têtes de cache). Notez que même si un nouveau cache est créé avec cela, la page continuera à utiliser l'ancien cache. Pour que la page utilise le nouveau cache que vous venez de télécharger, vous devez utiliser la fonction swapCache().
window.applicationCache.swapCache(): Cette fonction indique au navigateur de commencer à utiliser les nouvelles données de cache, si elles sont disponibles. Il est important de noter que même s'il existe un nouveau fichier manifeste, l'application continuera à utiliser l'ancien cache (comme spécifié dans l'ancien fichier manifeste) jusqu'à ce que swapCache() soit appelé. Une fois que swapCache() est appelé, le cache sera utilisé comme spécifié dans le nouveau fichier manifeste.
de: http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Essayez de supprimer:
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
afin que vous n'envoyiez que l'en-tête Content-type:
<?php header('Content-type: text/cache-manifest'); ?>
ApplicationCache force la mise en cache (simplification excessive, mais pas beaucoup). Ces trois premiers en-têtes sont des moyens d'éviter la mise en cache.
Opera semble empêcher la mise en cache lorsque ces en-têtes sont présents. Les outils de débogage de Firefox sont un peu bizarres en ce qui concerne le débogage d'AppCache, mais il est probablement prudent de penser que cela y arrivera également.
Pour Firefox, essayez cette petite astuce:
<html manifest="/app/mobile/cache.manifest.php?1">
C'est le "? 1" qui a finalement permis à Firefox de rechercher le dernier fichier. C'est ce qui a fait le tour pour moi de toute façon. J'espère que cela t'aides.
D'après mon expérience avec un site fonctionnant hors ligne sur l'iPad:
- Le nom du fichier doit se terminer par
.manifest - Le type mime doit être
text/cache-manifest - Avoir une version dans les commentaires de votre manifeste
- Créez des fonctions javascript à l'aide de
window.applicationCache...pour vérifier si le navigateur voit une modification dans le manifeste et pour recharger le contenu, capturez également les événements d'état et affichez-les quelque part.
J'avais un problème similaire. Je réponds très tard, mais cela pourrait être utile pour les autres. Assurez-vous de ne pas rencontrer les problèmes décrits par AshleysBrian dans sa réponse. Ajoutant à cela
- Assurez-vous que le fichier manifeste est servi sous le type "text/cache-manifest"
- Ne l'essayez pas en mode de navigation privée dans Firefox/IE. Cela ne fonctionne qu'en mode de navigation normale. Mais cela fonctionne dans les deux modes de Chrome
En mode hors connexion, une simple modification de l'URL peut poser problème
Eg: http://localhost:8080/app doesn't work on Firefox/IE but http://localhost:8080/app/ works in Firefox/IELes deux travaillent en Chrome
Utilisez ces visualiseurs de ressources pratiques pour obtenir une perspective plus détaillée
about:cache - Firefox chrome://appcache-internals/ - Chrome Pls fill in if someone knows what is it for IE
Mon seul moyen de rendre le travail partout manifeste est de faire ceci:
CACHE MANIFEST
# version x.x
# 2015-03-27
# list everything
Si j'utilise NETWORK et/ou FALLBACK, cela ne fonctionnera pas (sous Chrome).
J'ai trouvé quelque chose de similaire et je l'ai retrouvé dans l'en-tête Cache-Control: no-store du manifeste. Chrome accepte cela, mais Firefox échoue silencieusement avec cela.
Mes tests ont montré que vous pouvez conserver les en-têtes sans cache et les en-têtes à expiration pour assurer des mises à jour fréquentes.
Si j'ai bien compris, la section des applications Web hors connexion du brouillon HTML5 du W3C est non normative. ce qui signifie que cela ne fait toujours pas partie du standard formel HTML5.
Étant donné que la fonctionnalité ne fait toujours pas partie du standard HTML5, différents navigateurs peuvent avoir des implémentations différentes et variées/non standard, s’ils décident tout du moins de l’implémenter. Tous les navigateurs ne peuvent pas choisir de le supporter. Ne vous fiez pas aux fonctionnalités non normatives tant qu'elles ne font pas partie de la norme.