cache - HTML5: el manifiesto de caché funciona muy bien en Chrome pero no en Firefox y Opera
html5 application cache (13)
Estoy desarrollando una aplicación web para uso fuera de línea, por lo tanto, necesito usar la funcionalidad de caché de la aplicación.
Todo funciona muy bien en Chrome (15.0.874.106) pero no funciona en Firefox (7.0.1) y Opera (11.52).
Este es mi archivo de manifiesto de caché cache.manifest.php (lo he reducido al mínimo):
<?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
Y estas son las primeras 4 líneas del documento HTML "principal":
<!DOCTYPE html>
<html manifest="/app/mobile/cache.manifest.php">
<head>
<title>MyApp Mobile</title>
Cuando intento cargar el manifiesto de caché (http://www.myapp.com/app/mobile/cache.manifest.php) en el navegador, el archivo se muestra correctamente, pero cuando intento cargar la página una vez fuera de línea obtengo el La página de error "No se puede conectar". De nuevo, eso solo sucede en Firefox y Opera.
Firebug dice " 0 items in offline cache " y no encontré la manera de verificar el caché de la aplicación en DragonFly.
Me estoy enojando y no sé cómo depurar el problema de manera efectiva en Firefox y Opera. Por favor ayuda.
Gracias, Dan
Compruebe su caché en about:cache . Apuesto a que verás "tamaño de datos de 0 bytes" para tu (s) archivo (s) PHP.
Comprueba tus encabezados de almacenamiento en caché, encontré en Firefox que el valor predeterminado era "no-caché" en mis archivos php. Acabo de agregar:
header("Pragma: public");
header("Cache-Control: public, max-age=6000");
a mi archivo PHP y recargué el caché sin conexión y finalmente está funcionando.
HTH
De mi experiencia con hacer que un sitio funcione fuera de línea en el iPad:
- El nombre del archivo debe terminar con
.manifest - El tipo mime debe ser
text/cache-manifest - Tener una versión en los comentarios de tu manifiesto
- Cree algunas funciones de Javascript usando
window.applicationCache...para verificar si el navegador ve un cambio en el manifiesto y para volver a cargar el contenido, también captura los eventos de estado y los visualiza en algún lugar
De: http://appcache.offline.technology
En Firefox, cualquier recurso servido con Cache-control: no-store no se almacenará en caché, incluso si están explícitamente incluidos en el manifiesto.
Mi php está enviando por defecto:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Es suficiente agregar:
header("Cache-Control: no-cache, must-revalidate");
Al archivo php para que comience a almacenarlo en caché.
(Esto es similar a la respuesta de Mychal Hackman, pero un poco más específico).
En mi experiencia con HTML5 AppCache, es genial una vez que lo haces funcionar, pero extremadamente frágil. Si hay algo que no funciona bien, el navegador ignora todo el archivo y, molestamente, en lugar de usar el caché ordinario del navegador, vuelve a cargar todo desde cero desde el servidor.
Peor aún, los navegadores no volverán a cargar el archivo de manifiesto a menos que su contenido de texto cambie. Así que puede ajustar los encabezados de su servidor o algo para arreglarlo, pero a menos que el contenido de cache.manifest.php cambie, el navegador lo ignorará ciegamente y hará exactamente lo mismo que la última vez . Por lo tanto, podría haberse roto, luego lo corrigió, pero los navegadores ignoran los cambios porque el contenido de texto de cache.manifest.php no ha cambiado. Esto incluso parece ser inmune a borrar el caché de su navegador, que es parte de lo que lo hace tan confuso: el caché de la aplicación es realmente serio con el almacenamiento en caché.
Para evitar esto, los cambios de texto en los comentarios cuentan, por lo tanto, tenga un comentario en la parte superior con una versión o fecha y hora (por ejemplo, # Version 1.2 ) y cámbielo cuando desee que el navegador "advierta".
¡Entonces , el navegador todavía no lo usará de inmediato! La forma en que funciona la caché de aplicaciones es la próxima vez que cargue la página, hará exactamente lo mismo que la última vez y comenzará a buscar una actualización en segundo plano. Por lo tanto, es probable que desee subir la consola, espere algo como "actualizar ..." y luego "completar", luego pulse Actualizar y el navegador finalmente comenzará a usar la nueva versión. ¡Al final!
Con todo, puede ser un dolor correcto para trabajar. Sin embargo, una vez que está funcionando, es casi a prueba de balas: puede estar seguro de que todo lo que figura en el manifiesto de caché se descarga una vez , siempre , para siempre, por usuario, hasta que cambie el contenido de texto del archivo.
El cumplimiento de los estándares del navegador es bastante bueno en estos días, por lo que mi mejor opción es que realmente funcione, pero usted revisó Chrome por última vez y es el único navegador que ha guardado en caché el archivo de manifiesto correctamente. Durante el desarrollo, es posible que se haya roto, pero Firefox y Opera están agarrando sus antiguos archivos de manifiesto hasta la muerte. Apuesto a que también trataste de borrar el caché del navegador en Firefox y Opera, lo que probablemente no hizo nada; necesitas cambiar el contenido de texto del archivo y realizar una doble actualización antes de que Firefox y Opera finalmente abandonen sus versiones rotas del archivo de manifiesto y comience a usar el que funciona que probablemente haya cargado hace años.
Encontré algo similar, y lo rastreé hasta Cache-Control: encabezado sin tienda en el manifiesto. Chrome acepta esto, pero Firefox falla silenciosamente con esto.
Mis pruebas mostraron que puede mantener encabezados sin caché y caduca los encabezados para garantizar actualizaciones frecuentes.
Intente eliminar:
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");
para que solo envíe el encabezado Content-type:
<?php header(''Content-type: text/cache-manifest''); ?>
ApplicationCache obliga al almacenamiento en caché (simplificando demasiado, pero no mucho). Esos tres primeros encabezados son formas de evitar el almacenamiento en caché.
Opera parece prevenir el almacenamiento en caché cuando esos encabezados están presentes. Las herramientas de depuración de Firefox son un poco inseguras cuando se trata de depurar AppCache, pero es probable que suponga que esto también lo arreglará allí.
Mi única forma de hacer que el manifiesto funcione en todas partes es hacer esto:
CACHE MANIFEST
# version x.x
# 2015-03-27
# list everything
Si uso NETWORK y / o FALLBACK , no funcionará (en Chrome).
Para Firefox, prueba este pequeño truco:
<html manifest="/app/mobile/cache.manifest.php?1">
Es el "1" que finalmente hace que Firefox busque el último archivo. Eso es lo que hizo el truco para mí de todos modos. Espero que esto ayude.
Para mí, su manifiesto de caché parece un poco "inusual" ... podría ayudar agregar una sección de FALLBACK ... otro punto es que la aplicación podría interferir con el "caché normal del navegador", es decir, si el manifiesto de caché se cambia, necesita asegúrese de que el navegador lo recargue, idealmente esto se logra cambiando el nombre (por ejemplo, teniendo el número de versión, la marca de tiempo ... como parte del nombre).
Puede interactuar en su página con la aplicación a través de JS, lo que podría ayudar a identificar el problema que observa.
Para obtener información detallada, incluido el código JS y un recorrido completo, consulte
Si es necesario volver con preguntas específicas.
ACTUALIZAR
Según los comentarios proporcionados por OP, this muestra una buena implementación de la API de JS para verificar / depurar la aplicación como se describe en los enlaces de arriba.
Puede verificar el estado actual de la memoria caché de la aplicación usando window.applicationCache.status , que devuelve un valor numérico asignado a los siguientes estados: 0 - uncached , 1 - idle , 2 - checking , 3 - downloading , 4 - updateready , 5 - obsolete.
La API de la memoria caché de la aplicación tiene algunas cosas que vale la pena destacar: window.applicationCache.update() : Esto disparará el proceso de descarga de la memoria caché de la aplicación, que es casi lo mismo que volver a cargar la página. Simplemente comprueba si el manifiesto ha cambiado y, en caso afirmativo, descarga una versión nueva de todo el contenido de la memoria caché (respetando los encabezados de caché). Tenga en cuenta que, aunque se haya creado una nueva memoria caché con esto, la página continuará utilizando la memoria caché antigua. Para hacer que la página use la nueva memoria caché que acaba de descargar, debe usar la función swapCache() .
window.applicationCache.swapCache() : esta función le dice al navegador que comience a usar los nuevos datos de caché si están disponibles. Es importante tener en cuenta que incluso si hay un nuevo archivo de manifiesto, la aplicación continuará utilizando el viejo caché (como se especifica en el archivo de manifiesto antiguo) hasta que se swapCache() . Una vez que se swapCache() , la memoria caché se usará como se especifica en el nuevo archivo de manifiesto.
desde: http://dev.opera.com/articles/view/offline-applications-html5-appcache/
Según entiendo, la sección de aplicaciones web sin conexión en el borrador del W3C HTML5 no es normativa; lo que significa que todavía no forma parte del estándar HTML5 formal.
Dado que la característica aún no forma parte del estándar HTML5, los diferentes navegadores pueden tener implementaciones diferentes y variadas / no estándar, si es que lo desean implementar. No todos los navegadores pueden optar por apoyarlo. No confíe en características no normativas hasta que sean parte del estándar.
Tuve el mismo problema también. Todo funcionó bien en Chrome e IE, pero un mensaje de "No se puede conectar" en FF.
Después de horas de desesperación, encontré la solución y era ridículamente simple: en la barra de herramientas del desarrollador, todo el caché estaba desactivado. : /
Tuve un problema similar. Llego tarde a responder, pero esto podría ser útil para otros. Asegúrese de no encontrarse con los problemas descritos por AshleysBrian en su respuesta. Añadiendo a eso
- Asegúrese de que el archivo de manifiesto se publique como tipo "text / cache-manifest"
- No lo intentes en el modo de navegación privada en Firefox / IE. Solo funciona en el modo de navegación normal. Pero funciona en ambos modos en Chrome
Mientras está fuera de línea, un simple cambio en la URL podría ser un problema
Eg: http://localhost:8080/app doesn''t work on Firefox/IE but http://localhost:8080/app/ works in Firefox/IEAmbos trabajan en Chrome
Utilice estos prácticos visores de recursos para obtener una perspectiva más detallada
about:cache - Firefox chrome://appcache-internals/ - Chrome Pls fill in if someone knows what is it for IE