javascript - navegadores - Aplicación web móvil que no borra el caché correctamente

limpiar cache navegador jquery

Question

He estado desarrollando una aplicación web móvil para iPad y he tenido un problema al probar mi código.

Ocasionalmente, y aparentemente al azar, el iPad dejará de actualizar correctamente todas las bibliotecas JS que he escrito. Después de actualizar un código y publicar los cambios, notaré que algunos archivos se habrán actualizado correctamente, mientras que otros no. Este comportamiento persiste después de que se completen numerosos borrados de caché, ciclos de encendido y wifi.

Si cargo la aplicación en Safari no tengo problemas, pero cuando la carga desde el icono de la pantalla de inicio de la aplicación, el problema vuelve a aparecer. Realicé pruebas sencillas, como agregar una línea de alerta a una biblioteca, y esa alerta se dispara sin problemas en ningún lugar, excepto en la ventana de la aplicación móvil-web. Luego, aparentemente al azar otra vez, el problema desaparece, a veces demora 5 minutos, a veces demora una hora.

Veo este comportamiento independientemente de si la aplicación usa un archivo de manifiesto o no. También intenté vaciar estos archivos heredados actualizando el archivo de manifiesto para forzar el recache de esa manera, pero el problema aún persiste.

¿Alguien sabe si este es un problema conocido con iPad? ¿Hay algo en mi lado que se pueda hacer para solucionar esto?

Answer 1

¡Tengo la solución!

Pero primero el problema: el iPad y el iPhone no actualizan la caché al abrir la aplicación. Incluso eliminar la aplicación, borrar la caché de safari, reiniciar el dispositivo, etc. no funciona.

Y aquí está la solución ... ¡taadaa!

Su archivo de manifiesto DEBE cambiar. Si se cambia, el iPad / iPhone volverá a cargar la caché. Así que solo escriba un número de versión en su archivo de manifiesto y cámbielo cuando haya cambiado algo:

# Version: 1.2

Entonces, un archivo de manifiesto completo podría verse así:

CACHE MANIFEST
# Version 1.5
NETWORK:
*
CACHE:
index.html
jquery-1.7.2.min.js
images/logo.jpg

Incluso recarga cosas como imágenes que no están escritas en el archivo de manifiesto. Lo probé varias veces.

Por cierto. no te olvides de revisar tu archivo manifiesto con http://manifest-validator.com

Mi fuente es esta muy buena forma de aplicaciones web fuera de línea: http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/

También dice que tal vez necesites iniciar tu aplicación dos veces:

Si el manifiesto se actualizó, el navegador descargará todos los archivos en la lista de archivos almacenados en caché, PERO, el contenido original ya habrá sido cargado en este punto (recuerde que ya está almacenado en la memoria caché, por lo que se carga súper rápido).

Pero funcionó para mí siempre en el primer intento.

Answer 2

Apagar y encender el iPad funciona para mí, al menos en iOS 5. No está completamente apagado, solo use el botón de reposo en la parte superior del iPad y luego el botón de inicio para volver a encenderlo. agregar un número de versión al final de los archivos también funciona, pero eso se vuelve bastante tedioso.

Answer 3

No puedo verificar que la caché se borre correctamente, pero esto funcionó para mí:

Para hacer esto, debe permitir Web Inspector en su dispositivo iOS. Vaya a Configuración> Safari> Avanzado> Web Inspector (tiene que estar activo) Y debe activar el menú del desarrollador en Safari de su computadora. Vaya a Preferencias> Avanzado> Activar menú del desarrollador

1. Conecte su dispositivo a su computadora con el cable USB
2. Vaya a Safari> Desarrollo> El nombre de su dispositivo> Inspeccione una aplicación (la aplicación debe estar ejecutándose)
3. Esto abrirá el inspector en su computadora para la aplicación web
4. Mientras el inspector está abierto, borre la caché (comando + alt + E)
5. Con el inspector todavía abierto, actualice la página en su computadora (comando + R)

De alguna manera, el caché de Webapp se borró y obtuve el código que no está en caché.

Answer 4

Para solucionar este problema, debe agregar nuevas letras con números (no solo números) al final del enlace así:

?v1
?x2
?z3

