web-dev-qa-db-fra.com

Mobile Web App n'efface pas le cache correctement

J'ai développé une application Web mobile pour iPad et j'ai rencontré un problème lors du test de mon code. 

De temps en temps, et apparemment au hasard, l'iPad cessera de mettre à jour correctement toutes les bibliothèques JS que j'ai écrites. Après la mise à jour du code et la publication des modifications, je constaterai que certains fichiers seront correctement mis à jour, tandis que d'autres ne le seront pas. Ce comportement persiste après de nombreux effacements de cache, cycles d'alimentation et basculements Wi-Fi. 

Si je charge l'application dans Safari, cela ne me pose aucun problème, mais lorsque je charge depuis l'icône de l'écran d'accueil de l'application, le problème réapparaît. J'ai fait des tests simples comme l'ajout d'une ligne d'alerte à une bibliothèque et cette alerte est déclenchée sans problème, où que ce soit, sauf dans la fenêtre de l'application Web mobile. Ensuite, apparemment à nouveau au hasard, le problème disparaît, il faut parfois 5 minutes, parfois une heure. 

Je constate ce comportement que l'application utilise ou non un fichier manifeste. J'ai également essayé de vider ces fichiers hérités en mettant à jour le fichier manifeste pour forcer le rechochage de cette façon, mais le problème persiste toujours. 

Est-ce que quelqu'un sait s'il s'agit d'un problème connu avec iPad? Y at-il quelque chose de mon côté qui peut être fait pour résoudre ce problème?

javascriptipadhtml5mobile-safariweb-applications
32
Mulberry

Pour moi, la solution consiste à ajouter ?v=1 à la fin de tous vos liens Javascript et CSS . Il était temps...

11
Ludovic

J'ai la solution!

Mais d'abord, le problème: iPad et iPhone ne rafraîchit pas le cache lors de l'ouverture de l'application. Même supprimer l'application, effacer le cache Safari, redémarrer l'appareil, etc., ne fonctionne pas.

Et voici la solution ... taadaa!

Votre fichier manifeste DOIT changer. Si cela change, iPad/iPhone rechargera le cache. Donc, écrivez simplement un numéro de version dans votre fichier manifeste et modifiez-le lorsque vous modifiez quelque chose:

# Version: 1.2

Ainsi, un fichier manifeste complet pourrait ressembler à ceci:

CACHE MANIFEST

# Version 1.5

NETWORK:
*

CACHE:
index.html
jquery-1.7.2.min.js
images/logo.jpg

Il recharge même des choses telles que des images qui ne sont pas écrites dans le fichier manifeste. Je l'ai testé plusieurs fois.

Btw. n'oubliez pas de vérifier votre fichier manifeste avec http://manifest-validator.com

Ma source est ce très cool comment sur les applications web hors ligne: http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/

Il indique également que vous devez peut-être démarrer votre application deux fois:

Si le manifeste a été mis à jour, le navigateur téléchargera tous les fichiers de la liste des fichiers mis en cache, MAIS, le contenu original aura déjà été chargé à ce stade (rappelez-vous qu’il est déjà mis en cache, le chargement est donc très rapide!). 

Mais cela a fonctionné pour moi toujours du premier coup.

8
bench-o

Contournez ce problème pour ajouter un lien à l’application Web comme ...

<a href="javascript:top.frames.location.reload();">refresh</a>

Cela fonctionne comme le bouton de rechargement de la barre d'adresse Safari pour iPhone/iPad!

6
John Wolf

J'ai passé plusieurs heures à essayer de résoudre ce problème, et il semble que le fichier manifeste censé gérer la mise en cache des fichiers puisse lui-même être mis en cache, laissant ainsi votre application Web dans les limbes.

Dans mon cas, je ne voulais rien caché. Voici comment j'ai résolu le problème:

  • Activer le module Apache mod_expires sur mon serveur
  • Créez un fichier .htaccess dans le même répertoire que le fichier d'index. Le fichier doit contenir la ligne ExpiresDefault A1.

Cela indique au serveur que chaque fichier doit expirer une seconde après son accès. Mon application Web est utilisée comme une enquête lors de congrès d’étudiants, c’est-à-dire qu’une seule personne l’utilise à la fois. Ma solution fonctionne pour moi. vous aurez peut-être besoin de le peaufiner pour qu'il vous convienne.

Par le passé, ce problème s’était présenté apparemment au hasard. Tous mes tests récents ont montré qu'il réagissait comme on pouvait s'y attendre.

2
Jezen Thomas

Je ne peux pas vérifier que le cache est effacé correctement, mais cela a fonctionné pour moi:

