11

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.

Ege Özcan
  • 13,971
  • 2
  • 30
  • 51
  • cant u store the data on that page too and re-render it? – ghostCoder Jan 13 '12 at 06:28
  • If I just push the page HTML inside the body and add the active page class to it, then the event handlers won't be attached. $.mobile.changePage handles that (considering that your page element is inserted before and has the same data-url as the url you are navigating to) but messes up the HTML (not when page is loaded from the server, however - otherwise jQuery mobile wouldn't have worked at all) – Ege Özcan Jan 13 '12 at 08:18
  • Being web based, cookies should be an option. – Brad Christie Jan 14 '12 at 18:54
  • Cookies should definitely help. There are a lot of jQuery cookie plugins to assist you. Check out this plugin [cookies](http://code.google.com/p/cookies/). – nunespascal Jan 15 '12 at 07:33

1 Answers1

1

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • Thanks for the long and clear explanation. Actually, jQuery Mobile uses Ajax only when a page element with the same data-url attribute as the requested url doesn't exist on the page. However, when I insert the page manually, even though it recognizes and loads it, the final page looks broken. The url also changes without reload by using the History API. That is why I am asking if there is a supported way to do it. I have been trying to understand the source of a "massive-on-its-own" framework for days without success on understanding the cause of the problem. – Ege Özcan Jan 19 '12 at 08:11