event - html5 offline

Aplicación web para iOS fuera de línea: carga mi manifiesto, pero no funciona sin conexión

Question

Estoy escribiendo una aplicación web para usarla sin conexión en iOS. Creé un manifiesto, lo estoy sirviendo como text/cache-manifest , y generalmente funciona bien cuando se ejecuta dentro de Safari.

Si lo agrego como una aplicación a mi pantalla de inicio, enciendo el modo avión, no puedo abrir la aplicación en absoluto. Aparece un error y ofrece cerrar la aplicación. (¡Pensé que este era el propósito completo de una aplicación fuera de línea!)

• Cuando cargo la aplicación por primera vez cuando estoy en línea, puedo ver en mis registros que está solicitando cada página enumerada en el manifiesto.

• Si apago el modo avión y cargo la aplicación, puedo ver que el primer archivo que está solicitando es mi archivo main.html (que se incluye en el manifiesto y tiene el atributo manifest=... ). A continuación, solicita el manifiesto y todos mis otros archivos, obteniendo 200 para todos (y 304 para todo lo solicitado una segunda vez durante esta carga).

• Cuando cargo la página en Chrome y hago clic, los registros muestran que lo único que intentan alcanzar en el servidor es "/favicon.ico" (que es un 404, y que no creo que iOS Safari intente cargar) , de todas formas). Todos los archivos enumerados en el manifiesto son válidos y se sirven sin errores.

• El inspector de Chrome enumera, en "APPLICATION CACHE", todos los archivos en caché que he enumerado, que espero. El conjunto completo de archivos es de aproximadamente 50 KB, muy por debajo de cualquier límite de recursos sin conexión que he encontrado.

¿Se supone que esto funciona, es decir, se supone que puedo crear una aplicación de iOS sin conexión usando solo HTML / CSS / JS? ¿Y dónde hago para descubrir por qué no funciona sin conexión?

(Relacionado, pero no me parece lo mismo, ya que se trata de Safari y no de una aplicación independiente: " No se puede obtener una aplicación web para trabajar sin conexión en el iPod ")

Answer 1

A veces, un grupo de caché de aplicaciones entra en mal estado en MobileSafari: descarga cada elemento en la caché y luego activa un evento de error de caché genérico al final. Un grupo de caché de aplicación, según la especificación, se basa en la URL absoluta del manifiesto. Descubrí que cuando se produce este error, al cambiar la ruta al manifiesto (p. Ej., Cache2.manifest, etc.) se obtiene un nuevo grupo de caché y se evita el problema. Puedo confirmar que todas nuestras aplicaciones web funcionan sin conexión en pantalla completa con 4.2 y 4.3.

Answer 2

Confirmo que el nombre ''cache.manifest'' resolvió el problema de almacenamiento en caché sin conexión en IOS 4.3. Otro nombre simplemente no funcionó.

Answer 3

Descubrí que depurar aplicaciones HTML5 sin conexión es un problema. Encontré que el código de este artículo me ayudó a descubrir qué problema tenía mi aplicación:

http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/

Depuración de caché de aplicaciones sin conexión HTML 5 de Jonathan Stark

Si está buscando proporcionar acceso sin conexión a su aplicación web, el caché de aplicaciones sin conexión disponible en HTML5 es devastador. Sin embargo, es un PITA gigante para depurar, especialmente si todavía estás tratando de entenderlo.

Si tiene dificultades con el manifiesto de caché, agregue el siguiente JavaScript a su página HTML principal y visualice la salida en la consola usando Firebug en Firefox o Debug> Show Error Console en Safari.

Si tiene alguna pregunta, PLMK en los comentarios.

HTH,
j

var cacheStatusValues = [];
cacheStatusValues[0] = ''uncached'';
cacheStatusValues[1] = ''idle'';
cacheStatusValues[2] = ''checking'';
cacheStatusValues[3] = ''downloading'';
cacheStatusValues[4] = ''updateready'';
cacheStatusValues[5] = ''obsolete'';

