¿Cómo almacenar en caché y conservar la última página visitada en una aplicación jQuery Mobile, cuando se vuelve a abrir desde la pantalla de inicio del iPhone?

Tengo una aplicación de lista de contactos jQuery Mobile simple. Ofrece a los usuarios una opción para agregarlo a su pantalla de inicio. Cuando lo hacen, hacer clic en un número de teléfono para iniciar una llamada y abrir la aplicación nuevamente los coloca en la primera página de la aplicación. Para evitar este comportamiento, añadí lo siguiente:¿Cómo almacenar en caché y conservar la última página visitada en una aplicación jQuery Mobile, cuando se vuelve a abrir desde la pantalla de inicio del iPhone?

$(function() { 
    //if I am at the start page 
    if ($.mobile.activePage.attr('data-url') === '/') { 
     var storedPage = localStorage.getItem('jqmPage'); 
     //and I have a stored link 
     if (storedPage !== null) { 
      //change the page to the stored link 
      $.mobile.changePage(storedPage); 
     } 
    } 
    $(document).bind('pagecreate', function (e) { 
     var url = !!e 
      ? $(e.target).attr("data-url") 
      : location.pathname + location.search; 
     //there can be dialog pages - we don't want to return to them 
     if (url.indexOf('/') !== 0) { 
      return; 
     } 
     localStorage.setItem('jqmPage', url); 
    }); 
});

Sin embargo, cuando los usuarios vuelve a la aplicación, el caché de páginas se pierde y todos los datos de esa página, que normalmente debe permanecer abierta, se re-loaded desde el servidor (vea $ .mobile.changePage (storedPage)). hay alguna forma de prevenir esto? ¿Hay alguna forma elegante de lograr el mismo efecto? ¿Debería simplemente almacenar HTML de página activa en localStorage también? Si es así, ¿cómo lo reactiva?

Gracias por la ayuda.

editar: Quizás no fui lo suficientemente claro. Ya puedo almacenar datos en localStorage. Usar cookies para almacenar pedazos de HTML que se transferirían al servidor en cada solicitud sería simplemente ridículo, por lo que yo sé. Mi pregunta no es acerca de cómo almacenar datos. Lo que realmente estoy preguntando es, simplemente almacenando $ (". Active-page-class"). Html() y volviendo a ponerlo en la página cuando no está allí, quiero imitar un caché del lado del cliente que el iPhone no hace proporcionar aplicaciones móviles jQuery basadas en ajax. Se trata de jQuery Mobile para las aplicaciones a las que se accede a través de iPhone homescreen, como ya lo indican las etiquetas y la pregunta.

Fuente

2012-01-12 Ege Özcan

¿no puede almacenar los datos en esa página también y volver a procesarlos? – ghostCoder

Si solo presiono el HTML de la página dentro del cuerpo y agrego la clase de página activa a él, entonces los controladores de eventos no se adjuntarán. $ .mobile.changePage maneja eso (teniendo en cuenta que su elemento de página está insertado antes y tiene la misma url de datos que la url a la que está navegando) pero estropea el HTML (no cuando la página se carga desde el servidor, de lo contrario jQuery móvil no habría funcionado en absoluto) –

Al estar basado en la web, las cookies deberían ser una opción. –

No creo que pueda tener ambas cosas. No puede tener una aplicación basada en URL y almacenar su HTML en un caché. Tan pronto como diga "ir a esta URL", el navegador (incluso una aplicación web sin marcos) asumirá el control. No puede decirlo, "pero use este HTML en su lugar".

Ahora, si su aplicación fue más impulsada por Javascript y creada dinámicamente (que recomiendo para aplicaciones web móviles), esto es fácil porque cambiar de página no implica un cambio de URL. Se puede utilizar un patrón como:

$(function() { 
    var lastPageName = window.localStorage.getItem('lastPageName'), 
     lastPageData = window.localStorage.getItem('lastPageData'); 

    if (lastPageName) { 
     loadPage(lastPageName, lastPageData); 
    } else { 
     loadPage("home"); 
    }; 
});

function loadPage(name, data) { 
    var pageData; 

    if(data) { 
     pageData = data; 
    } else { 
     pageData = loadPageData(name); 
     window.localStorage.setItem('lastPageName', name); 
     window.localStorage.setItem('lastPageData', pageData); 
    }; 

    //build page using name and pageData 
};

Con las aplicaciones móviles basadas en URL, la única manera de forzar al navegador a no volver a cargar una página del servidor cuando se dice, "ir a esta dirección URL", es usar un archivo de manifiesto.

Agregar a su elemento <html>:

<html manifest="app.manifest">

Asegúrese de que el servidor web sirve archivos con la extensión con el tipo MIME text/cache-manifest.

A continuación, cree un archivo llamado app.manifest:

CACHE MANIFEST 
#version 1.0 

#files to cache here 
CACHE: 
home.html 

#files to refresh every time 
NETWORK: 
login.html

Una vez que se almacena en caché de la página, no se actualizará hasta que haya un nuevo archivo de manifiesto. Esto solo significa que el archivo ha cambiado de alguna manera, incluidos los comentarios (cualquier cosa después de #). La línea de la versión (que es solo un comentario y no tiene un significado especial para el archivo) permite la actualización con solo un cambio en el número de versión.

También hay una API para ir junto con el manifiesto de caché utilizando el objeto window.applicationCache. Hay un gran tutorial en HTML5 Rocks: A Beginner's Guide to Using the Application Cache.

Fuente

2012-01-19 00:13:20 ThinkingStiff

Gracias por la explicación larga y clara. En realidad, jQuery Mobile usa Ajax solo cuando un elemento de página con el mismo atributo url de datos que la url solicitada no existe en la página. Sin embargo, cuando inserto la página manualmente, aunque la reconoce y la carga, la página final se ve rota. La URL también cambia sin recarga al utilizar la API de historial. Es por eso que estoy preguntando si hay una manera compatible para hacerlo. He estado tratando de comprender la fuente de un marco "masivo por sí solo" durante días sin éxito para comprender la causa del problema. –

¿Cómo almacenar en caché y conservar la última página visitada en una aplicación jQuery Mobile, cuando se vuelve a abrir desde la pantalla de inicio del iPhone?

Respuesta

Cuestiones relacionadas