Pour ce faire, vous devez autoriser Web Inspector sur votre appareil iOS . Accédez à Paramètres> Safari> Avancé> Web Inspector (il doit être actif) Vous devez également activer le menu du développeur sur votre ordinateur. Safari de l'ordinateur . Allez dans le menu Préférences> Avancé> Activer le développeur. 

  1. Connectez votre appareil à votre ordinateur avec le câble USB
  2. Allez dans safari> Développement> Le nom de votre appareil> Inspecter une application (l'application doit être en cours d'exécution)
  3. Cela ouvrira l'inspecteur sur votre ordinateur pour l'application Web.
  4. Tant que l'inspecteur est ouvert Effacez le cache (commande + alt + E)
  5. Avec l'inspecteur toujours ouvert, actualisez la page sur votre ordinateur (commande + R)

D'une manière ou d'une autre, le cache Webapp a été effacé et j'ai obtenu le code non mis en cache.

2
onemesh

éteindre et allumer l'ipad fonctionne pour moi - du moins sur ios 5. pas complètement éteint, utilisez simplement le bouton de veille situé en haut de l'ipad, puis le bouton d'accueil pour le rallumer. ajouter un numéro de version à la fin des fichiers fonctionne également, mais cela devient assez fastidieux.

1
Summer

J'ai exactement le même problème avec mes applications Web sur iPad - parfois, au hasard, l'application Web exécutée en mode autonome ne rafraîchissait pas une ressource particulière (fichier HTML/CSS/JS), bien que toutes les applications possibles aient été supprimées. Cache et historique Safari, redémarrage, redémarrage de la connexion wifi, actualisation ou suppression du fichier manifest ou configuration du périphérique dans un four à micro-ondes; même appliquer un marteau s'avéra inutile.

Bien que je n'ai pas trouvé de solution "casher" pour y remédier, il existe toujours une solution de contournement - renommer la ressource.

Changez simplement le nom du fichier qui ne rafraîchit pas. Si vous rencontrez un problème avec, par exemple, foobar.js non mis à jour, renommez-le en foobar2.js et mettez à jour les références à cette ressource dans d'autres fichiers. Bien sûr, cela pourrait être un problème pour vous savez quoi (surtout si, après une semaine de développement, vous êtes à foobar12.js), mais jusqu'à ce que nous voyions un correctif officiel pour iOS ou une technique de travail rafraîchissante, c'est le seul moyen dont je dispose. savoir de le faire fonctionner.

1
Neo

Pour résoudre ce problème, vous devez ajouter un nouveau lettres avec des chiffres (pas seulement des chiffres) à la fin du lien, comme ceci:

?v1
?x2
?z3

Et chaque fois que vous souhaitez mettre à jour votre script, vous devez ajouter un lettres et des chiffres différents (des lettres différentes sont requises, car de nombreux navigateurs mobiles ignorent tous les chiffres purs à la fin du lien Javascript/CSS.)

0
Mohamad Hamouday

J'ai passé plusieurs jours à travailler sur ce problème. Cela ressemblait à un bogue de rendu en raison de changements coïncidents que j'avais apportés à la fois en CSS et en HTML, plaçant ainsi des boutons à des emplacements aléatoires sur l'écran rendant l'application inutilisable.

J'ai déterminé que le CSS était mis en cache, après plusieurs jours de recherches et d'essais, et j'ai finalement essayé de renommer les fichiers, ce dont parle @ Neo. J'ai également changé le contrôle du cache dans mon fichier .htaccess, car j'utilisais un ancien .htaccess qui demandait au navigateur de mettre en cache pendant un an.

tl; dr: Supprimez le contrôle de cache ( mod_expires et mod_headers ) pour vos fichiers webapp, et utilisez simplement un cache manifeste si vous n’êtes pas déjà. Puis renommez les fichiers et mettez à jour les liens dans votre code HTML et vous devriez être bon.

0
skeggse

J'ai eu exactement le même problème.

J'ai essayé les différentes suggestions ici et ajouté le contrôle du cache sans succès. J'ai essayé de renommer le fichier qui a refusé de mettre à jour, sans succès. J'ai essayé d'ajouter un manifeste de cache (j'en avais un auparavant, mais je l'ai supprimé), pas de chance. Et j'ai essayé toutes les choses habituelles: supprimer une application, vider le cache, réinitialiser, réinstaller une application, pas de chance.

La seule chose qui a fonctionné pour moi a été de renommer le répertoire virtuel sur mon serveur Web. Ce n'est peut-être pas une solution viable pour tout le monde, mais heureusement, ce n'était pas vraiment un problème, car je teste en utilisant un serveur IIS local.

0
René