La aplicación web HTML5 no se almacena en caching cuando se agrega a la pantalla de inicio en iOS

Para ser claros, la aplicación web está almacenando en caching y está funcionando bien sin connection en Mobile Safari.

El problema es cuando se agrega a la pantalla de inicio en un iPhone 4s y iPad 2, ambos con iOS 6.0.1. No funcionará sin connection y producirá un error de networking para conectarse a Internet, es decir, "No se puede abrir MYWEBAPP. MYWEBAPP no se pudo abrir porque no está conectado a Internet"

He estado depurando esto durante varias horas y no puedo encontrar una solución. No recibo ningún error en la console y estoy ejecutando el código de debugging de Jonathan Stark

He probado la aplicación en el escritorio de Safari, Chrome y las herramientas de desarrollo de Firefox tanto en línea como fuera de línea. Además de Web Inspector con los dispositivos en Safari. El resultado es el mismo en iPhone o iPad. Ambos almacenarán en caching la aplicación web y funcionarán en Mobile Safari, pero no cuando se agreguen a la pantalla de inicio. Sin errores, ya sea fuera de línea o en línea.

Por lo que sé, estoy usando las mejores prácticas:

  1. Cabecera HTML agregada: <html manifest="photo.appcache">

    También he experimentado con el uso de diferentes nombres para el file de manifiesto, que incluye: cache.manifest y offline.manifest mientras leo que marca la diferencia, pero en mis testings no importa cuál es el nombre siempre que sean las extensiones. manifiesto o .appcache y se sirve correctamente en el file .htaccess.

  2. Se agregaron los types correctos de MIME: el AddType text/cache-manifest appcache manifest

    También he intentado: AddType text/cache.manifest manifest , AddType text/cache.manifest .manifest manifest , AddType text/cache-manifest .manifest

    No creo que esto haya funcionado: AddType text/cache.manifest pero no lo recuerdo. En su mayor parte, no importaba y me quedé con:

    AddType text / cache-manifest appcache manifest

    como aquello que estaba en HTML5 Mobile Boilerplate.

  3. Adicional:

RED: *

al file appcache. Creo que esto permite que todo se descargue y que todos los enlaces funcionen.

  1. He intentado eliminar esta línea: <meta name="apple-mobile-web-app-capable" content="yes"> porque aquí leo en SO que se resuelve un problema similar al mío, pero puedo confirmarlo no funciona en mis testings Eliminar esta línea o configurar el contenido como "no" al presionar el icono de la pantalla de inicio se networkingirigirá a Mobile Safari y no se abrirá a pantalla completa.

Lo he networkingucido a un error en iOS 6 (en realidad estoy usando iOS 6.0.1), porque sé que ahora los datos se han separado para las aplicaciones web en el browser y las agregadas a la pantalla de inicio . Estoy publicando este problema aquí para ver si otros desarrolladores han encontrado el mismo problema.

He resuelto este problema. Recomiendo lo siguiente para aplicaciones web de pantalla de inicio en iOS 6.

Con fines de testing, utilice el Inspector de Web y un bonito script de JS como Jonathan Stark's para saber cuándo se ha almacenado en caching la aplicación en Mobile Safari:

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

Una vez que se haya almacenado correctamente en la memory caching, agregue la aplicación a su pantalla de inicio y déjela abierta para que guarde en caching la versión de la pantalla de inicio por separado. Tiene que almacenar en caching para que funcione sin connection.

Como la memory caching de mi aplicación tiene 22 MB de datos y el almacenamiento en caching de los datos es SEPARADO para la aplicación web, el problema que tuve fue que la aplicación de la pantalla de inicio no se abría lo suficiente para almacenar el caching.

Esto es terrible en lo que respecta a la experiencia del usuario, pero también es bueno que los datos estén separados. Puedo confirmar esto porque si eliminas los datos del website de Safari, la aplicación web de la pantalla de inicio seguirá funcionando.

Hasta donde sé, no hay una manera de depurar los datos almacenados en caching para la aplicación web de la pantalla de inicio o dónde se almacenan.

La respuesta anterior fue muy útil. @aul dijo que no sabía cómo depurar la aplicación web de la pantalla de inicio, pero encontré una forma.

Conecte su iPad o iPhone a su computadora, luego en Safari vaya a Desarrollar> y select su dispositivo. Su aplicación de pantalla de inicio debe estar abierta para que aparezca en el menu desplegable. Una vez que accede a la aplicación, puede abrir la console de error y ver cómo funciona el script de Jonathan Stark . Una vez que se descargue el manifiesto, podrá usar la aplicación en modo fuera de línea.

¡Este guión hizo la vida más fácil! Gracias a @Paul!

 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); 

Tuve un problema de dos partes. Estaba generando mi manifiesto de caching con ASP.NET MVC / Razor porque quería poder alojar fácilmente el sitio de una aplicación virtual y seguir teniendo los paths alineados. El tipo de contenido no se configuró correctamente en el manifiesto de caching, por lo que Internet Explorer y Safari (iOS) no lo reconocían (aunque lo haría Chrome en PC y Android).

Una vez que solucioné ese problema, todavía no funcionaba cuando intenté acceder a mi aplicación alojada de Azure con iOS Safari. Cuando intenté acceder con Internet Explorer, vi que no tenía el tipo de mime correcto para una fuente que tenía.

Entonces, una palabra de advertencia: esté absolutamente seguro del tipo de mimo no solo del manifiesto, sino también de todos los files de los que depende el manifiesto.