var cache = window.applicationCache;
cache.addEventListener(''cached'', logEvent, false);
cache.addEventListener(''checking'', logEvent, false);
cache.addEventListener(''downloading'', logEvent, false);
cache.addEventListener(''error'', logEvent, false);
cache.addEventListener(''noupdate'', logEvent, false);
cache.addEventListener(''obsolete'', logEvent, false);
cache.addEventListener(''progress'', logEvent, false);
cache.addEventListener(''updateready'', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? ''yes'' : ''no'';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = ''online: '' + online;
    message+= '', event: '' + type;
    message+= '', status: '' + status;
    if (type == ''error'' && navigator.onLine) {
        message+= '' (prolly a syntax error in manifest)'';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    ''updateready'',
    function(){
        window.applicationCache.swapCache();
        console.log(''swap cache has been called'');
    },
    false
);

setInterval(function(){cache.update()}, 10000);

Answer 4

Descubrí que limpiar el caché de Safari después de habilitar el modo Avión es una forma efectiva de comprobar si la aplicación realmente está funcionando fuera de línea.

A veces me han engañado al pensar que el caché de la aplicación estaba funcionando cuando no era así.

Answer 5

Después de días de meterme con las aplicaciones web fuera de línea para trabajar en un iPhone / iPod Touch con la autenticación HTTP del servidor web, descubrí estos nuggets útiles:

1. Asegúrate de que Safari esté en la raíz URL de la aplicación web al tocar "Agregar a pantalla de inicio". Usé jQuery Mobile y algunas veces agregué el enlace con "/ # pageId". Causa problemas.

2. Ejecute sus llamadas Ajax en serie. Esto podría ser importante solo si su aplicación web usa autenticación HTTP, pero mi aplicación estaba disparando una gran cantidad de llamadas de Ajax en la carga de la página en paralelo y causó que la aplicación se cuelgue en la "Apple-Touch-Start-Image".

3. Las llamadas Ajax son "exitosas" cuando están fuera de línea (al menos usando Prototype.js ). Pruebe una pieza de datos real en la respuesta Ajax, no solo en el estado HTTP. Lo usé para probar la visualización de datos almacenados en caché (SQL) o en vivo.

4. En el uso manifiesto, "RED: / n * / n". Por lo que pude reunir, esta es una declaración general para todo lo no explícito en la sección "CACHE:". Usa Chrome para asegurarte de que tu manifiesto sea correcto. Mire la consola de Chrome para ver si hay errores.

5. ¡No relacionado directamente, pero me disparó un poco, las llamadas a openDatabase.transaction () son ASÍNCRONAS! Es decir, la línea del código JS después de la transacción ( execute() , error() , success() ) se ejecutará ANTES de la función success() .

¡Buena suerte!

Answer 6

Encontré esta solución que parecía funcionar para mí, ya que también encontré este problema durante mi desarrollo. Esta solución me ha funcionado bien hasta ahora y también para otras personas con las que solicité probarla, y puedo ejecutarla sin conexión (en modo avión) y fuera de la pantalla de inicio después del almacenamiento en caché y otras cosas. He escrito una publicación al respecto en mi sitio:

http://www.offlinewebapp.com/solved-apple-mobile-web-app-capable-manifest-error/

1. Elimine su icono actual de la aplicación web en la pantalla de inicio.
2. Ve a la configuración y borra tu caché del navegador Safari.
3. Toca dos veces tu botón de inicio para abrir la barra multitarea. Encuentra el de Safari, mantén pulsado el dedo y sal de él.

Por favor, avíseme si esto también funciona para usted. ¡Buena suerte!

Answer 7

Escribí una aplicación fuera de línea que todavía parece funcionar en 4.2 y 4.2.1; la publicación está un poco polvorienta, pero el código aún se ejecuta:

http://kentbrewster.com/backchannel/

Remy Sharp tiene una publicación más reciente con código que también funciona, aquí:

http://remysharp.com/2011/01/31/simple-offline-application/

Su aplicación:

http://rem.im/boggle/

Answer 8

He escrito una aplicación y funciona bien a través del navegador móvil, pero al agregar el escritorio ... No funciona. Supongo que Apple se dio por vencido en IOS4 y todos los esfuerzos están ahora en OS5. Vergüenza :(

Answer 9

Me he encontrado con el mismo problema hoy en iOS 4.3. Pude solucionar el problema agregando un archivo favicon.ico y también agregándolo al manifiesto.

Answer 10

Ninguna aplicación web fuera de línea (a partir de iOS 4.2) puede ejecutarse sin una conexión a Internet (lo que también significa modo avión) al usar <meta name="apple-mobile-web-app-capable" content="yes" /> en el html sección de la cabeza. He verificado esto con cada ejemplo que he visto y los que usan Safari para hacer que el sitio funcione bien, pero cuando ingresas esa metaetiqueta, no funciona. Prueba tu aplicación sin ella y verás a qué me refiero.

Answer 11

Tengo una posible solución para esto: parece un poco loco, pero aquí va ... Trabajo mucho con las aplicaciones cache.manifest y de pantalla completa (aquí hay una prueba si es necesario: http://www.mrspeaker.net/2010/07/12/argy-bargy/ - agregar a la pantalla de inicio y luego encender el modo de vuelo y se inicia, al menos, a partir de iOS 4.2.1)

Una cosa rara que encontré es que a veces parece que algún tipo de información "meta" en los archivos puede arruinarlos de ser almacenados en caché - ¿Alguna vez notaron que en bash que si hacen un "ls" algunos archivos (dependiendo de su color) configuraciones) se destacan sin motivo aparente? Los archivos pueden tener metadatos que el sistema operativo (creo) agrega automágicamente, y hay maneras de eliminarlo ... No puedo recordar por qué pero aquí hay algunos detalles más: Elimine los metadatos de los archivos en Snow Leopard

Después de arrancarme el pelo un día, y rehusar rendirme porque sabía que DEBERÍA haber funcionado ... Chrome estaba diciendo que cargaba todos los archivos, pero terminó con un error genérico. Al final recreé la estructura del proyecto con archivos en blanco y copié / pegué los contenidos. Funcionó: ¡comenzó a almacenar en caché como se suponía que lo haría!

Cuando miré los archivos noté que había algo de metainformación. Intenté borrar esta información y el proyecto original funcionó nuevamente. No estoy seguro de que esta sea la razón por la que funcionó de nuevo, tal vez fue solo una coincidencia.

Porque funcionó, no pensé demasiado sobre eso. El mismo problema volvió a ocurrir algunos meses después y el truco copiar / pegar funcionó de nuevo. Estaba ocupado, así que no investigué más, pero juré que llegaría al fondo la próxima vez ... pero aún no lo he hecho.

Uf. De todos modos, me alegro de tener que escribir eso en alguna parte ...

[ACTUALIZACIÓN: meses y meses después - No he podido reproducir esto, así que no creo que sean los metadatos]

Answer 12

Tengo varias aplicaciones web que funcionan sin conexión y con conexión / desconexión.

Cuando apago el modo de aeropuerto, recibo una solicitud para el manifiesto y algunos otros archivos.

No recibo solicitudes de imágenes, JavaScript, CSS o archivos AJAX almacenados en caché.

Si ve solicitudes de sus recursos, IOS no los tiene en la memoria caché.

Safari en general es más exigente con los manifiestos.

Te sugiero que pruebes Safari en tu computadora.

Answer 13

Tuve problemas con este problema de iOS 4.3 "caché sin conexión" desde que actualicé mi iPad a 4.3.1 desde 4.2. Vi en otra publicación de este sitio que estaba trabajando nuevamente en 4.3.2. Así que actualicé por iPad nuevamente, ahora a iOS 4.3.3. Pero todavía no podía hacer que el almacenamiento en caché fuera de línea funcionara hasta que cambie el nombre de mi archivo de manifiesto a "cache.manifest". Luego, el almacenamiento en caché comenzó a funcionar nuevamente y pude ejecutar mi aplicación HTML5 sin conexión desde la pantalla de inicio. No necesité poner el favicon.ico en el manifiesto de caché. Y también tenía la pantalla completa funcionando (configurando "apple-mobile-web-app-capable" en "sí").