Menu
I have a simple jQuery Mobile contact-list application. It offers the users an option to add it to their home-screen. When they do, clicking a phone number to start a call and opening the application again puts them to the first page of the app. To prevent this behavior, I added the following:
$(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);
});
});
However, when the users returns to the application, the page cache is lost and all the data on that page, which normally should stay open, is re-loaded from the server (see $.mobile.changePage(storedPage)). Is there any way to prevent this? Is there also any elegant way of achieving the same effect? Should I just store active page HTML on the localStorage as well? If so, how do I reactivate it?
Thanks for the help.
edit: Maybe I wasn't clear enough. I can already store data on the localStorage. Using cookies to store pieces of HTML that would be transfered to the server on each request would be simply ridiculous, as far as I can tell. My question isn't about how to store data. What I am really asking is, by simply storing $(".active-page-class").html() and putting it back on the page when it is not there, I want to imitate a client side caching which iPhone does not provide on ajax based jQuery mobile applications. This is about jQuery Mobile for the apps that are accessed via iPhone homescreen, as the tags and the question already states.
949
How to Get a Cached Link With Google Search. Step 1: Do a Google search on your computer for the page you want to find. Step 2: When the search results load, click on the down arrow next to the site's URL and select “Cached.” Step 3: The cached version of the page will load.
When you use a browser, like Chrome, it saves some information from websites in its cache and cookies. Clearing them fixes certain problems, like loading or formatting issues on sites.
I don't think you can have it both ways. You can't have a URL based app and store your HTML in a cache. As soon as you say "go to this URL" the browser (even a frameless web-app one) takes over. You can't tell it, "but use this HTML instead".
Now if your app was more Javascript-driven and dynamically created (which I recommend for mobile web apps), this is easy because changing pages doesn't involve a URL change. You can use a pattern like:
$( 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
};
With URL-based mobile apps, the only way to force the browser to not reload a page from the server when you say, "go to this URL", is to use a manifest file.
Add this to your <html> element:
<html manifest="app.manifest">
Make sure your web server serves up files with the .manifest extension with the text/cache-manifest mime type.
Then create a file called app.manifest:
CACHE MANIFEST
#version 1.0
#files to cache here
CACHE:
home.html
#files to refresh every time
NETWORK:
login.html
Once the page is cached, it will not be updated until there is a new manifest file. This just means the file has changed in any way, including comments (anything after #). The version line (which is just a comment and has no special meaning to the file) allows updating with just a change in version number.
There is also and API to go along with the cache manifest using the window.applicationCache object. There's a great tutorial at HTML5 Rocks: A Beginner's Guide to Using the Application Cache.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