Y cada vez que desee actualizar su secuencia de comandos, debe agregar letras y números diferentes (se requieren letras diferentes porque hoy muchos navegadores móviles ignoran todos los números puros al final del enlace de Javascript / CSS).

Answer 5

Pasé muchos días trabajando en este problema. Parecía un error de renderización debido a algunos cambios fortuitos que había hecho tanto en CSS como en HTML, colocando botones en lugares aleatorios en la pantalla que hacían que la aplicación no se pudiera usar.

Decidí que el CSS estaba en la memoria caché, después de varios días de pinchar y pinchar, y finalmente intenté cambiar el nombre de los archivos, algo de lo que @Neo habla. También cambié el control de caché en mi archivo .htaccess, ya que había estado utilizando un viejo .htaccess que instruía al navegador para almacenar en caché durante un año.

tl; dr: mod_expires control de caché ( mod_expires y mod_headers ) para tus archivos de mod_headers , y simplemente utiliza un manifiesto de caché si no lo estás haciendo todavía. Luego cambie el nombre de los archivos y actualice los enlaces en su HTML y debería estar bien.

Answer 6

Pasé varias horas tratando de solucionar este problema, y ​​parece como si el archivo de manifiesto que se supone que administra el almacenamiento en caché de archivos, se puede almacenar en caché, dejando su aplicación web en el limbo.

En mi caso, no quería nada en la memoria caché. Así es como resolví el problema:

• Habilita el módulo de mod_expires Apache en mi servidor
• Cree un archivo .htaccess en el mismo directorio que el archivo de índice. El archivo debe contener la línea ExpiresDefault A1 .

Esto le dice al servidor que cada archivo debe caducar un segundo después de haber sido accedido. Mi aplicación web se usa como encuesta en convenciones estudiantiles, por lo que solo una persona la usa a la vez. Mi solución funciona para mí; es posible que deba modificarlo más para que le quede bien.

En el pasado, este problema se había presentado aparentemente al azar. Todas mis pruebas recientes han demostrado que responde como uno esperaría.

Answer 7

Tengo exactamente el mismo problema con mis aplicaciones web en iPad: a veces, al azar, la aplicación web ejecutada en modo independiente no actualizaba un recurso en particular (archivo HTML / CSS / JS), a pesar de matar todas las aplicaciones posibles, eliminar Caché e historial de Safari, reiniciar, reiniciar la conexión wifi, actualizar o eliminar el archivo de manifest o poner el dispositivo en un microondas; incluso aplicar un mazo resultó ser inútil.

Si bien no he encontrado una forma "kosher" para solucionarlo, siempre hay una solución alternativa: cambiar el nombre del recurso.

Simplemente cambie el nombre del archivo no refrescante. Si tiene un problema con, por ejemplo, que foobar.js no se actualiza, foobar2.js nombre a foobar2.js y actualice las referencias a este recurso en otros archivos. Por supuesto, esto podría ser un dolor en lo que sabes (especialmente cuando después de una semana de desarrollo estás en foobar12.js ), pero hasta que veamos una solución oficial para iOS o una técnica refrescante activa, es la única forma que conozco de para ponerlo en marcha.

Answer 8

Trabaja alrededor de este problema. Agregue un enlace a la aplicación web en sí, como ...

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

¡Funciona igual que el botón de recarga en la barra de direcciones de Safari de iPhone / iPad!

Answer 9

Tuve exactamente el mismo problema.

Probé las diferentes sugerencias aquí y agregué control de caché sin suerte. Traté de cambiar el nombre del archivo que se negó a actualizar, sin suerte. Traté de agregar un manifiesto de caché (tuve uno antes, pero lo eliminé), sin suerte. Y probé todas las cosas habituales: eliminar la aplicación, borrar la caché, reiniciar, reinstalar la aplicación, sin suerte.

Lo único que funcionó para mí fue cambiar el nombre del directorio virtual en mi servidor web. Puede que esta no sea una solución viable para todos, pero, afortunadamente, esto no fue realmente un problema, ya que estoy probando el uso de un servidor IIS local.

Answer 10

Para mí, la solución es agregar ?v=1 al final de todos sus enlaces de Javascript y CSS. ¡He intentado todo antes de ver eso en otra publicación de y funcionó directamente! Era cuestión de tiempo...